three.js添加3d模型

three.js添加3d模型
three官⽅的⼏何体也就那么⼏个，想要⽣成各种各样的模型，其难度⼗分之⼤，这时引⼊外部模型也不失为⼀种选择。

具体引⼊办法如下。

导⼊依赖
点击查看代码
虽然名字为GLTFLoader,但实际上glb⽂件也是能加载的。

初始化场景
点击查看代码
其中需要注意的是调节相机参数与相机位置，否则很有可能导致场景中看不见任何东西。

创建背景
这⾥创建背景有3种办法，各有优劣。

1、直接加载⼀张贴图作为场景的background。

优点：⼗分简单易于使⽤。

缺点：始终是⼀张平⾏与屏幕的平⾯，⽆法随⿏标移动拖拽⽽变换。

点击查看代码
2、使⽤天空盒⼦，加载CubeTextureLoader纹理，再将该纹理设为场景的background。

优点：可随⿏标移动拖拽⽽变换。

缺点：需要特制的六张天空盒⼦贴图，贴图不吻合时，⽴⽅体空间边缘会出现明显割裂感，视⾓两侧贴图会被拉伸。

点击查看代码
3、创建⼀个较⼤的球体，将场景内的物体全部放⼊球体内部，此思路也是全景图原理，在vr看房项⽬中⼤多能遇见。

优点：可随⿏标移动拖拽⽽变换，由于球⼼距球壳距离相等，不会出现视⾓两侧贴图拉伸。

缺点：需要调节球体半径到合适的尺度，保证空间相机在球体内部，否则空间会出现⿊块。

需要保证贴图为360全景图。

否则球壳拼接边缘会出现明显空间割裂。

点击查看代码
其中必须使⽤side: THREE.BackSide,显⽰材质背⾯。

3种办法视情况选择，当然也可能有其他我不知道办法。

本⽂使⽤为创建球体的办法。

创建⿏标控制器
点击查看代码
相机的最⼤与最⼩距离需要注意调节，否则会出现缩放异常。

创建光源
点击查看代码
模型最终显⽰出来的颜⾊与环境光和点光源均有关。

同时也需要注意调节点光源位置。

加载模型
点击查看代码
需要注意的是这⾥加载的模型是必须放在public路径下的，否则会⽆法加载。

注意根据模型尺⼨，调节场景的各种参数，否则会⽆法看见模型。

渲染场景
点击查看代码
渲染场景时不要忘记实时update⿏标控制器。

完成
加载⼀个冰墩墩。

加载⼀朵玫瑰(win10⾃带的3D Viewer⾥⾯导出的，本⽂使⽤的模型全是glb⽂件。

如果是gltf整体⽂件也可直接导⼊three，但如果贴图与模型是分开的松散gltf⽂件可以使⽤3D Viewer直接另存为glb⽂件即可导⼊three)。

加载⼀个凯瑟琳(在下载的，注册⽤户后⾥⾯有⼤量免费模型可使⽤）
加载⼀个剑刃星舰(也是sketchfab⾥⾯下载的)。