使用React,想要从外部加载一个gltf格式的demo模型,发现了很多坑。
- npm i three后,引入THREE的时候,需要使用
import * as THREE from "three";
来引入所有模块,因为three.js内暴露了多个模块,使用该语句可以将所有模块全部引入,然后使用THREE.Scene()之类即可。
- 不能同时使用别的引入语句,否则控制台会报错,如:
import * as THREE from "three";
import { seededRandom } from "three/src/math/mathutils";
import { Scene, TetrahedronGeometry } from "three/src/three";
控制台会报“定义未使用”警告和“加载错误”:
应该将后面两句去除,即可正常编译。
-
需要从外部导入的模型存放地址应该设置为public内,否则会导致引入失败:
-
注意引入gltf文件时,必须为gltf2.0版本的文件,最新的three.js内的GLTFLoader会提示只支持.gltf2.0版本文件。
-
注意引入模块时的大小写问题:
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 正确
import { GLTFLoader } from "three/examples/jsm/loaders/gltfloader"; // 错误
下面的代码会报“Modules not found"错误: