THREE.js無法旋轉對象

Question

我正在嘗試旋轉沿y軸上傳的對象。對象上傳和材料被應用。我使用相同的代碼來旋轉球體，但它似乎不適用於自定義對象。如果我取消註釋應該處理實際旋轉的底部線條，則圖像不再顯示爲出現錯誤。 的Web GL測試 體{ FONT-FAMILY：等寬; background-color：＃f0f0f0; margin：0px; 溢出：隱藏; }

<script src="js/three.min.js"></script> 
      <script src="js/OBJLoader.js"></script> 
    <script type="text/javascript"> 

     var container, stats; 

     var camera, scene, renderer; 

     var targetRotation = 0; 
     var targetRotationOnMouseDown = 0; 

     var mouseX = 0; 
     var mouseXOnMouseDown = 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(70, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.y = 200; 
      camera.position.z = 150; 

      scene = new THREE.Scene(); 

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

          var object = event.content; 
          var geom = new THREE.SphereGeometry(100, 50, 50); 
          object.traverse(function (child) { 

           if (child instanceof THREE.Mesh) { 

            child.material.map = texture; 

           } 

           }); 

           object.position.y = 150; 
           scene.add(object); 
           }); 
           loader.load('Head.obj'); 


          var texture = THREE.ImageUtils.loadTexture('face.gif'); 
          texture.needsUpdate = true; 

      renderer = new THREE.CanvasRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

          container.appendChild(renderer.domElement); 

      document.addEventListener('mousedown', onDocumentMouseDown, false); 
      document.addEventListener('touchstart', onDocumentTouchStart, false); 
      document.addEventListener('touchmove', onDocumentTouchMove, 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 onDocumentMouseDown(event) { 

      event.preventDefault(); 

      document.addEventListener('mousemove', onDocumentMouseMove, false); 
      document.addEventListener('mouseup', onDocumentMouseUp, false); 
      document.addEventListener('mouseout', onDocumentMouseOut, false); 

      mouseXOnMouseDown = event.clientX - windowHalfX; 
      targetRotationOnMouseDown = targetRotation; 

     } 

     function onDocumentMouseMove(event) { 

      mouseX = event.clientX - windowHalfX; 

      targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 

     } 

     function onDocumentMouseUp(event) { 

      document.removeEventListener('mousemove', onDocumentMouseMove, false); 
      document.removeEventListener('mouseup', onDocumentMouseUp, false); 
      document.removeEventListener('mouseout', onDocumentMouseOut, false); 

     } 

     function onDocumentMouseOut(event) { 

      document.removeEventListener('mousemove', onDocumentMouseMove, false); 
      document.removeEventListener('mouseup', onDocumentMouseUp, false); 
      document.removeEventListener('mouseout', onDocumentMouseOut, false); 

     } 

     function onDocumentTouchStart(event) { 

      if (event.touches.length === 1) { 

       event.preventDefault(); 

       mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; 
       targetRotationOnMouseDown = targetRotation; 

      } 

     } 

     function onDocumentTouchMove(event) { 

      if (event.touches.length === 1) { 

       event.preventDefault(); 

       mouseX = event.touches[ 0 ].pageX - windowHalfX; 
       targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05; 

      } 

     } 

     // 

     function animate() { 

      requestAnimationFrame(animate); 

      render(); 

     } 

     function render() { 

      //object.rotation.y += (targetRotation - object.rotation.y) * 0.05; 
      renderer.render(scene, camera); 

     } 

    </script> 

</body> 

Answer 1

的問題是，您使用animate函數變量 「對象」，它被初始化之前。此外，變量「對象」的範圍僅限於加載器的回調函數。

您可能想要閱讀有關JavaScript變量作用域的內容。 http://www.mredkj.com/tutorials/reference_js_intro_ex.html

要解決您的問題，您可能需要更改一些內容。

1）使變量 「對象」 全球

// Make object a global variable 
var camera, scene, renderer, object; 

2）不要調用動畫功能之前初始化對象

init(); 
//animate(); 

3）不要使用 「無功」 內回調裝載機

var loader = new THREE.OBJLoader(); 
loader.addEventListener('load', function (event) {  
    //var object = event.content; 
    object = event.content; 
    var geom = new THREE.SphereGeometry(100, 50, 50); 

4）呼叫「動畫」，「對象」之後的功能被初始化

object.position.y = 150; 
scene.add(object); 
// Call animate after object is loaded and added to the scene 
animate(); 

5）好運;）