Three.js, OBJLoader -> 잡히지 않는 ReferenceError : 객체가 정의되지 않았습니다.

Question

아래 코드를 참조하십시오. 주석 처리를 해제 할 때 object.rotation.y += (targetRotation - object.rotation.y) * 0.05;에서 render() 또는 animate() 기능을 사용하면 "Uncaught ReferenceError: object is not defined " 오류가 발생합니다.

나는 animate() 함수도 로더 콜백에있다. 이전 버전 (현재 r59를 사용하고있다)으로 바꾸려고 시도했는데, var 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

"개체"가 콜백 함수의 로컬 변수이기 때문입니다. 일

콜백에서 다음

var object; 

,

object = event.content; 

three.js를 r.59