three.js : 카메라가 위치를 변경하지만 표시되지 않음

Question

카메라 위치. [x | y | z]가 마우스 위치에 따라 바뀌는 프로그램이 있습니다. 이것은이 콘솔 출력에 의해 확인 :

그러나, 카메라가보고되는 객체의 렌더링이 변경되지 않습니다.

https://dl.dropbox.com/u/2070405/stackoverflow2/index.html

어떻게 그런 행동을 디버깅 내가 가장 좋은 방법을 여기 볼 수 있듯이 그것은 여전히 ​​유효?

이 프로그램은 index.html을 구성

, JS/main.js, JS/myLibs/dragPanControls.js *, JS/require.js, JS/libs와/three.js를/구축/three.js를

이 main.js입니다 :

// CONFIGURE require.js BEFORE LOADING MODULES: 

requirejs.config({ 
    shim: { 
     'libs/three.js/build/three': { 
      deps: [], 
      exports: 'three' //'three' will not be accessible, but any values that three.js writes to the global object will become available to me if I import 'three'. 
      /*init: function() { 
       // if I want 'three' to actually refer to something, I can do so by returning whatever I want it to refer to, in this init function 
       console.log("init three. Is THREE available? ", THREE); 
       return this; 
      }*/ 
     } 
    } 
}); 


// NOW START LOADING MODULES: 

require(["myLibs/dragPanControls", "libs/three.js/build/three", "myLibs/testlib"], function(DPC, three, testlib) { 
    console.log("Function call called after all modules are loaded and accessible"); 


// HELLO WORLD EXAMPLE: 

    var camera, scene, renderer; 
    var geometry, material, mesh; 

    init(); 
    animate(); 

    function init() { 

     camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
     camera.position.z = 1000; 

     scene = new THREE.Scene(); 

     geometry = new THREE.CubeGeometry(200, 200, 200); 
     material = new THREE.MeshBasicMaterial({ 
      color: 0xff0000, 
      wireframe: true 
     }); 

     mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh); 

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

     document.body.appendChild(renderer.domElement); 

     console.log("DPC? ", DPC); 
     console.log("testlib.success? ", testlib.success); 
     //console.log("DragPanControls? ", DragPanControls); 
     console.log("DPC.DragPanControls? ", DPC.DragPanControls); 
     cameraControls = new DPC.DragPanControls(camera); 

    }; 

    function animate() { 

     // note: three.js includes requestAnimationFrame shim 
     requestAnimationFrame(animate); 

     //mesh.rotation.x += 0.01; 
     //mesh.rotation.y += 0.02; 

     cameraControls.update(); 

     console.log("camera.position.x: ", camera.position.x); 

     renderer.render(scene, camera); 

    }; 

}); 

이것은 JS/myLibs/dragPanControls.js :

/** @namespace */ 
define(["../libs/three.js/build/three"], 
    function() { 

     // Setup work: 

     var DragPanControls; 


     DragPanControls = function(object, domElement) 
     { 
      console.log("drapancontrols kan finde THREE? ", THREE); 

      this._object = object; 
      this._domElement= domElement || document; 

      // parameters that you can change after initialisation 
      this.target = new THREE.Vector3(0, 0, 0); 
      this.speedX = 0.03; 
      this.speedY = 0.03; 
      this.rangeX = -40; 
      this.rangeY = +40; 

      // private variables 
      this._mouseX = 0; 
      this._mouseY = 0; 

      var _this = this; 
      this._$onMouseMove = function(){ _this._onMouseMove.apply(_this, arguments); }; 
      this._$onTouchStart = function(){ _this._onTouchStart.apply(_this, arguments); }; 
      this._$onTouchMove = function(){ _this._onTouchMove.apply(_this, arguments); }; 

      this._domElement.addEventListener('mousemove', this._$onMouseMove, false); 
      this._domElement.addEventListener('touchstart', this._$onTouchStart,false); 
      this._domElement.addEventListener('touchmove', this._$onTouchMove, false); 
     } 

     DragPanControls.prototype.destroy = function() 
     { 
      this._domElement.removeEventListener('mousemove', this._$onMouseMove, false); 
      this._domElement.removeEventListener('touchstart', this._$onTouchStart,false); 
      this._domElement.removeEventListener('touchmove', this._$onTouchMove, false); 
     } 

     DragPanControls.prototype.update = function(event) 
     { 
      this._object.position.x += (this._mouseX * this.rangeX - this._object.position.x) * this.speedX; 
      this._object.position.y += (this._mouseY * this.rangeY - this._object.position.y) * this.speedY; 
      this._object.lookAt(this.target); 

      //console.log("this._mouseX: ", this._mouseX); 
      //console.log("this.rangeX: ", this.rangeX); 

      //console.log("this._object.position.x: ", this._object.position.x); 
      //console.log("this._object.position.y: ", this._object.position.y); 
     } 

     DragPanControls.prototype._onMouseMove = function(event) 
     { 
      this._mouseX = (event.clientX/window.innerWidth) - 0.5; 
      this._mouseY = (event.clientY/window.innerHeight) - 0.5; 
     } 

     DragPanControls.prototype._onTouchStart = function(event) 
     { 
      if(event.touches.length != 1) return; 

      // no preventDefault to get click event on ios 

      this._mouseX = (event.touches[ 0 ].pageX/window.innerWidth) - 0.5; 
      this._mouseY = (event.touches[ 0 ].pageY/window.innerHeight) - 0.5; 
     } 

     DragPanControls.prototype._onTouchMove = function(event) 
     { 
      if(event.touches.length != 1) return; 

      event.preventDefault(); 

      this._mouseX = (event.touches[ 0 ].pageX/window.innerWidth) - 0.5; 
      this._mouseY = (event.touches[ 0 ].pageY/window.innerHeight) - 0.5; 
     } 

     // Return module: 
     return { 
      DragPanControls: DragPanControls 
     }; 
    } 
); 

* 친절 jeromeetienne에서 lended

Answer 1

이전 버전의 라이브러리에서 작동하도록 설계된 그물에서 복사 한 코드를 사용하고 있습니다.

대신 세 개의 .js examples/js/controls 디렉토리에서 사용할 수있는 여러 카메라 컨트롤러 중 하나를 사용하십시오. 예 :

controls = new THREE.OrbitControls(camera); 

이러한 컨트롤은 r.52부터 라이브러리에 포함되어 있지 않으므로 명시 적으로 소스를 포함해야합니다. http://jsfiddle.net/WV49w/3/