无法加载GLTF对象

Question

我正在尝试用three.js呈现一个GLTF模型，但一直无法做到。如果有人能指出我代码中的错误是什么，我会很高兴的。

        import {GLTFLoader} from "./GLTFLoader.js";

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth/window.innerHeight,
            .01,
            1000
        );
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var loader = new THREE.GLTFLoader();

        loader.load("scene.gltf",function(gltf){
            var obj;
            scene.add(gltf.scene);
        });
        var light = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 2);
        scene.add(light);
        camera.position.set(0,0,100);
        function animate(){
            requestAnimationFrame(animate);
            renderer.render(scene,camera);
        }
        animate();

Answer 1

首先，您可以从sketchfab下载免费的3d模型gltf文件，然后使用this website将其转换为glb格式。然后使用以下命令压缩文件：

npx gltf-pipeline -i scene.glb -o model.glb --draco.compressionLevel=10

通过使用：

npx gltfjsx model.glb

您将获得一个js文件。只需复制模型函数，您的工作就完成了。例如，您可以参考visit demo。

Answer 2

首先检查你的浏览器控制台(快捷方式通常是ctrl+shift+i)，如果那里有一个错误，路径可能是错误的，你也可以使用console.log(gltf)来查看对象是否真的加载到了你的"onload“函数中，如果它记录了undefined，那么可能有错误。

也可能是你的模型太大，没有渲染(它在你的相机渲染区域之外)，或者是你的相机在它里面，所有的对象面都指向外面(在某些材质中，向内的面默认情况下会被剔除，这称为背面剔除)。为了在你的网格中测试它，你可以在你的"onload“函数中添加：

gltf.scene.traverse(obj => {
  if (obj.type === "Mesh") {
    obj.doubleSided = true;
    // or maybe
    // obj.material.side = THREE.DoubleSide;
  }
})

这将迭代您的gltf文件中的所有对象，检查哪些是网格，并将它们标记为双面，以便向内和向外的面都将被渲染，背面不会被剔除。

还要检查是否将对象的比例缩小到0.1或0.01使其可见。