tforgione
/
3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some cleaning, and lot of bugs corrected

This commit is contained in:
Thomas FORGIONE 2015-07-08 15:09:33 +02:00
parent 91e1d14e35
commit 6ef5a7c8fe
12 changed files with 352 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/Makefile
View File

@ -14,6 +14,7 @@ L3D:
--js l3d/src/math/Tools.js \
--js l3d/src/math/Hermite.js \
--js l3d/src/utils/List.js \
--js l3d/src/utils/ObjectClicker.js \
--js l3d/src/utils/CameraSelecter.js \
--js l3d/src/utils/Logger.js \
--js l3d/src/utils/Objects.js \

20
js/l3d/apps/prototype/Coin.js vendored
View File

@ -1,4 +1,6 @@
var Coin = function(x,y,z, callback) {
this.raycastable = true;
this.children = [];
this.ready = false;
this.got = false;
this.init(x,y,z);
@ -81,6 +83,24 @@ Coin.prototype.init = function(x,y,z) {
}
};
Coin.prototype.raycast = function(raycaster, intersects) {
if (this.mesh !== undefined) {
var intersectsThis = [];
this.mesh.raycast(raycaster, intersectsThis);
// Add closest object
if (intersectsThis[0] !== undefined) {
intersectsThis[0].object = this;
intersects.push(intersectsThis[0]);
}
}
};
Coin.prototype.addToScene = function(scene) {
scene.add(this.mesh);
};

136
js/l3d/apps/prototype/interactive/main.js vendored
View File

@ -32,7 +32,8 @@ var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
var bigmesh;
var raycaster;
var objects = [];
var cameras, cameraSelecter;
var clickableObjects = [];
var recommendations, objectClicker;
var spheres = new Array(mesh_number);
var visible = 0;
// stats;
@ -41,6 +42,7 @@ var camera1;
var loader;
var coins = [];
var previousTime;
var hoveredCamera = null;
window.onbeforeunload = function() {
@ -128,12 +130,20 @@ function init() {
startCanvas.render();
cameras = initMainScene(camera1, scene, coins);
// cameras = L3D.initPeach(camera1, scene, coins);
// cameras = L3D.initBobomb(camera1, scene, coins);
// cameras = L3D.initWhomp(camera1, scene, , coins);
// cameras = L3D.initMountain(camera1, scene, coins);
// cameras = L3D.initSponza(camera1, scene, coins);
recommendations = initMainScene(camera1, scene, coins, clickableObjects);
// recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
// recommendations = L3D.initBobomb(camera1, scene, coins, clickableObjects);
// recommendations = L3D.initWhomp(camera1, scene, , coins, clickableObjects);
// recommendations = L3D.initMountain(camera1, scene, coins, clickableObjects);
// recommendations = L3D.initSponza(camera1, scene, coins, clickableObjects);
// init clickable objects
var i;
for (i = 0; i < coins.length; i++)
clickableObjects.push(coins[i]);
for (i =0; i < recommendations.length; i++)
clickableObjects.push(recommendations[i]);
// Add listeners
initListeners();
@ -145,38 +155,100 @@ function init() {
function initListeners() {
window.addEventListener('resize', onWindowResize, false);
// Transmit click event to camera selecter
container.addEventListener('mousedown', function(event) {
if (event.which == 1)
cameraSelecter.click(event);
}, false
);
// Update camera selecter when mouse moved
container.addEventListener('mousemove', function(event) {
cameraSelecter.update(event);
});
// Escape key to exit fullscreen mode
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
// HTML Bootstrap buttons
buttonManager = new ButtonManager(camera1, cameras, previewer);
buttonManager = new ButtonManager(camera1, recommendations, previewer);
// Camera selecter for hover and clicking recommendations
cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
// Object clicker for hover and clicking recommendations
objectClicker = new L3D.ObjectClicker(renderer, camera1, clickableObjects,
function onHover(obj,x,y) {
// Check if the object is clickable
var ok = obj instanceof Coin || obj instanceof L3D.BaseRecommendation;
// Little graphic stuff so the user knows that it's clickable
container.style.cursor = ok ? "pointer" : "auto";
if (camera1.pointerLocked)
camera1.mousePointer.render(ok ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
// Set previewer for preview
previewer.setCamera(obj instanceof L3D.BaseRecommendation ? obj.camera : null)
previewer.setPosition(x,y);
// Manage the hover camera event
if (hoveredCamera !== obj) {
var event = new L3D.BD.Event.Hovered();
if (obj instanceof L3D.BaseRecommendation) {
// The newly hovered object is different and is a recommendation
event.arrow_id = recommendations.indexOf(obj);
event.start = true;
event.send();
hoveredCamera = obj
} else if (hoveredCamera instanceof L3D.BaseRecommendation) {
// The newly hovered object is not a recommendation,
// but the previous one is : we must log
// Unhovered
event.arrow_id = 0;
event.start = false;
event.send();
hoveredCamera = null;
}
}
},
function onClick(obj) {
var event;
// Do stuff for click
if (obj instanceof Coin) {
obj.get();
// Send event to DB
event = new L3D.BD.Event.CoinClicked();
event.coin_id = coins.indexOf(obj);
event.send();
} else if (obj instanceof L3D.BaseRecommendation) {
camera1.moveHermite(obj);
// Send event to DB
event = new L3D.BD.Event.ArrowClicked();
event.arrow_id = recommendations.indexOf(obj);
event.send();
}
// Update the button manager
buttonManager.updateElements();
},
container
);
}
function render() {
cameraSelecter.update();
objectClicker.update();
// Update recommendations (set raycastable if shown)
var transform = buttonManager.showArrows ? show : hide;
cameras.map(function(camera) {
if (camera instanceof Recommendation) {
transform(camera);
recommendations.map(function(reco) {
if (reco instanceof Recommendation) {
transform(reco);
camera.traverse(function(elt) {
reco.traverse(function(elt) {
elt.raycastable = buttonManager.showArrows;
});
}
@ -191,7 +263,7 @@ function render() {
previousTime = Date.now();
// Update the recommendations
cameras.map(function(cam) { cam.update(camera1);});
recommendations.map(function(reco) { reco.update(camera1);});
// Set current position of camera
camera1.look();
@ -206,13 +278,13 @@ function render() {
previewer.clear();
// Hide arrows in recommendation
cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); });
recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
// Update transparent elements
THREEx.Transparency.update(camera1);
// Render preview
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
previewer.render(container_size.width(), container_size.height());
}
function animate() {
@ -234,8 +306,8 @@ function onWindowResize() {
previewer.domElement.height = container_size.height();
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
recommendations.forEach(function(reco) {reco.camera.aspect = container_size.width() / container_size.height();});
recommendations.forEach(function(reco) {reco.camera.updateProjectionMatrix();});
render();
}

32
js/l3d/src/cameras/PointerCamera.js
View File

@ -146,20 +146,20 @@ L3D.PointerCamera = function() {
var onMouseUp = function(event) {if (event.which === 1) self.onMouseUp(event); };
var onMouseMove = function(event) {self.onMouseMove(event); };
document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);
document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);
document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); });
document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); });
document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); });
document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, false);
document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);});
listenerTarget.addEventListener('mousedown', function() {self.lockPointer();}, false);
listenerTarget.addEventListener('mousedown', onMouseDown, false);
listenerTarget.addEventListener('mousemove', onMouseMove, false);
listenerTarget.addEventListener('mouseup', onMouseUp, false);
listenerTarget.addEventListener('mouseout', onMouseUp, false);
listenerTarget.addEventListener('click', function() {self.lockPointer();});
listenerTarget.addEventListener('mousedown', onMouseDown);
listenerTarget.addEventListener('mousemove', onMouseMove);
listenerTarget.addEventListener('mouseup', onMouseUp);
listenerTarget.addEventListener('mouseout', onMouseUp);
/**
* Option to enable or disable the collisions
@ -228,7 +228,7 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
// The pointer is locked : adapt the state of the camera
this.pointerLocked = true;
this.mousePointer.render();
this.mousePointer.render(L3D.MousePointer.BLACK);
this.mouse.x = this.renderer.domElement.width/2;
this.mouse.y = this.renderer.domElement.height/2;
@ -241,9 +241,6 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
this.pointerLocked = false;
this.mousePointer.clear();
this.theta = this.previousTheta;
this.phi = this.previousPhi;
this.mouseMove.x = 0;
this.mouseMove.y = 0;
@ -263,6 +260,7 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() {
*/
L3D.PointerCamera.prototype.update = function(time) {
this.shouldLogCameraAngles = false;
if (this.moving) {
this.linearMotion(time);
} else if (this.movingHermite) {
@ -624,10 +622,6 @@ L3D.PointerCamera.prototype.onMouseMovePointer = function(e) {
if (this.isLocked()) {
// Backup theta and phi
this.previousTheta = this.theta;
this.previousPhi = this.phi;
this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0;

2
js/l3d/src/cameras/ReplayCamera.js
View File

@ -103,6 +103,8 @@ L3D.ReplayCamera.prototype.nextEvent = function() {
this.event = this.path[this.counter];
console.log(this.event.type);
if (this.event.type == 'camera') {
this.move(this.event);
} else if (this.event.type == 'coin') {

2
js/l3d/src/canvases/MousePointer.js
View File

@ -103,7 +103,7 @@ L3D.MousePointer.toColor = function(style) {
* Re-renders the canvas
* For performance reasons, the rendering is done only if the style changed.
* @param {Number} style the L3D.MousePointer style you want to render
* @param {Boolean} force force the re-rendering (even if the style did not change)
* @param {Boolean} [force=false] force the re-rendering (even if the style did not change)
*
*/
L3D.MousePointer.prototype.render = function(style, force) {

27
js/l3d/src/canvases/Previewer.js
View File

@ -54,6 +54,8 @@ L3D.Previewer = function(renderer, scene) {
* @description true if the rendering was done before
*/
this.drawnBefore = false;
this.mouse = {x: null, y: null};
};
/**
@ -68,15 +70,15 @@ L3D.Previewer = function(renderer, scene) {
* @param {Number} container_width width of the container
* @param {Number} container_height height of the container
*/
L3D.Previewer.prototype.render = function(prev, container_width, container_height) {
L3D.Previewer.prototype.render = function(container_width, container_height) {
var width, height, left, bottom;
if (prev.go) {
if (this.camera) {
width = Math.floor(container_width / 5);
height = Math.floor(container_height / 5);
if (!this.fixed) {
left = Math.floor(prev.x - width/2);
bottom = Math.floor(this.renderer.domElement.height - prev.y + height/5);
left = Math.floor(this.mouse.x - width/2);
bottom = Math.floor(this.renderer.domElement.height - this.mouse.y + height/5);
// Translate box if too high
if (bottom + height > this.renderer.domElement.height) {
@ -112,19 +114,19 @@ L3D.Previewer.prototype.render = function(prev, container_width, container_heigh
this.ctx.stroke();
// Do render in previsualization
prev.camera.look();
this.camera.look();
this.renderer.setScissor(left, bottom, width, height);
this.renderer.enableScissorTest(true);
this.renderer.setViewport(left, bottom, width, height);
this.renderer.render(this.scene, prev.camera.camera);
this.renderer.render(this.scene, this.camera);
this.update(true);
if (this.prevCamera !== prev.camera) {
if (this.prevCamera !== this.camera) {
this.clearNeeded = true;
}
this.prevCamera = prev.camera;
this.prevCamera = this.camera;
} else {
this.update(false);
}
@ -162,3 +164,12 @@ L3D.Previewer.prototype.update = function(arg) {
this.drawnBefore = this.drawn;
this.drawn = arg;
};
L3D.Previewer.prototype.setCamera = function(camera) {
this.camera = camera;
}
L3D.Previewer.prototype.setPosition = function(x, y) {
this.mouse.x = x;
this.mouse.y = y;
}

18
js/l3d/src/recommendations/BaseRecommendation.js
View File

@ -61,6 +61,21 @@ L3D.BaseRecommendation = function(arg1, arg2, arg3, arg4, position, target) {
L3D.BaseRecommendation.prototype = Object.create(THREE.Object3D.prototype);
L3D.BaseRecommendation.prototype.constructor = L3D.BaseRecommendation;
L3D.BaseRecommendation.prototype.raycast = function(raycaster, intersects) {
var intersectsThis = [];
this.object3D.traverse(function(elt) {elt.raycast(raycaster, intersectsThis);});
// Add closest object
if (intersectsThis[0] !== undefined) {
intersectsThis[0].object = this;
intersects.push(intersectsThis[0]);
}
}
/**
* Changes the color of the meshes like a HTML link
*/
@ -182,13 +197,14 @@ L3D.BaseRecommendation.prototype.update = function(mainCamera) {
}
// Update opacity
var self = this;
this.object3D.traverse(function(elt) {
if (elt instanceof THREE.Mesh) {
elt.material.transparent = new_value < 0.9;
elt.material.opacity = new_value;
if (new_value < 0.1)
elt.raycastable = elt.material.transparent = elt.visible = false;
self.raycastable = elt.raycastable = elt.material.transparent = elt.visible = false;
}
});

37
js/l3d/src/recommendations/ReverseRecommendation.js
View File

@ -163,3 +163,40 @@ L3D.ReverseRecommendation.prototype.regenerateArrow = function(mainCamera) {
this.arrow.geometry.normalsNeedUpdate = true;
};
L3D.BaseRecommendation.prototype.updateExtremity = function() {
var direction = this.camera.target.clone();
direction.sub(this.camera.position);
direction.normalize();
var left = L3D.Tools.cross(direction, this.up);
var other = L3D.Tools.cross(direction, left);
left.normalize();
other.normalize();
left = L3D.Tools.mul(left, this.size / 2 );
other = L3D.Tools.mul(other, this.size / 2);
var pyramidCenter = L3D.Tools.diff(this.camera.position, L3D.Tools.mul(direction,0.25));
this.mesh.geometry.vertices = [
L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left), other),
L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left), other),
L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left),
L3D.Tools.sum( L3D.Tools.sum( this.camera.position, left), other),
L3D.Tools.diff(L3D.Tools.sum( this.camera.position, other), left),
L3D.Tools.diff(L3D.Tools.diff(this.camera.position, left), other),
L3D.Tools.sum( L3D.Tools.diff(this.camera.position, other), left)
// L3D.Tools.diff(this.camera.position, direction)
];
var lambda = 0.6;
for (var i = 0; i < 4; i++)
this.mesh.geometry.vertices[i] = L3D.Tools.mul(L3D.Tools.diff(this.mesh.geometry.vertices[i], L3D.Tools.mul(pyramidCenter,lambda)), 1/(1-lambda));
this.mesh.geometry.computeFaceNormals();
this.mesh.geometry.normalsNeedUpdate = true;
this.mesh.geometry.verticesNeedUpdate = true;
};

16
js/l3d/src/recommendations/ViewportRecommendation.js
View File

@ -89,6 +89,20 @@ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target)
L3D.ViewportRecommendation.prototype = Object.create(L3D.BaseRecommendation.prototype);
L3D.ViewportRecommendation.prototype.constructor = L3D.ViewportRecommendation;
L3D.ViewportRecommendation.prototype.raycast = function(raycaster, intersects) {
var intersectsThis = [];
this.mesh.raycast(raycaster, intersectsThis);
if (intersectsThis[0] !== undefined) {
intersectsThis[0].object = this;
intersects.push(intersectsThis[0]);
}
};
L3D.ViewportRecommendation.prototype.check = function() {
this.mesh.material.color.setHex(0x663366);
};
@ -118,7 +132,7 @@ L3D.ViewportRecommendation.prototype.update = function(position) {
this.mesh.material.opacity = new_value;
if (new_value < 0.1)
this.mesh.material.transparent = this.mesh.visible = false;
this.raycastable = this.mesh.material.transparent = this.mesh.visible = false;
};
L3D.ViewportRecommendation.prototype.setSize = function(size) {

40
js/l3d/src/scenes/initScene.js
View File

@ -17,13 +17,15 @@ L3D.addLight = function(scene) {
scene.add(ambient_light);
};
L3D.initPeachCastle = function(scene, collidableObjects, recommendation) {
L3D.initPeachCastle = function(scene, collidableObjects, recommendation, clickable) {
var loader = new L3D.ProgressiveLoader(
'/static/data/castle/princess peaches castle (outside).obj',
scene,
null,
function(object) {
if (clickable !== undefined)
clickable.push(object);
object.raycastable = true;
if (object.material.name === 'Material.103_princess_peaches_cast') {
THREEx.Transparency.push(object);
@ -50,11 +52,11 @@ L3D.resetPeachElements = function() {
};
};
L3D.initPeach = function(recommendation, scene, coins) {
L3D.initPeach = function(recommendation, scene, coins, clickable) {
L3D.addLight(scene);
var collidableObjects = [];
L3D.initPeachCastle(scene, collidableObjects, recommendation);
L3D.initPeachCastle(scene, collidableObjects, recommendation, clickable);
recommendation.resetElements = L3D.resetPeachElements();
recommendation.collidableObjects = collidableObjects;
@ -159,13 +161,15 @@ L3D.createPeachRecommendations = function(width, height) {
return recos;
};
L3D.initBobombScene = function(scene, collidableObjects, recommendation) {
L3D.initBobombScene = function(scene, collidableObjects, recommendation, clickable) {
var loader = new L3D.ProgressiveLoader(
'/static/data/bobomb/bobomb battlefeild.obj',
scene,
null,
function(object) {
if (clickable !== undefined)
clickable.push(object);
object.raycastable = true;
if (object.material.name === 'Material.071_574B138E_c.bmp' ||
object.material.name === 'Material.070_41A41EE3_c.bmp') {
@ -273,11 +277,11 @@ L3D.createBobombRecommendations = function(width, height) {
};
L3D.initBobomb = function(recommendation, scene, coins) {
L3D.initBobomb = function(recommendation, scene, coins, clickable) {
L3D.addLight(scene);
var collidableObjects = [];
L3D.initBobombScene(scene, collidableObjects, recommendation);
L3D.initBobombScene(scene, collidableObjects, recommendation, clickable);
recommendation.resetElements = L3D.resetBobombElements();
recommendation.collidableObjects = collidableObjects;
@ -304,13 +308,15 @@ L3D.initBobomb = function(recommendation, scene, coins) {
return recommendations;
};
L3D.initWhompScene = function(scene, collidableObjects, recommendation) {
L3D.initWhompScene = function(scene, collidableObjects, recommendation, clickable) {
var loader = new L3D.ProgressiveLoader(
'/static/data/whomp/Whomps Fortress.obj',
scene,
null,
function(object) {
if (clickable !== undefined)
clickable.push(object);
object.raycastable = true;
if (object.material.name === 'Shape_088' ||
object.material.name === 'Shape_089') {
@ -445,11 +451,11 @@ L3D.resetWhompElements = function() {
};
};
L3D.initWhomp = function(recommendation, scene, coins) {
L3D.initWhomp = function(recommendation, scene, coins, clickable) {
L3D.addLight(scene);
var collidableObjects = [];
L3D.initWhompScene(scene, collidableObjects, recommendation);
L3D.initWhompScene(scene, collidableObjects, recommendation, clickable);
recommendation.resetElements = L3D.resetWhompElements();
recommendation.collidableObjects = collidableObjects;
@ -476,7 +482,7 @@ L3D.initWhomp = function(recommendation, scene, coins) {
return recommendations;
};
L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
L3D.initMountainScene = function(scene, collidableObjects, recommendation, clickable) {
var loader = new L3D.ProgressiveLoader(
'/static/data/mountain/coocoolmountain.obj',
@ -485,6 +491,8 @@ L3D.initMountainScene = function(scene, collidableObjects, recommendation) {
function(object) {
// object.rotation.x = -Math.PI/2;
// object.rotation.z = Math.PI/2;
if (clickable !== undefined)
clickable.push(object);
object.raycastable = true;
if (object.material.name === 'Material.070_13F025D5_c2.png' ||
object.material.name === 'Material.068_5972FC88_c.bmp' ||
@ -597,11 +605,11 @@ L3D.resetMountainElements = function() {
};
};
L3D.initMountain = function(recommendation, scene, coins) {
L3D.initMountain = function(recommendation, scene, coins, clickable) {
L3D.addLight(scene);
var collidableObjects = [];
L3D.initMountainScene(scene, collidableObjects, recommendation);
L3D.initMountainScene(scene, collidableObjects, recommendation, clickable);
recommendation.resetElements = L3D.resetMountainElements();
recommendation.collidableObjects = collidableObjects;
@ -627,13 +635,15 @@ L3D.initMountain = function(recommendation, scene, coins) {
return recommendations;
};
L3D.initSponzaScene = function(scene, collidableObjects, recommendation) {
L3D.initSponzaScene = function(scene, collidableObjects, recommendation, clickable) {
var loader = new L3D.ProgressiveLoader(
'/static/data/sponza/sponza.obj',
scene,
recommendation,
function(obj) {
if (clickable !== undefined)
clickable.push(obj);
if (obj.material.name === 'chain' ||
obj.material.name === 'leaf' ||
obj.material.name === 'Material__57') {
@ -711,12 +721,12 @@ L3D.resetSponzaElements = function() {
};
};
L3D.initSponza = function(recommendation, scene, coins) {
L3D.initSponza = function(recommendation, scene, coins, clickable) {
L3D.addLight(scene);
var collidableObjects = [];
L3D.initSponzaScene(scene, collidableObjects, recommendation);
L3D.initSponzaScene(scene, collidableObjects, recommendation, clickable);
recommendation.resetElements = L3D.resetSponzaElements();
recommendation.collidableObjects = collidableObjects;

98
js/l3d/src/utils/ObjectClicker.js Normal file
View File

@ -0,0 +1,98 @@
L3D.ObjectClicker = (function() {
function pointerCheck(camera) {
return (camera instanceof L3D.PointerCamera && camera.pointerLocked);
}
var ObjectClicker = function(renderer, camera, objects, onHover, onClick, domElement) {
this.renderer = renderer;
this.objects = objects;
this.onHover = onHover;
this.onClick = onClick;
this.camera = camera;
this.mouse = {x: null, y: null};
this.domElement = domElement || document;
this.hoveredElement = null;
this.raycaster = new THREE.Raycaster();
this.currentPointedObject = null;
this.previousPointedObject = null;
// Add event listeners
var self = this;
this.domElement.addEventListener('mousemove', function(event) { self.update(event); });
this.domElement.addEventListener('click', function(event) { self.click(event); });
};
ObjectClicker.prototype.getPointedObject = function() {
// Compute x and y for unprojection
var x = ( this.mouse.x / this.renderer.domElement.width ) * 2 - 1;
var y = - (this.mouse.y / this.renderer.domElement.height) * 2 + 1;
if (pointerCheck(this.camera)) {
x = 0;
y = 0;
}
var vector = new THREE.Vector3(x,y,0.5);
vector.unproject(this.camera);
// Set raycaster
this.raycaster.set(this.camera.position, vector.sub(this.camera.position).normalize());
// Compute intersections
var intersects = this.raycaster.intersectObjects(this.objects, false);
// Avoid non-raycastable objects
for (var i = 0; i < intersects.length && !intersects[i].object.raycastable; i++){};
// Objects are sorted by distance in intersects, the best is the first
return intersects[i] !== undefined ? intersects[i].object : undefined;
};
ObjectClicker.prototype.update = function(event) {
// Set mouse position
if (event !== undefined) {
this.mouse.x = event.offsetX || event.layerX;
this.mouse.y = event.offsetY || event.layerY;
}
// Update current pointed object
this.previousPointedObject = this.currentPointedObject;
this.currentPointedObject = this.getPointedObject();
// If those two objects are different, call onHover
if (this.previousPointedObject !== this.currentPointedObject) {
var p = pointerCheck(this.camera);
this.onHover(
this.currentPointedObject,
p ? this.renderer.domElement.width / 2 : this.mouse.x,
p ? this.renderer.domElement.height / 2 : this.mouse.y
);
}
};
ObjectClicker.prototype.click = function() {
this.onClick(this.currentPointedObject, this.mouse.x, this.mouse.y);
}
return ObjectClicker;
})();