- gltf模型加载器 GLTFLoader.js
- 相机参数根据需要设置
- 加载gltf的时候，webgl渲染器编码方式设置
引入 GLTFLoader.js
在threejs官方文件的examples/jsm/子文件loaders/目录下，可以找到一个文件
GLTFLoader.js，这个文件就是threejs的一个扩展库，专门用来加载gltf格式模型加载器。
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
.gltf加载器实例化
//创建GLTF加载器对象
var loader = new GLTFLoader()
gltf加载器方法.load()
通过gltf加载器方法.1oad() 就可以加载外部的gltf模型。
执行方法.1oad()会返回一个gltf对象，作为参数2函数的参数，改gltf对象可以包含模型、动画等信息，本节课你只需要先了解gltf的场景属性gltf.scene，该属性包含的是模型信息，比如几何体BufferGometry、材质Material、网格模型Mesh。如果gltf格式文件太大，可以试试zip压缩后，再加载，threejs 加载渲染压缩为zip的3D模型.
loader.load('assets/changqu/厂区新改1.gltf', function (gltf) {
//gltf加载成功后返回一个对象
console.log('gltf对象场景属性', gltf.scene);
model.add(gltf.scene)
})
相机选择正投影OrthographicCamera和透视投影PerspectiveCamera
预览一个三维场景，一般有正投影相机OrthographieCamera和透视投影相机PerspeetiveCamera 可供选择。不过大部分3D项目，比如一般都是使用透视投影相机PerspectiveCamera，比如游戏、物联网等项目都会选择透视投影相机
PerspectiveCamera.
如果希望渲染的结果符合人眼的远小近大的规律，毫无疑问要选择透视投影相机，如果不需要模拟人眼远小近大的投影规律，可以选择正投影相机。
尺寸概念
项目开发的时候，程序员对一个模型或者说一个三维场景要有一个尺寸的概念，不用具体值，要有一个大概印象。
一般通过三维建模软件可以轻松测试测量模型尺寸，比如作为程序员你可以用三维建模软件blender打开gltf模型，测量尺寸。
设置合适的相机参数
通过glt加载完成，模型后，你还需要根据自身需要，设置合适的相机参数，就好比你拍照，你想拍摄一个石头，肯定要把相机对着石头，如果希望石头在照片上占比大，就要离石头近一些。
相机位置怎么设置，你就类比你的眼睛，如果你想模拟人在3D场景中漫游，那么很简单，你把相机放在地面上，距离地面高度和人身高接近即可。
如果你想看到工厂的全貌，你可以理解为你坐着无人机向下俯瞰，简单说，相比人漫游工厂，整体预览工厂相机距离工厂距离更远一些，否则你也看不到全貌，当然过于远了，你就看不清工厂了。
先设定一个小目标，我们希望工厂能够居中显示在canvas画布上，并且保证可以整体预览。
下面以透视投影相机 PerspectiveCamera 为例说明。
相机位置 position
工厂尺寸范围大概200米数量级，那么如果想整体预览观察工厂所有模型，那很简单，第一步，把 camera.position的xyz值统统设置为几百即可，比如(200，200,200）.
具体xyz值，你可以通过OrbitControls可视化操作调整，然后浏览器控制台记录相机参数即可。
camera.position.set(200, 200, 200)
某位置在canvas画布居中
你需要工厂那个伴置在canavs画布上展中，直接把 camera.lookAt() 指向哪个坐标。
如果美术建模，把工厂整体居中，也就是说模型的几何中心，大概位于世界坐标原点。你设置camera. lookAt(0,0,0),相机视线指向坐标原点。
远裁截面 far参数
近裁截面near和远裁截面far，要能包含你想渲染的场景，否则超出视锥体模型会被剪裁掉，简单说near足够小，far足够大，主要是far。
PerspectiveCamera (fov, aspect, naer, far)
测量工厂尺寸大概几百的数量级，这里不用测具体尺寸，有个大概数量级即可，然后far设置为3000足够了。
const camera = new THREE.PerspectiveCamera (30, width / height, 1, 3000)
纹理贴图颜色偏差解决
threejs加载gltf模型的时候，可能会遇到threejs這染结果颜色偏差，对于这种情况，你只需要修改WebGL渲染器默认的编码方式outputEncoding即可
// 解决加载gltf格式模型纹理贴图和原图不一样问题
renderer.outputEncoding = THREE.sRGBEncoding
设置前
设置后
《WebGL/Three.js前端高薪3D可视化》- 加载GLTF格式粮仓基地模型 - 学习笔记
