From 6ef5a7c8fe8ae59c976bf35d2eacbb3175c7ea4f Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 8 Jul 2015 15:09:33 +0200 Subject: [PATCH] Some cleaning, and lot of bugs corrected --- js/Makefile | 1 + js/l3d/apps/prototype/Coin.js | 20 +++ js/l3d/apps/prototype/interactive/main.js | 136 +++++++++++++----- js/l3d/src/cameras/PointerCamera.js | 32 ++--- js/l3d/src/cameras/ReplayCamera.js | 2 + js/l3d/src/canvases/MousePointer.js | 2 +- js/l3d/src/canvases/Previewer.js | 27 ++-- .../src/recommendations/BaseRecommendation.js | 18 ++- .../recommendations/ReverseRecommendation.js | 37 +++++ .../recommendations/ViewportRecommendation.js | 16 ++- js/l3d/src/scenes/initScene.js | 40 ++++-- js/l3d/src/utils/ObjectClicker.js | 98 +++++++++++++ 12 files changed, 352 insertions(+), 77 deletions(-) create mode 100644 js/l3d/src/utils/ObjectClicker.js diff --git a/js/Makefile b/js/Makefile index 62bda74..f4cd31c 100644 --- a/js/Makefile +++ b/js/Makefile @@ -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 \ diff --git a/js/l3d/apps/prototype/Coin.js b/js/l3d/apps/prototype/Coin.js index 7e89912..1405600 100644 --- a/js/l3d/apps/prototype/Coin.js +++ b/js/l3d/apps/prototype/Coin.js @@ -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); }; diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js index 6682c75..00efa09 100644 --- a/js/l3d/apps/prototype/interactive/main.js +++ b/js/l3d/apps/prototype/interactive/main.js @@ -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(); } diff --git a/js/l3d/src/cameras/PointerCamera.js b/js/l3d/src/cameras/PointerCamera.js index d6b194d..b940e00 100644 --- a/js/l3d/src/cameras/PointerCamera.js +++ b/js/l3d/src/cameras/PointerCamera.js @@ -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; diff --git a/js/l3d/src/cameras/ReplayCamera.js b/js/l3d/src/cameras/ReplayCamera.js index a364621..6d98675 100644 --- a/js/l3d/src/cameras/ReplayCamera.js +++ b/js/l3d/src/cameras/ReplayCamera.js @@ -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') { diff --git a/js/l3d/src/canvases/MousePointer.js b/js/l3d/src/canvases/MousePointer.js index 148bdf9..913db98 100644 --- a/js/l3d/src/canvases/MousePointer.js +++ b/js/l3d/src/canvases/MousePointer.js @@ -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) { diff --git a/js/l3d/src/canvases/Previewer.js b/js/l3d/src/canvases/Previewer.js index 3bbba88..f2eb077 100644 --- a/js/l3d/src/canvases/Previewer.js +++ b/js/l3d/src/canvases/Previewer.js @@ -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; +} diff --git a/js/l3d/src/recommendations/BaseRecommendation.js b/js/l3d/src/recommendations/BaseRecommendation.js index 33fd747..35deefd 100644 --- a/js/l3d/src/recommendations/BaseRecommendation.js +++ b/js/l3d/src/recommendations/BaseRecommendation.js @@ -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; } }); diff --git a/js/l3d/src/recommendations/ReverseRecommendation.js b/js/l3d/src/recommendations/ReverseRecommendation.js index 87cd882..8e01ef4 100644 --- a/js/l3d/src/recommendations/ReverseRecommendation.js +++ b/js/l3d/src/recommendations/ReverseRecommendation.js @@ -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; +}; diff --git a/js/l3d/src/recommendations/ViewportRecommendation.js b/js/l3d/src/recommendations/ViewportRecommendation.js index 725c04c..7e299a0 100644 --- a/js/l3d/src/recommendations/ViewportRecommendation.js +++ b/js/l3d/src/recommendations/ViewportRecommendation.js @@ -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) { diff --git a/js/l3d/src/scenes/initScene.js b/js/l3d/src/scenes/initScene.js index 83c017f..6b3141b 100644 --- a/js/l3d/src/scenes/initScene.js +++ b/js/l3d/src/scenes/initScene.js @@ -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; diff --git a/js/l3d/src/utils/ObjectClicker.js b/js/l3d/src/utils/ObjectClicker.js new file mode 100644 index 0000000..91ad1e9 --- /dev/null +++ b/js/l3d/src/utils/ObjectClicker.js @@ -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; + +})();