如何将 collada 对象加载到 three.js？

Posted 2023-03-23

【中文标题】如何将 collada 对象加载到 three.js？

【英文标题】：How do I load collada object to three.js?

【发布时间】：2017-02-05 04:37:10

【问题描述】：

我是 three.js 的新手，在向其加载 collada 对象时遇到问题。我无法让 home.dae 在浏览器中呈现。

我根据答案更新了 SECOND UPDATE 下的代码。

        // INITIAL

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var loader = new THREE.ColladaLoader();
        loader.load('home.dae', function(collada)
            scene.add(collada);
        );

        function render() 
          renderer.render(scene, camera);
        

        render();


        // SECOND UPDATE

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0,1,4);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var loader = new THREE.ColladaLoader();

        loader.load('home.dae', function(collada)
            scene.add(collada.scene);
        );

        function render() 
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        

        render();

【参考方案1】：

您的渲染函数只被调用一次。试试这个 -

function render() 
    requestAnimationFrame(render);
    renderer.render(scene, camera);

还要检查你的文件路径是否有效。

【讨论】：

我试过了，还是不渲染。 dae 文件与 html 文件位于同一目录中。

【参考方案2】：

想到的几件事：

正如@Rasheduzzaman 已经指出的那样，渲染函数被调用得太早（当你调用render() 时，scene.add(collada); 调用不可能发生。改用他的答案。 collada-loader 的工作方式有点不同：文档对此并不清楚，但返回的对象是 collada 文件中可能存在的所有内容的集合，请参见此处的列表：@ 987654321@（也：使用浏览器开发工具中的调试器来检查您在那里找到的数据）。你可能会想要scene.add(collada.scene) 或类似的。 您没有为相机设置位置，因此它位于 (0,0,0)，这可能不是一个好主意，请尝试 camera.position.set(0,1,4) 或类似的东西。 您需要知道会发生什么：您正在加载的模型的大小是多少？它放在哪里？确保将您的相机指向那里（可以使用 camera.lookAt(object.position)）并相应地调整 nearPlane 和 farPlane。

【讨论】：

在浏览器的开发者工具下的网络选项卡中可以看到图片和dae文件，但是对象本身并没有在浏览器中呈现。

好的，所以你的相机从 (0,1,4) 到 (0,0,0) 看，但物体可能比这大得多，或者其他地方。尝试将THREE.OrbitControls() 添加到您的场景中并进行一些导航。 (github.com/mrdoob/three.js/blob/master/examples/js/controls/…)，您还可以尝试使该 collada-object 可从控制台访问或在调试器中检查它（查找 geometry.boundingBox 和其他属性）。

您的第二次更新也缺少render-call，这是刚刚遗漏了吗？