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

我是three.js的新手，并且无法将collada对象加载到它。我无法让home.dae在浏览器中呈现。如何将collada对象加载到three.js？

我根据答案更新了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();

来源

2016-09-27 Jon

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

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

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

来源

2016-09-27 14:43:12

我试过了，它仍然没有渲染。 dae文件与html文件位于同一目录中。 – Jon

浮现在脑海中几件事情：

作为@Rasheduzzaman已经指出的那样，渲染功能被称为太早（当你调用render()，将scene.add(collada);呼叫不能发生使用他的答案了吧。
collada-loader的工作原理有点不同：文档不清楚，但返回的对象是所有可能在collada文件中的东西的集合，请参阅此处的列表：https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/ColladaLoader.js#L181-L204 （另外：使用browser-devtools的调试器来检查你在那里找到的数据）你可能想要做scene.add(collada.scene)或sim ILAR。
你没有为相机设置位置，所以它位于（0,0,0），这可能不是一个好主意，请尝试camera.position.set(0,1,4)或类似的东西。
您需要知道该期待什么：正在加载的模型的大小是多少？它放在哪里？确保将相机指向那里（可以使用camera.lookAt(object.position)）并相应地调整nearPlane和farPlane。

来源

2016-09-27 15:25:55

你的意思是像上面的第二个更新？ – Jon

我可以在浏览器开发人员工具下的网络选项卡中看到图像和dae文件，但该对象本身不在浏览器中呈现。 – Jon

好的，所以你的相机从（0,1,4）到（0,0,0）看，但也许对象只是比这更大，或者其他地方。尝试添加'THREE.OrbitControls（）'到你的场景并导航一下。（https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js），您也可以尝试使该控制台对象可以从控制台访问或在调试器中检查它（查找'geometry.boundingBox'和其他属性）。 –

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

回答

相关问题