three.js动态切换模型

// 引入three.js库
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 模型路径数组
const modelPaths = [
    'path/to/model1.glb',
    'path/to/model2.glb',
    // 更多模型路径...
];

let currentModelIndex = 0;
let currentModel;

// 加载模型的函数
function loadModel(path) {
    const loader = new GLTFLoader();
    return new Promise((resolve, reject) => {
        loader.load(path, (gltf) => resolve(gltf.scene), undefined, reject);
    });
}

// 初始化加载第一个模型
loadModel(modelPaths[currentModelIndex]).then((model) => {
    currentModel = model;
    scene.add(currentModel);
});

// 切换模型的函数
function switchModel(index) {
    if (index < 0 || index >= modelPaths.length) return;
    currentModelIndex = index;
    if (currentModel) scene.remove(currentModel);
    loadModel(modelPaths[currentModelIndex]).then((model) => {
        currentModel = model;
        scene.add(currentModel);
    });
}

// 示例：监听按钮点击事件来切换模型
document.getElementById('switchButton').addEventListener('click', () => {
    const nextIndex = (currentModelIndex + 1) % modelPaths.length;
    switchModel(nextIndex);
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    // 更新模型（如果有动画）
    if (currentModel) currentModel.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();