Added mouse move (drag and drop style) and corrected cube style
This commit is contained in:
parent
e297123be7
commit
dce45d8257
|
@ -19,7 +19,7 @@ var Cube = function(size, style) {
|
|||
if (typeof style === 'undefined') style = {};
|
||||
|
||||
this.geometry = new THREE.BoxGeometry(size, size, size);
|
||||
this.geometry.computeVertexNormals();
|
||||
// this.geometry.computeVertexNormals();
|
||||
|
||||
this.material = new THREE.MeshLambertMaterial(style);
|
||||
|
||||
|
|
|
@ -1,6 +1,3 @@
|
|||
// Initialization
|
||||
|
||||
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var PointerCamera = function() {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
@ -11,6 +8,11 @@ var PointerCamera = function() {
|
|||
|
||||
this.keyboard = 'undefined';
|
||||
|
||||
this.dragging = false;
|
||||
|
||||
this.mouse = {x: 0, y: 0};
|
||||
this.move = {x: 0, y: 0};
|
||||
|
||||
|
||||
// Stuff for rendering
|
||||
this.position = new THREE.Vector3();
|
||||
|
@ -32,9 +34,15 @@ var PointerCamera = function() {
|
|||
var self = this;
|
||||
var onKeyDown = function(event) {self.onKeyDown(event);};
|
||||
var onKeyUp = function(event) {self.onKeyUp(event);};
|
||||
var onMouseDown = function(event) {self.onMouseDown(event); };
|
||||
var onMouseMove = function(event) {self.onMouseMove(event); };
|
||||
var onMouseUp = function(event) {self.onMouseUp(event); };
|
||||
|
||||
document.addEventListener('keydown', onKeyDown, false);
|
||||
document.addEventListener('keyup', onKeyUp, false);
|
||||
document.addEventListener('mousedown', onMouseDown, false);
|
||||
document.addEventListener('mousemove', onMouseMove, false);
|
||||
document.addEventListener('mouseup', onMouseUp, false);
|
||||
}
|
||||
PointerCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
PointerCamera.prototype.constructor = PointerCamera;
|
||||
|
@ -47,6 +55,14 @@ PointerCamera.prototype.update = function() {
|
|||
if (this.increaseTheta) this.theta += this.sensitivity;
|
||||
if (this.decreaseTheta) this.theta -= this.sensitivity;
|
||||
|
||||
if (this.dragging) {
|
||||
this.theta += this.move.x;
|
||||
this.phi -= this.move.y;
|
||||
|
||||
this.move.x = 0;
|
||||
this.move.y = 0;
|
||||
}
|
||||
|
||||
// Clamp phi
|
||||
this.phi = Math.min(Math.max(-(Math.PI/2-0.1),this.phi), Math.PI/2-0.1);
|
||||
|
||||
|
@ -115,6 +131,31 @@ PointerCamera.prototype.onKeyUp = function(event) {
|
|||
this.onKeyEvent(event, false);
|
||||
}
|
||||
|
||||
PointerCamera.prototype.onMouseDown = function(event) {
|
||||
this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
this.dragging = true;
|
||||
}
|
||||
|
||||
PointerCamera.prototype.onMouseMove = function(event) {
|
||||
if (this.dragging) {
|
||||
var mouse = {x: this.mouse.x, y: this.mouse.y};
|
||||
this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
this.move.x = this.mouse.x - mouse.x;
|
||||
this.move.y = this.mouse.y - mouse.y;
|
||||
|
||||
console.log(this.move.x, this.move.y);
|
||||
}
|
||||
}
|
||||
|
||||
PointerCamera.prototype.onMouseUp = function(event) {
|
||||
this.onMouseMove(event);
|
||||
this.dragging = false;
|
||||
}
|
||||
|
||||
// Static members
|
||||
PointerCamera.DISTANCE_X = 1000;
|
||||
PointerCamera.DISTANCE_Z = 300;
|
||||
|
|
Loading…
Reference in New Issue