无法加载 GLTF 对象

Posted 2023-03-23

【中文标题】无法加载 GLTF 对象

【英文标题】：Unable to load GLTF object

【发布时间】：2021-12-21 09:36:57

【问题描述】：

我正在尝试使用 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();

【问题讨论】：

你介意在这个帖子中分享 glTF 资源吗？

对不起，是这个：sketchfab.com/3d-models/…

模型在 three.js 编辑器中加载没有问题。请验证浏览器控制台中是否没有出现运行时错误。还可以考虑将您的整个代码作为实时示例（例如代码和框）或作为 GitHub 存储库共享。

编辑器中似乎没有为我加载。是不是像点击导入加载scene.gltf一样简单？

您必须拖放所有资产组件（.gltf + .bin + 纹理）。

【参考方案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。

【参考方案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 是否使其可见。

【讨论】：

谢谢，我这样做并注意到错误“THREE.GLTFLoader 不是构造函数”。我想知道这是否与我按照此处的建议更改“./three.module.js”的路径有关：youtube.com/watch?v=F4q2cqj_Tdc&ab_channel=MikeSmith

哦，问题是你的脚本找不到'GLTFLoader'，这是一个默认不包含在three.js中的类，需要单独包含，你也可以引用它CDN。它不是复制和粘贴本地脚本，而是通过 cdn 获取脚本，只需放入您的 html <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script> 而不是 <script src="GLTFLoader.js">