用three.js渲染obj文件，什麼都沒有顯示出來？

我想使用three.js呈現一個.obj，我已經看過幾個例子，並想出如何做到這一點，但我的HTML代碼似乎不工作！我看到的只是一個黑屏。我附上了下面的代碼，我做錯了什麼？我是一個總noob在這個，所以任何幫助，將不勝感激。謝謝！用three.js渲染obj文件，什麼都沒有顯示出來？

<body> 
    <div id="info"> 
    <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test 
    </div> 

    <script src="../build/three.min.js"></script> 
    <script src="js/loaders/OBJLoader.js"></script> 

    <script src="js/Detector.js"></script> 
    <script src="js/libs/stats.min.js"></script> 

    <script> 

     var container, stats; 

     var camera, scene, renderer; 

     var mouseX = 0, mouseY = 0; 

     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 


     init(); 
     animate(); 


     function init() { 

      container = document.createElement('div'); 
      document.body.appendChild(container); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.z = 100; 

      // scene 

      scene = new THREE.Scene(); 

      var ambient = new THREE.AmbientLight(0x101030); 
      scene.add(ambient); 

      var directionalLight = new THREE.DirectionalLight(0xffeedd); 
      directionalLight.position.set(0, 0, 1).normalize(); 
      scene.add(directionalLight); 


      // model 

      var loader = new THREE.OBJLoader(); 
      loader.load("/obj/smiley.obj", function (object) { 
      scene.add(object); 
      }); 

      // 

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

      document.addEventListener('mousemove', onDocumentMouseMove, false); 

      // 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      windowHalfX = window.innerWidth/2; 
      windowHalfY = window.innerHeight/2; 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function onDocumentMouseMove(event) { 

      mouseX = (event.clientX - windowHalfX)/2; 
      mouseY = (event.clientY - windowHalfY)/2; 

     } 

     // 

     function animate() { 

      requestAnimationFrame(animate); 
      render(); 

     } 

     function render() { 

      camera.position.x += (mouseX - camera.position.x) * .05; 
      camera.position.y += (- mouseY - camera.position.y) * .05; 

      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 

     } 

    </script> 

</body>

來源

2013-05-29 ayush

你可以在某處發佈smiley.obj嗎？ – gaitat

你需要使用一個事件監聽：

var loader = new THREE.OBJLoader(); 
loader.addEventListener('load', function (event) { 

    scene.add(event.content); 

}); 
loader.load("/obj/smiley.obj');

來源

2013-05-29 15:40:15 gaitat

我做了這個改變，但仍然沒有。只是一個空白的屏幕1 – ayush

所以，現在你可以發佈的對象？也許有一個問題。 – gaitat

https://www.dropbox.com/s/hu3ca3pfut7szoj/smiley.obj這是對象！它似乎在p3d.in上工作。 http://p3d.in/rfATm – ayush

貴obj文件帶有附加.mtl文件？它們必須放在同一個文件夾中，否則OBJLoader將不會加載任何東西。

來源

2013-08-30 11:10:26 mmmmmm

用three.js渲染obj文件，什麼都沒有顯示出來？

回答

相關問題