引入模型的方法都大差不差的,这里以gltf模型为例。
import * as THREE from 'three';
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js"; // 根据需要自行选择模型加载器,glb/gltf使用GLTFLoader
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader.js"; // obj模型使用这个
// 1.创建场景
function createScene(){
const loader = new GLTFLoader();
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(5); // 坐标轴辅助线
const gridHelper = new THREE.GridHelper(1000) // 地面网格辅助线
// X轴红色,Y轴绿色,Z轴蓝色
scene.add(axesHelper);
scene.add(gridHelper);
const group = new THREE.Group();
const modelPaths = ["public/model/lada_largus/scene.gltf","public/model/lada_largus/scene.gltf","public/model/lada_largus/scene.gltf"]
modelPaths.forEach(function (path,index) {
loader.load(path, function(gltf) {
const model = gltf.scene;
// 设置不同的位置
switch (index) {
case 0:
model.position.set(0, 10, -30); // 第一个模型位置
break;
case 1:
model.position.set(0, 10, 0); // 第二个模型位置
break;
case 2:
model.position.set(0, 10, 30); // 第三个模型位置
break;
}
scene.add(model);
}, undefined, function(error) {
console.error(error);
});
})
group.add(scene)
// group.children[group.children.length].visible = false
return group;
}
export default createScene;
效果图: