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）好运;）