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

Question

我是 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();

Answer 1

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

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

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

Answer 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。