マウスの位置に応じてcamera.position。[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 / build/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から親切に貸し出しました