拾光°
要导入模型,可以使用 Three.js 的 OBJLoader 或 GLTFLoader。
使用 OBJLoader 导入 OBJ 模型
使用 OBJLoader 导入 OBJ 模型需要先引入 OBJLoader.js 文件。可以通过 npm 或直接下载 Three.js 的源代码获取这个文件。
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
// 创建 OBJLoader 对象
const loader = new OBJLoader();
// 加载模型
loader.load(
'path/to/model.obj',
// 加载完成后的回调函数
function(object) {
scene.add(object);
}
);
在这个例子中,我们首先引入 THREE 和 OBJLoader,然后创建了一个 OBJLoader 对象。接着使用 loader.load() 方法加载模型文件,并传入一个回调函数,这个回调函数将在模型加载完成后被调用。在这个回调函数中,我们将加载的模型添加到场景中。
使用 GLTFLoader 导入 GLTF 模型
使用 GLTFLoader 导入 GLTF 模型需要先引入 GLTFLoader.js 文件。可以通过 npm 或直接下载 Three.js 的源代码获取这个文件。
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 创建 GLTFLoader 对象
const loader = new GLTFLoader();
// 加载模型
loader.load(
'path/to/model.gltf',
// 加载完成后的回调函数
function(gltf) {
scene.add(gltf.scene);
}
);
在这个例子中,我们首先引入 THREE 和 GLTFLoader,然后创建了一个 GLTFLoader 对象。接着使用 loader.load() 方法加载模型文件,并传入一个回调函数,这个回调函数将在模型加载完成后被调用。在这个回调函数中,我们将加载的模型添加到场景中。
无论是 OBJ 模型还是 GLTF 模型,加载完成后都可以像普通的 Three.js 对象一样添加到场景中。加载模型需要时间,因此建议使用异步加载模型的方式,避免界面卡顿。