Three.js踩坑记录

使用React，想要从外部加载一个gltf格式的demo模型，发现了很多坑。

1. npm i three后，引入THREE的时候，需要使用

import * as THREE from "three";

来引入所有模块，因为three.js内暴露了多个模块，使用该语句可以将所有模块全部引入，然后使用THREE.Scene()之类即可。

2. 不能同时使用别的引入语句，否则控制台会报错，如：

import * as THREE from "three";
import { seededRandom } from "three/src/math/mathutils";
import { Scene, TetrahedronGeometry } from "three/src/three";

控制台会报“定义未使用”警告和“加载错误”：

应该将后面两句去除，即可正常编译。

3. 需要从外部导入的模型存放地址应该设置为public内，否则会导致引入失败：
   

4. 注意引入gltf文件时，必须为gltf2.0版本的文件，最新的three.js内的GLTFLoader会提示只支持.gltf2.0版本文件。

5. 注意引入模块时的大小写问题：

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 正确
import { GLTFLoader } from "three/examples/jsm/loaders/gltfloader"; // 错误

下面的代码会报“Modules not found"错误：