Three.js加载.glb模型时纹理丢失问题求助

核心问题定位 #

报错GLTFLoader.js:2618 THREE.GLTFLoader: Couldn't load texture blob:...的主要原因是你手动禁用了浏览器原生的createImageBitmap API——代码中的window.createImageBitmap = undefined;会破坏Three.js解析纹理的能力，导致GLB模型中的纹理无法正常加载。

修复步骤 #

• 移除禁用API的代码：删除window.createImageBitmap = undefined;这一行，恢复浏览器处理图片的原生能力。
• 检查文件路径与文件名：确保'assets/3d/model/fielname.glb'的路径正确，且文件名拼写无误（注意fielname可能是filename的笔误）。
• 补充渲染循环：Three.js需要持续渲染场景才能显示动态内容，你当前的代码缺少渲染逻辑。
• 调整相机参数：你的相机视场角仅为10°，过小的视场角可能导致模型无法在画面中显示，建议调整视场角或相机位置。

完整可用示例代码 #

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
// 调整视场角为45°，更符合常规场景需求
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 0);
document.getElementById('myID').appendChild(renderer.domElement);

// 添加灯光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
// 添加环境光，提升整体光照效果
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

// 加载GLB模型
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load(
    'assets/3d/model/filename.glb', // 确保文件名正确
    function (gltf) {
        const model = gltf.scene;
        // 调整模型位置与缩放，确保在相机视野内
        model.position.set(0, 0, 0);
        model.scale.set(1, 1, 1);
        scene.add(model);

        // 自动调整相机位置，确保模型完整显示
        const box = new THREE.Box3().setFromObject(model);
        const center = box.getCenter(new THREE.Vector3());
        const size = box.getSize(new THREE.Vector3());
        const maxDim = Math.max(size.x, size.y, size.z);
        const fov = camera.fov * (Math.PI / 180);
        let cameraZ = Math.abs(maxDim / (2 * Math.tan(fov / 2)));
        
        camera.position.z = cameraZ;
        camera.lookAt(center);
    },
    function (xhr) {
        // 加载进度回调（可选）
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        // 加载错误回调
        console.error('模型加载失败:', error);
    }
);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    // 可添加模型旋转动画（可选）
    // scene.children[2].rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

额外注意事项 #

• 确保你的Three.js项目中正确引入了GLTFLoader，如果使用CDN，需要额外加载GLTFLoader脚本：

  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/loaders/GLTFLoader.js"></script>
  

• 若模型仍存在纹理问题，可以用glTF Validator本地工具检查GLB文件是否存在结构错误，确认纹理是否正确嵌入模型中。

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