ThreeJS加载GLTF模型后对象消失问题求助

核心原因 #

这是异步加载的时序问题，和作用域无关。GLTFLoader.load()是异步方法：调用该方法后，JavaScript引擎会继续执行后续代码，不会等待模型下载、解析完成；只有当模型加载完成后，传入的成功回调函数才会被触发，此时模型才会被添加到场景中。

你标记的“异常位置”代码会在loader.load()调用后立即执行，这时模型还没加载完成，自然无法通过getObjectByName()找到目标对象。

解决方案 #

方案1：将模型操作逻辑放在加载回调内 #

所有需要访问模型的代码，要么直接写在成功回调里，要么封装成函数在回调中调用，确保逻辑执行时模型已经存在于场景中：

loader.load(MODEL_PATH, 
    function (gltf) 
    {
        mesh = gltf.scene.children[0];
        scene.add(mesh);
        
        // 模型初始化
        mesh.rotation.y = Math.PI/-4;
        mesh.scale.set(4,4,4);
        mesh.position.x = -10;
    
        // 调用后续操作函数
        updateModelMaterial();
    }, 
    undefined, 
    function (error) 
    {
        document.getElementById("pagefooter").innerText = error;
    }
);

function updateModelMaterial() {
    const targetObject = scene.getObjectByName("object_name");
    if (targetObject) {
        targetObject.material = new THREE.MeshPhysicalMaterial(
            _colorFrameColors[1].material
        );
    } else {
        document.getElementById("pagefooter").innerText = "目标对象未找到";    
    }
}

方案2：用async/await封装异步加载 #

把GLTF加载逻辑包装成Promise，通过async/await让代码按同步逻辑编写，避免回调嵌套：

// 封装加载函数为Promise
async function loadGLTF(path) {
    return new Promise((resolve, reject) => {
        loader.load(path, resolve, undefined, reject);
    });
}

// 改造LoadStyle为async函数
async function LoadStyle() {
    // ...省略原有初始化代码（渲染器、相机、灯光等）...
  
    loader = new GLTFLoader();
    
    try {
        // 等待模型加载完成
        const gltf = await loadGLTF(MODEL_PATH);
        mesh = gltf.scene.children[0];
        scene.add(mesh);
        
        // 模型初始化
        mesh.rotation.y = Math.PI/-4;
        mesh.scale.set(4,4,4);
        mesh.position.x = -10;
    
        // 此时可正常操作模型
        const targetObject = scene.getObjectByName("object_name");
        if (targetObject) {
            targetObject.material = new THREE.MeshPhysicalMaterial(
                _colorFrameColors[1].material
            );
        } else {
            document.getElementById("pagefooter").innerText = "目标对象未找到";    
        }
    } catch (error) {
        document.getElementById("pagefooter").innerText = error;
    }
}

方案3：监听场景的add事件 #

如果需要全局监听对象添加到场景的动作，可以给scene绑定add事件，当目标模型被添加时自动执行逻辑：

// 在场景初始化后添加事件监听
scene.addEventListener('add', (event) => {
    const addedObject = event.object;
    if (addedObject.name === "object_name") {
        addedObject.material = new THREE.MeshPhysicalMaterial(
            _colorFrameColors[1].material
        );
    }
});

总结 #

无论哪种方案，核心都是确保操作模型的代码在模型加载完成并添加到场景之后执行。根据你的代码结构和需求，选择最适合的实现方式即可。

内容的提问来源于stack exchange，提问作者mw42