Three.js中为GLTF模型Mesh应用MeshStandardMaterial触发visible相关TypeError

云上老周

2026-9-26

错误成因与解决方案

错误成因

作用域或初始化时序问题：代码执行时this.material未完成初始化或this指向错误，导致赋值给child.material的是undefined，Three.js内部访问材质的visible属性时触发报错。
多材质兼容问题：从GLTF导入的网格可能使用多材质配置，原有child.material为数组类型，直接赋值单个材质对象时部分Three.js版本会出现兼容异常。
资源加载未完成：材质依赖的this.texture未完成异步加载，导致材质实例初始化不完整。

可行解决方案

排查材质有效性与作用域问题
提前将材质存储为局部变量避免this指向异常，赋值前确认材质是有效实例：

// 提前存为局部变量，避免this指向问题
const customMaterial = new THREE.MeshStandardMaterial({
    map: this.texture,
})
console.log(customMaterial) // 确认输出为有效MeshStandardMaterial实例

this.cubePost2Model = this.resources.items.cubePost2.scene
this.cubePost2Model.traverse((child) => {
    if(child instanceof THREE.Mesh) {
        child.castShadow = true
        if (customMaterial) {
            child.material = customMaterial
        }
    }
})
this.scene.add(this.cubePost2Model)

兼容多材质网格场景
判断原有材质是否为数组，对多材质网格统一替换所有材质槽位：

this.cubePost2Model.traverse((child) => {
    if(child instanceof THREE.Mesh) {
        child.castShadow = true
        if (Array.isArray(child.material)) {
            // 多材质情况替换所有槽位的材质
            child.material = child.material.map(() => customMaterial)
        } else {
            child.material = customMaterial
        }
        // 强制标记材质需要更新，避免渲染缓存问题
        child.material.needsUpdate = true
    }
})