导入模型Three.js 提供了很多原始模型，但如果咱们须要更简单的模型，最好应用 3D 软件建模，而后导入到场景中。本节咱们就来学学如何导入一个做好的 3D 模型。3D 模型的各种格局3D 模型有各种各样的格局，详情可参考维基百科List_of_file_formats#3D_graphics。这些格局各有特点。接下来咱们列举一些比拟常见和风行的。
OBJFBXSTLPLYCOLLADA3DSGLTF
咱们不会关怀所有的模型。因为 GLTF 模型曾经逐步变为规范，并且能应答绝大部分你遇到的场景。GLTFGLTF 是 GL Transmission Format 的缩写。由 Khronos Group 发明（他们还发明了 OpenGL, WebGL, Vulkan, Collada 并且有很多成员在 AMD / ATI, Nvidia, Apple, id Software, Google, Nintendo, etc 公司 ）。GLTF 在近些年曾经变得越来越风行。它能够反对各种数据集，你能够在其格局中应用几何体和材质，同时也能够蕴含相机、光照、场景、动画、骨骼等。同时反对各种文件格式，例如 json、二进制 binary、embed texture 嵌入纹理等。GLTF 曾经成为了实时渲染的规范，并且也正在成为大部分3D软件、游戏引擎和库的规范模型。这意味着你能够轻松的在各个环境中纯熟应用它。但这并不是说 GLTF 能够笼罩所有场景，如果你仅仅是须要一个几何体，那么能够抉择 OBJ、FBX、STL 或 PLY 格局。寻找一个模型咱们后续会学习在 Blender 中创立模型，但当初咱们先寻找一个创立好的模型。咱们能够在 GLTF 团队的示例中看到各种各样的模型。链接为 glTF Sample Models。首先咱们动一个简略的小黄鸭模型作为示例开始动手。
GLTF formats尽管 GLTF 就是一种格局，然而其外部蕴含了其余格局。咱们会发现有很多文件夹，如下图
咱们来说说这些都是什么
glTFglTF-BinaryglTF-DracoglTF-Embedded
glTFglTF 是默认格局。Duck.gltf 是一个 JSON 文件。蕴含了各种信息，蕴含相机、光照、场景、材质等，但没有几何体或纹理贴图。Duck0.bin 是一个二进制文件。通常蕴含了几何体和UV贴图坐标、法线坐标等。DuckCM.png 是鸭子的纹理贴图。当咱们载入 Duck.gltf 时，它会主动载入其余两个文件。glTF-Binary蕴含了所有上述的数据，是个二进制文件，不能间接关上。这个文件格式会更轻量化一些，只有一个文件，也易于载入。但不太不便批改外部的数据。例如你想批改纹理贴图，换一张更压缩的贴图时，就会比拟麻烦，因为这些数据都是被汇合在了一起，同一个二进制文件中。glTF-Draco有点像说的第一个格局，不过应用了 Draco algorithm 来压缩几何体的数据。如果你比照 .bin 文件的大小，你就会发现这个会更小一点。glTF-Embedded这个格局有点像 glTF-Binary 因为也是只有一个文件。但这个文件是一个 JSON 因而你能够在编辑器里关上。抉择适合的模型格局依据不同场景做出不同的抉择才是最优计划。如果你想批改 textures 或导出的光线坐标，最好抉择第一个默认的 glTF。它还具备别离加载不同文件的劣势，从而进步了加载速度。如果想要每个模型一个文件，并且不关怀模型内的素材批改，那么二进制 glTF-Binary 更适宜。在这两种状况下，您都必须决定是否要应用 Draco 压缩，但咱们稍后会介绍这部分。导入模型的实际筹备咱们筹备一个空白的立体、环境光和平行光。初始代码如下：import * as THREE from 'three'import './style.css'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'import * as dat from 'lil-gui'import stats from '../common/stats'import { listenResize } from '../common/utils'
...