携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >>
前言
意犹未尽 遂继续研究ThreeJs，并将笔记记录如下
# 载入3D模型（Loading 3D models）
自己的文件托管服务器
文档中推荐了很多，我一直在用的是http-server这个npm 库 全局安装http-server 然后在根目录运行http-server即可，简单易用，如果有缓存，ctrl+c关掉重新跑一下即可。
文件格式
如果有可能的话，我们推荐使用glTF（gl传输格式）。.GLB和.GLTF是这种格式的这两种不同版本， 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。 功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。
----来自官方文档
加载器
在three.js中只会内置一部分加载器 —— 其它的需要在你的应用中单独引入。
// es6
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// html
// 和fontLoader一样，这里同样需要对GLTFLoader进行处理，将浏览器还不支持的import export 改为全局变量的形式
<script src="/js/GLTFLoader.js" />
这里看过GLTFLoader.js源码，有看过我之前如何处理fontLoader的同学，估计已经麻了，import了几十个，这要是一个个const声明，得到啥时候去！
就像上图这样。。。上图是错误示例，es6有一个新特性叫解构赋值，这里正好可以用到
通过这样的方式，就可以声明所需的变量了。
当然也可以通过在script标签上指定type为module的方式去引用，这个时候，你可以使用import和export，引入的threeJs相应的需要变成three.module.js
<script src="./js/OrbitControls.js" type="module"></script>
<script src="./js/day3-1.js" type="module"></script>
const loader = new GLTFLoader();
loader.load( '/model/mars.gltf', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
加载模型不成功的原因
- 路径不对，路径需要http/https的地址
- 相机位置不对
- 模型大小不对
- 模型位置不对
- 没有光
针对这种情况，可以通过添加点光源，添加面光源，添加辅助坐标系，添加辅助控制器来观察，逐步调整，也可以通过软件打开gltf，看一下他的观察点坐标，并进行设置
完整代码
为了不占用总字数，我通过代码片段的方式放出完整代码，引入的js都是threejs example里有的，day3-1的内容在script区域内，3d模型素材在: 火星基地.gltf
