无法加载 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 是否使其可见。