THREE.js加载GLB模型报错：TypeError: Cannot set properties of null

问题情况 #

加载Minecraft草方块GLB模型时触发报错：

TypeError: Cannot set properties of null (setting 'encoding')
错误出在GLTFLoader第2893行的texture.encoding = encoding;代码
同时控制台提示：THREE.GLTFLoader: Couldn't load texture blob:null/23946df4-f704-42bc-a59d-bd78afa6a4fc

你误以为没用到纹理，但实际上模型文件内包含纹理引用，只是纹理加载失败导致texture对象为null，进而触发了赋值错误。

你使用的加载代码 #

const loader = new THREE.GLTFLoader();
loader.load(
        'https://cdn.glitch.global/c7ffc3e9-df32-4837-b046-23be12a0896a/minecraft_grass_block.glb?v=1664906819996',
        
        function ( gltf ) {

            scene.add( gltf.scene );

            gltf.animations; // Array<THREE.AnimationClip>
            var grass = gltf.scene; // THREE.Group
            gltf.scenes; // Array<THREE.Group>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset; // Object

            console.log(grass)

        },
        // 加载进度回调
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // 错误回调
        function ( error ) {
            console.log( error );

        }
    );

可行解决办法 #

• 检查模型完整性：GLB文件内的纹理引用失效，大概率是导出模型时未将纹理嵌入文件，或外部纹理路径错误。重新导出模型，确保纹理直接嵌入GLB文件，不依赖外部链接。
• 添加兜底处理逻辑：修改GLTFLoader的纹理加载部分，设置encoding前先判断texture是否为null，避免报错；或者使用Three.js的默认纯色纹理作为 fallback，当纹理加载失败时自动替换。
• 本地测试资源：当前使用的CDN链接可能存在跨域或资源失效问题，将模型下载到本地加载，排除网络因素影响。

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