Three.js，OBJLoader - > Uncaught ReferenceError：對象未定義

Question

我的代碼如下。 當我取消 object.rotation.y += (targetRotation - object.rotation.y) * 0.05;從render()或animate()函數我得到"Uncaught ReferenceError: object is not defined "錯誤。我試過任何東西，我的animate()函數甚至在加載器回調，我試着改變three.js舊版本（目前使用R59），希望變種object = event.content;可能會解決它，沒有影響。

我想添加「點擊並移動鼠標旋轉模型」的可用性，當它的立方體時，我沒有問題。

但它只是不會用我的* obj。

幫助？ =）

 var scene, camera, renderer, loader, ambient, directionalLight; 

     var windowHalfX = 300; 
     var windowHalfY = 145; 

     var targetRotation = 0; 
     var targetRotationOnMouseDown = 0; 

     var mouseX = 0; 
     var mouseXOnMouseDown = 0; 

     init(); 

     function init() { 
      container = document.createElement('div'); 
      document.getElementById("3dbox").appendChild(container); 

      scene = new THREE.Scene(); 
      camera = new THREE.PerspectiveCamera(45, 600/290, 0.1, 1000); 
      //camera.position.set(-15, 10, 15); 
      renderer = new THREE.WebGLRenderer(); 

      renderer.setSize(600, 290); 
      container.appendChild(renderer.domElement); 

      // MODEL 
      var loader = new THREE.OBJMTLLoader(); 
      loader.addEventListener('load', function (event) { 
       var object = event.content; 
       scene.add(object); 
       animate(); 
      }); 
      loader.load('<?php bloginfo('template_directory'); ?>/obj/female02.obj', '<?php bloginfo('template_directory'); ?>/obj/female02.mtl'); 

      camera.position.z = 100; 
      camera.position.y = 10; 

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

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

      document.addEventListener('mousedown', onDocumentMouseDown, false); 
      document.addEventListener('touchstart', onDocumentTouchStart, false); 
      document.addEventListener('touchmove', onDocumentTouchMove, false); 
     } 

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

     function animate() { 
      //object.rotation.y += (targetRotation - object.rotation.y) * 0.05; 
      requestAnimationFrame(animate); 
      render(); 
     } 

     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; 

      } 

     } 

Answer 1

這是因爲「object」是你的回調函數中的局部變量。 Decare它全球：

var object; 

然後在你的回調，

object = event.content; 

three.js所r.59