I have a program where camera.position. [x | y | z] changes according to the position of the mouse. This is confirmed by the output of this console:
However, the rendering of the object the camera is looking at does not change. It stands still, as can be seen here:
https://dl.dropbox.com/u/2070405/stackoverflow2/index.html
What is the best approach to debugging this behavior?
The program consists of index.html, js / main.js, js / myLibs / dragPanControls.js *, js / require.js, js / libs / three.js / build / three.js
This is 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); }; });
This is 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 }; } );
* Courtesy of jeromeetienne