Vue+Three.js 渲染模型glb/gltf

引入模型的方法都大差不差的，这里以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;

效果图：