Three.js中动态更换3D模型纹理的教程

// 示例：创建一个带有纹理的材质
const textureLoader = new THREE.TextureLoader();
const wallTexture = textureLoader.load('path/to/wall_texture.jpg');
const material = new THREE.MeshStandardMaterial({
    map: wallTexture, // 将纹理赋值给map属性
    // 其他材质属性...
});
const mesh = new THREE.Mesh(geometry, material);

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

let loadedModel; // 用于存储加载的模型

const loader = new GLTFLoader();
loader.load(
    'path/to/your_model.glb',
    (gltf) => {
        loadedModel = gltf.scene;
        scene.add(loadedModel);

        // 示例：遍历模型并识别目标网格
        loadedModel.traverse((child) => {
            if (child.isMesh && child.name === 'WallMesh') { // 假设墙壁网格名为'WallMesh'
                // 找到了目标网格，可以存储起来或直接操作
                console.log('Found wall mesh:', child);
                // initialWallMesh = child; // 可以在这里保存引用
            }
        });
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    (error) => {
        console.error('An error happened', error);
    }
);

const textureLoader = new THREE.TextureLoader(); // 在应用初始化时创建一次

/**
 * 动态更换指定网格的纹理
 * @param {THREE.Mesh} targetMesh 需要更换纹理的网格对象
 * @param {string} textureUrl 新纹理的图片URL或Base64数据
 */
function changeMeshTexture(targetMesh, textureUrl) {
    if (!targetMesh || !targetMesh.material) {
        console.warn('Target mesh or its material is not defined.');
        return;
    }

    // 加载新纹理
    textureLoader.load(
        textureUrl,
        (newTexture) => {
            // 设置纹理的重复模式和偏移（如果需要）
            // newTexture.wrapS = THREE.RepeatWrapping;
            // newTexture.wrapT = THREE.RepeatWrapping;
            // newTexture.repeat.set(1, 1); // 根据需要调整重复次数

            // 将新纹理应用到材质的map属性
            targetMesh.material.map = newTexture;
            // 如果材质的其他属性（如颜色、法线贴图等）也需要更新，可以在这里设置
            // targetMesh.material.color.set(0xffffff); // 例如，重置颜色

            // 标记材质需要更新，Three.js才能重新编译着色器（对于某些材质属性更改是必需的）
            targetMesh.material.needsUpdate = true;

            console.log(`Texture changed for mesh: ${targetMesh.name} to ${textureUrl}`);
        },
        undefined, // onProgress回调
        (error) => {
            console.error(`Error loading texture from ${textureUrl}:`, error);
        }
    );
}

<select id="textureSelector">
    <option value="path/to/texture1.jpg">纹理1</option>
    <option value="path/to/texture2.jpg">纹理2</option>
    <option value="path/to/texture3.jpg">纹理3</option>
</select>

document.getElementById('textureSelector').addEventListener('change', (event) => {
    const selectedTextureUrl = event.target.value;
    // 假设您已经找到了名为 'WallMesh' 的目标网格并将其存储在 `wallMesh` 变量中
    if (wallMesh) {
        changeMeshTexture(wallMesh, selectedTextureUrl);
    } else {
        console.warn('Wall mesh not found. Please ensure the model is loaded and the mesh is identified.');
    }
});

// 这是一个占位符，实际应用中 wallMesh 需要在模型加载完成后被赋值
let wallMesh = null;
// ... 在模型加载的回调中：
// gltf.scene.traverse((child) => {
//     if (child.isMesh && child.name === 'WallMesh') {
//         wallMesh = child;
//     }
// });