From 59e6806d160f8b51176f2744d81b00faa581d425 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Mon, 6 Jul 2015 17:18:08 +0200 Subject: [PATCH] Everything seems to work, except viewport lines --- .../prototype/views/prototype_reverse.jade | 2 +- .../prototype/views/prototype_viewports.jade | 2 +- js/Makefile | 3 +- js/l3d/apps/prototype/ButtonManager.js | 17 ++-- js/l3d/apps/prototype/interactive/main.js | 15 ++- js/l3d/apps/prototype/replay/main.js | 11 ++- js/l3d/apps/prototype/tutorial/TutoCamera.js | 8 +- js/l3d/apps/prototype/tutorial/main.js | 23 ++--- js/l3d/src/cameras/CameraContainer.js | 77 --------------- js/l3d/src/cameras/FixedCamera.js | 28 ++++++ js/l3d/src/cameras/PointerCamera.js | 21 ++-- js/l3d/src/canvases/Previewer.js | 2 +- .../src/recommendations/BaseRecommendation.js | 97 ++++++++----------- .../recommendations/ReverseRecommendation.js | 38 ++++---- .../recommendations/ViewportRecommendation.js | 70 ++++++------- js/l3d/src/scenes/initScene.js | 12 +-- js/l3d/src/utils/CameraSelecter.js | 25 +++-- 17 files changed, 194 insertions(+), 257 deletions(-) delete mode 100644 js/l3d/src/cameras/CameraContainer.js create mode 100644 js/l3d/src/cameras/FixedCamera.js diff --git a/controllers/prototype/views/prototype_reverse.jade b/controllers/prototype/views/prototype_reverse.jade index 9c43807..983380d 100644 --- a/controllers/prototype/views/prototype_reverse.jade +++ b/controllers/prototype/views/prototype_reverse.jade @@ -4,7 +4,7 @@ block title title #{title} - Prototype - Reverse block configjs - script RecommendedCamera = ReverseCamera; + script Recommendation = L3D.ReverseRecommendation; //-block preciseDescription p diff --git a/controllers/prototype/views/prototype_viewports.jade b/controllers/prototype/views/prototype_viewports.jade index 028bfeb..13b35dd 100644 --- a/controllers/prototype/views/prototype_viewports.jade +++ b/controllers/prototype/views/prototype_viewports.jade @@ -4,7 +4,7 @@ block title title #{title} - Prototype - Viewports block configjs - script RecommendedCamera = OldFixedCamera; + script Recommendation = L3D.ViewportRecommendation; //-block preciseDescription p diff --git a/js/Makefile b/js/Makefile index 6834240..ff72c81 100644 --- a/js/Makefile +++ b/js/Makefile @@ -22,12 +22,13 @@ L3D: --js l3d/src/canvases/MousePointer.js \ --js l3d/src/canvases/Previewer.js \ --js l3d/src/loaders/ProgressiveLoader.js \ - --js l3d/src/recommendations/ViewportRecommendation.js \ --js l3d/src/recommendations/BaseRecommendation.js \ + --js l3d/src/recommendations/ViewportRecommendation.js \ --js l3d/src/recommendations/ArrowRecommendation.js \ --js l3d/src/recommendations/ReverseRecommendation.js \ --js l3d/src/cameras/ReplayCamera.js \ --js l3d/src/cameras/Camera.js \ + --js l3d/src/cameras/FixedCamera.js \ --js l3d/src/cameras/PointerCamera.js \ --js l3d/src/cameras/CameraContainer.js \ --js l3d/src/scenes/initScene.js \ diff --git a/js/l3d/apps/prototype/ButtonManager.js b/js/l3d/apps/prototype/ButtonManager.js index cbdfe9c..8af45f7 100644 --- a/js/l3d/apps/prototype/ButtonManager.js +++ b/js/l3d/apps/prototype/ButtonManager.js @@ -1,4 +1,5 @@ -var ButtonManager = function(cameras, previewer) { +var ButtonManager = function(camera, cameras, previewer) { + this.camera = camera; this.cameras = cameras; this.previewer = previewer; @@ -19,8 +20,8 @@ var ButtonManager = function(cameras, previewer) { this.fullscreenElement.onclick = function() {fullscreen();}; (function(self) { - self.undoElement.onclick = function() {self.cameras.mainCamera().undo(); self.updateElements();}; - self.redoElement.onclick = function() {self.cameras.mainCamera().redo(); self.updateElements();}; + self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();}; + self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();}; self.fullElement.onclick = function() { self.cameras.map(function(camera) { @@ -32,15 +33,15 @@ var ButtonManager = function(cameras, previewer) { }; self.pointerLockElement.onchange = function() { - self.cameras.mainCamera().shouldLock = self.pointerLockElement.checked; - self.cameras.mainCamera().onPointerLockChange(); + self.camera.shouldLock = self.pointerLockElement.checked; + self.camera.onPointerLockChange(); }; self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;}; self.resetElement.onclick = function() { // Reinit camera - self.cameras.mainCamera().reset(); + self.camera.reset(); }; self.recommendationElement.onchange = function() { @@ -52,13 +53,13 @@ var ButtonManager = function(cameras, previewer) { ButtonManager.prototype.updateElements = function() { // Update icon - if (!this.cameras.mainCamera().undoable()) { + if (!this.camera.undoable()) { this.undoElement.className = "btn btn-default navbar-btn"; } else { this.undoElement.className = "btn btn-primary navbar-btn"; } - if (!this.cameras.mainCamera().redoable()) { + if (!this.camera.redoable()) { this.redoElement.className = "btn btn-default navbar-btn"; } else { this.redoElement.className = "btn btn-primary navbar-btn"; diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js index 002b77a..b73654b 100644 --- a/js/l3d/apps/prototype/interactive/main.js +++ b/js/l3d/apps/prototype/interactive/main.js @@ -158,10 +158,10 @@ function initListeners() { document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); // HTML Bootstrap buttons - buttonManager = new ButtonManager(cameras, previewer); + buttonManager = new ButtonManager(camera1, cameras, previewer); // Camera selecter for hover and clicking recommendations - cameraSelecter = new L3D.CameraSelecter(renderer, scene, cameras, coins, buttonManager); + cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager); } function render() { @@ -184,21 +184,20 @@ function render() { // Update main camera var currentTime = Date.now() - previousTime; - cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime); + camera1.update(isNaN(currentTime) ? 20 : currentTime); previousTime = Date.now(); // Update the recommendations - cameras.update(cameras.mainCamera()); - + cameras.map(function(cam) { cam.update(camera1);}); // Set current position of camera - cameras.look(); + camera1.look(); var left = 0, bottom = 0, width = container_size.width(), height = container_size.height(); renderer.setScissor(left, bottom, width, height); renderer.enableScissorTest(true); renderer.setViewport(left, bottom, width, height); - renderer.render(scene, cameras.mainCamera()); + renderer.render(scene, camera1); // Remove borders of preview previewer.clear(); @@ -207,7 +206,7 @@ function render() { cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); }); // Update transparent elements - THREEx.Transparency.update(cameras.mainCamera()); + THREEx.Transparency.update(camera1); // Render preview previewer.render(cameraSelecter.prev, container_size.width(), container_size.height()); diff --git a/js/l3d/apps/prototype/replay/main.js b/js/l3d/apps/prototype/replay/main.js index 146c594..4e0cb64 100644 --- a/js/l3d/apps/prototype/replay/main.js +++ b/js/l3d/apps/prototype/replay/main.js @@ -33,6 +33,7 @@ var cameras, cameraSelecter; var spheres = new Array(mesh_number); var visible = 0; var stats; +var camera1; var loader; var coins = []; @@ -71,7 +72,7 @@ function init() { container.appendChild(renderer.domElement); // Initialize pointer camera - var camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins); + camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins); cameras = initMainScene(camera1, scene, coins); camera1.cameras = cameras; @@ -183,21 +184,21 @@ function render() { // Update main camera var currentTime = Date.now() - previousTime; - cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime); + camera1.update(isNaN(currentTime) ? 20 : currentTime); previousTime = Date.now(); // Update the recommendations - cameras.update(cameras.mainCamera()); + cameras.map(function(camera) {camera.update(camera1);}); // Set current position of camera - cameras.look(); + camera1.look(); var left = 0, bottom = 0, width = container_size.width(), height = container_size.height(); renderer.setScissor(left, bottom, width, height); renderer.enableScissorTest(true); renderer.setViewport(left, bottom, width, height); - renderer.render(scene, cameras.mainCamera()); + renderer.render(scene, camera1); // Hide arrows in recommendation // cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); }); diff --git a/js/l3d/apps/prototype/tutorial/TutoCamera.js b/js/l3d/apps/prototype/tutorial/TutoCamera.js index 36f221a..be6619a 100644 --- a/js/l3d/apps/prototype/tutorial/TutoCamera.js +++ b/js/l3d/apps/prototype/tutorial/TutoCamera.js @@ -304,10 +304,12 @@ TutoCamera.prototype.anglesFromVectors = function() { this.theta = Math.atan2(forward.x, forward.z); }; -TutoCamera.prototype.move = function(otherCamera, toSave) { +TutoCamera.prototype.move = function(recommendation, toSave) { if (toSave === undefined) toSave = true; + var otherCamera = recommendation.camera || recommendation; + this.moving = true; this.new_target = otherCamera.target.clone(); this.new_position = otherCamera.position.clone(); @@ -326,7 +328,7 @@ TutoCamera.prototype.move = function(otherCamera, toSave) { } }; -TutoCamera.prototype.moveHermite = function(otherCamera, toSave) { +TutoCamera.prototype.moveHermite = function(recommendation, toSave) { if (this.tutorial.nextAction() === 'recommendation') { this.tutorial.nextStep(); } @@ -334,6 +336,8 @@ TutoCamera.prototype.moveHermite = function(otherCamera, toSave) { if (toSave === undefined) toSave = true; + var otherCamera = recommendation.camera; + this.movingHermite = true; this.t = 0; diff --git a/js/l3d/apps/prototype/tutorial/main.js b/js/l3d/apps/prototype/tutorial/main.js index 8663e59..d5d5e64 100644 --- a/js/l3d/apps/prototype/tutorial/main.js +++ b/js/l3d/apps/prototype/tutorial/main.js @@ -27,6 +27,7 @@ var loader; var coins = []; var previousTime; var tutorial; +var camera1; init(); animate(); @@ -64,7 +65,7 @@ function init() { stats.domElement.style.position = 'absolute'; stats.domElement.style.cssFloat = "top-left"; - var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container); + camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container); // Initialize pointer for pointer lock var pointer = new L3D.MousePointer(camera1); @@ -88,7 +89,7 @@ function init() { // Initialize pointer camera tutorial = camera1.tutorial; - cameras = new L3D.CameraContainer(camera1, []); + cameras = []; tutorial.setCameras(cameras); // Load peach scene @@ -121,10 +122,10 @@ function initListeners() { document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); // HTML Bootstrap buttons - buttonManager = new ButtonManager(cameras, previewer); + buttonManager = new ButtonManager(camera1, cameras, previewer); // Camera selecter for hover and clicking recommendations - cameraSelecter = new L3D.CameraSelecter(renderer, scene, cameras, coins, buttonManager); + cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager); } @@ -148,21 +149,21 @@ function render() { // Update main camera var currentTime = Date.now() - previousTime; - cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime); + camera1.update(isNaN(currentTime) ? 20 : currentTime); previousTime = Date.now(); // Update the recommendations - cameras.update(cameras.mainCamera()); + cameras.map(function(camera) {camera.update(camera1);}); // Set current position of camera - cameras.look(); + camera1.look(); var left = 0, bottom = 0, width = container_size.width(), height = container_size.height(); renderer.setScissor(left, bottom, width, height); renderer.enableScissorTest(true); renderer.setViewport(left, bottom, width, height); - THREEx.Transparency.update(cameras.mainCamera()); - renderer.render(scene, cameras.mainCamera()); + THREEx.Transparency.update(camera1); + renderer.render(scene, camera1); // Remove borders of preview previewer.clear(); @@ -193,8 +194,8 @@ function onWindowResize() { previewer.domElement.height = container_size.height(); renderer.setSize(container_size.width(), container_size.height()); - cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();}); - cameras.forEach(function(camera) {camera.updateProjectionMatrix();}); + cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();}); + cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();}); render(); } diff --git a/js/l3d/src/cameras/CameraContainer.js b/js/l3d/src/cameras/CameraContainer.js deleted file mode 100644 index ec06858..0000000 --- a/js/l3d/src/cameras/CameraContainer.js +++ /dev/null @@ -1,77 +0,0 @@ -L3D.CameraContainer = function (pointerCamera, cameras) { - if (cameras !== undefined) { - this.cameras = cameras; - } else { - this.cameras = []; - } - - if (pointerCamera !== undefined) { - this.push(pointerCamera); - } -}; - -L3D.CameraContainer.prototype.mainCamera = function(id) { - if (id === undefined) { - return this.pointerCamera; - } - if (id >= cameras.length || id < 0) { - console.log('Warning : this camera does not exist'); - return; - } - - this.current_camera = id; -}; - -L3D.CameraContainer.prototype.forEach = function(callback) { - callback(this.pointerCamera); - this.cameras.forEach(callback); -}; - -L3D.CameraContainer.prototype.look = function() { - this.mainCamera().look(); -}; - -L3D.CameraContainer.prototype.updateMainCamera = function(time) { - this.pointerCamera.update(time); -}; - -L3D.CameraContainer.prototype.update = function(position) { - this.cameras.map(function (elt) { elt.update(position); }); -}; - -L3D.CameraContainer.prototype.push = function(camera) { - this.pointerCamera = camera; - this.push = function(camera) { - this.cameras.push(camera); - }; -}; - -L3D.CameraContainer.prototype.get = function(i) { - return this.cameras[i]; -}; - -L3D.CameraContainer.prototype.getByObject = function(object) { - for (var i in this.cameras) { - if (this.cameras[i].containsObject(object)) { - return this.get(i); - } - } -}; - -L3D.CameraContainer.prototype.setById = function(id) { - var i = this.getById(id); - - if (i !== -1) - this.current_camera = i; -}; - -L3D.CameraContainer.prototype.nextCamera = function() { - if (this.cameras.length !== 0) { - this.current_camera++; - this.current_camera%=this.cameras.length; - } -}; - -L3D.CameraContainer.prototype.map = function(callback) { - this.cameras.map(callback); -}; diff --git a/js/l3d/src/cameras/FixedCamera.js b/js/l3d/src/cameras/FixedCamera.js new file mode 100644 index 0000000..7226bf0 --- /dev/null +++ b/js/l3d/src/cameras/FixedCamera.js @@ -0,0 +1,28 @@ +L3D.FixedCamera = function(arg1, arg2, arg3, arg4, position, target) { + THREE.PerspectiveCamera.apply(this, arguments); + + if (position === undefined) { + + position = new THREE.Vector3(0,0,5); + + } + + if (target === undefined ) { + + target = new THREE.Vector3(); + + } + + this.position.x = position.x; + this.position.y = position.y; + this.position.z = position.z; + + this.target = target.clone(); + +} +L3D.FixedCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); +L3D.FixedCamera.prototype.constructor = L3D.FixedCamera; + +L3D.FixedCamera.prototype.look = function() { + this.lookAt(this.target); +} diff --git a/js/l3d/src/cameras/PointerCamera.js b/js/l3d/src/cameras/PointerCamera.js index cdfe79e..d29d9d8 100644 --- a/js/l3d/src/cameras/PointerCamera.js +++ b/js/l3d/src/cameras/PointerCamera.js @@ -260,15 +260,14 @@ L3D.PointerCamera.prototype.onPointerLockChange = function() { * @param {Number} time number of milliseconds between the previous and the next frame */ L3D.PointerCamera.prototype.update = function(time) { + this.shouldLogCameraAngles = false; if (this.moving) { this.linearMotion(time); + } else if (this.movingHermite) { + this.hermiteMotion(time); } else { - this.shouldLogCameraAngles = false; - if (this.movingHermite) { - this.hermiteMotion(time); - } else { - this.normalMotion(time); - } + this.shouldLogCameraAngles = true; + this.normalMotion(time); } }; @@ -341,7 +340,7 @@ L3D.PointerCamera.prototype.normalMotion = function(time) { var self = this; setTimeout(function() { self.shouldLogCameraAngles = true; - }, 100); + }, 500); var event = new L3D.BD.Event.KeyboardEvent(); event.camera = this; @@ -437,10 +436,12 @@ L3D.PointerCamera.prototype.anglesFromVectors = function() { * @param {Camera} camera Camera to move to * @param {Boolean} [toSave=true] true if you want to save the current state of the camera */ -L3D.PointerCamera.prototype.move = function(otherCamera, toSave) { +L3D.PointerCamera.prototype.move = function(recommendation, toSave) { if (toSave === undefined) toSave = true; + var otherCamera = recommendation.camera; + this.moving = true; this.new_target = otherCamera.target.clone(); this.new_position = otherCamera.position.clone(); @@ -464,10 +465,12 @@ L3D.PointerCamera.prototype.move = function(otherCamera, toSave) { * @param {Camera} camera Camera to move to * @param {Boolean} [toSave=true] true if you want to save the current state of the camera */ -L3D.PointerCamera.prototype.moveHermite = function(otherCamera, toSave) { +L3D.PointerCamera.prototype.moveHermite = function(recommendation, toSave) { if (toSave === undefined) toSave = true; + var otherCamera = recommendation.camera; + this.movingHermite = true; this.t = 0; diff --git a/js/l3d/src/canvases/Previewer.js b/js/l3d/src/canvases/Previewer.js index 96a9aaa..3bbba88 100644 --- a/js/l3d/src/canvases/Previewer.js +++ b/js/l3d/src/canvases/Previewer.js @@ -116,7 +116,7 @@ L3D.Previewer.prototype.render = function(prev, container_width, container_heigh 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); + this.renderer.render(this.scene, prev.camera.camera); this.update(true); diff --git a/js/l3d/src/recommendations/BaseRecommendation.js b/js/l3d/src/recommendations/BaseRecommendation.js index 330b827..0489ce7 100644 --- a/js/l3d/src/recommendations/BaseRecommendation.js +++ b/js/l3d/src/recommendations/BaseRecommendation.js @@ -2,54 +2,52 @@ * @memberof L3D * @description The base class for recommendation * @constructor - * @extends THREE.PerspectiveCamera * @abstract */ L3D.BaseRecommendation = function(arg1, arg2, arg3, arg4, position, target) { - THREE.PerspectiveCamera.apply(this, arguments); - // Set Position - if (position === undefined) { - this.position = new THREE.Vector3(0,0,5); - } else { - this.position.x = position.x; - this.position.y = position.y; - this.position.z = position.z; - } + THREE.Object3D.apply(this); - if (target === undefined) - target = new THREE.Vector3(0,0,0); + this.camera = new L3D.FixedCamera(arg1, arg2, arg3, arg4, position, target); + this.add(this.camera); var direction = target.clone(); - direction.sub(this.position); + direction.sub(this.camera.position); direction.normalize(); - this.center = this.position.clone(); + this.center = this.camera.position.clone(); this.center.sub(direction); - this.target = this.position.clone(); - this.target.add(L3D.Tools.mul(direction,20)); - this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0x0000ff, side:THREE.BackSide})); + this.add(this.arrow); this.size = 0.4; this.object3D = new THREE.Object3D(); - this.object3D.add(this.initExtremity()); + + var tmp = this.initExtremity(); + + if (tmp !== undefined) + this.object3D.add(tmp); + this.object3D.add(this.arrow); + this.add(this.object3D); + this.fullArrow = false; + r = this; + }; -L3D.BaseRecommendation.prototype = Object.create(THREE.PerspectiveCamera.prototype); +L3D.BaseRecommendation.prototype = Object.create(THREE.Object3D.prototype); L3D.BaseRecommendation.prototype.constructor = L3D.BaseRecommendation; /** * Changes the color of the meshes like a HTML link */ L3D.BaseRecommendation.prototype.check = function() { - this.object3D.traverse(function(obj) { + this.traverse(function(obj) { if (obj instanceof THREE.Mesh) obj.material.color.setHex(0x663366); }); @@ -61,8 +59,8 @@ L3D.BaseRecommendation.prototype.check = function() { L3D.BaseRecommendation.prototype.initExtremity = function() { var geometry = new THREE.Geometry(); - var direction = this.target.clone(); - direction.sub(this.position); + var direction = this.camera.target.clone(); + direction.sub(this.camera.position); direction.normalize(); var left = L3D.Tools.cross(direction, this.up); @@ -74,11 +72,11 @@ L3D.BaseRecommendation.prototype.initExtremity = function() { left = L3D.Tools.mul(left, this.size); other = L3D.Tools.mul(other, this.size); - geometry.vertices.push(L3D.Tools.sum( L3D.Tools.sum( this.position, left), other), - L3D.Tools.diff(L3D.Tools.sum( this.position, other), left), - L3D.Tools.diff(L3D.Tools.diff(this.position, left), other), - L3D.Tools.sum( L3D.Tools.diff(this.position, other), left), - L3D.Tools.sum(this.position, direction) + geometry.vertices.push(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(this.camera.position, direction) ); geometry.faces.push(new THREE.Face3(0,2,1), // new THREE.Face3(0,2,1), @@ -106,8 +104,8 @@ L3D.BaseRecommendation.prototype.initExtremity = function() { * Updates the extremity of the arrow */ L3D.BaseRecommendation.prototype.updateExtremity = function() { - var direction = this.target.clone(); - direction.sub(this.position); + var direction = this.camera.target.clone(); + direction.sub(this.camera.position); direction.normalize(); var left = L3D.Tools.cross(direction, this.up); @@ -119,11 +117,11 @@ L3D.BaseRecommendation.prototype.updateExtremity = function() { other = L3D.Tools.mul(other, this.size); this.mesh.geometry.vertices = [ - L3D.Tools.sum( L3D.Tools.sum( this.position, left), other), - L3D.Tools.diff(L3D.Tools.sum( this.position, other), left), - L3D.Tools.diff(L3D.Tools.diff(this.position, left), other), - L3D.Tools.sum( L3D.Tools.diff(this.position, other), left), - L3D.Tools.sum(this.position, direction) + 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(this.camera.position, direction) ]; this.mesh.geometry.computeFaceNormals(); @@ -189,18 +187,18 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) { // First point of curve var f0 = mainCamera.position.clone(); - f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.target, this.position).normalize()),2)); + f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.camera.target, this.camera.position).normalize()),2)); // Last point of curve - var f1 = this.position.clone(); + var f1 = this.camera.position.clone(); // Last derivative of curve - var fp1 = L3D.Tools.diff(this.target, this.position); + var fp1 = L3D.Tools.diff(this.camera.target, this.camera.position); fp1.normalize(); fp1.multiplyScalar(2); // Camera direction - var dir = L3D.Tools.diff(this.position, mainCamera.position); + var dir = L3D.Tools.diff(this.camera.position, mainCamera.position); dir.normalize(); if (fp1.dot(dir) < -0.5) { @@ -212,7 +210,7 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) { // new_dir.multiplyScalar(2); // f0.add(new_dir); - if (mainCamera.position.y > this.position.y) { + if (mainCamera.position.y > this.camera.position.y) { f0.add(new THREE.Vector3(0,2,0)); } else { f0.add(new THREE.Vector3(0,-2,0)); @@ -288,7 +286,7 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) { this.arrow.geometry.dynamic = true; this.arrow.geometry.verticesNeedUpdate = true; // this.arrow.geometry.elementsNeedUpdate = true; - // this.arrow.geometry.groupsNeedUpdate = true; + // this.arrow.geometry.groupsNeedUpdate = true;en-US this.arrow.geometry.normalsNeedUpdate = true; }; @@ -297,7 +295,7 @@ L3D.BaseRecommendation.prototype.regenerateArrow = function(mainCamera) { * Look at function. Just like OpenGL gluLookAt (from position to target) */ L3D.BaseRecommendation.prototype.look = function() { - this.lookAt(this.target); + this.camera.look(); }; /** @@ -306,21 +304,4 @@ L3D.BaseRecommendation.prototype.look = function() { */ L3D.BaseRecommendation.prototype.addToScene = function(scene) { scene.add(this); - scene.add(this.object3D); -}; - -/** - * Apply a callback to all objects representing the camera - * @param callback {function} callback to call on each mesh - */ -L3D.BaseRecommendation.prototype.traverse = function(callback) { - this.object3D.traverse(callback); -}; - -/** - * Checks if an object is contained in the representation of the camera - * @param object {THREE.Object3D} Object that could belong the camera - */ -L3D.BaseRecommendation.prototype.containsObject = function(object) { - return object.parent === this.object3D; }; diff --git a/js/l3d/src/recommendations/ReverseRecommendation.js b/js/l3d/src/recommendations/ReverseRecommendation.js index 2c4c26a..0b13b27 100644 --- a/js/l3d/src/recommendations/ReverseRecommendation.js +++ b/js/l3d/src/recommendations/ReverseRecommendation.js @@ -14,8 +14,8 @@ L3D.ReverseRecommendation.prototype.constructor = L3D.ReverseRecommendation; L3D.ReverseRecommendation.prototype.initExtremity = function() { var geometry = new THREE.Geometry(); - var direction = this.target.clone(); - direction.sub(this.position); + var direction = this.camera.target.clone(); + direction.sub(this.camera.position); direction.normalize(); var left = L3D.Tools.cross(direction, this.up); @@ -26,18 +26,18 @@ L3D.ReverseRecommendation.prototype.initExtremity = function() { left = L3D.Tools.mul(left, this.size / 2 ); other = L3D.Tools.mul(other, this.size / 2); - var pyramidCenter = L3D.Tools.diff(this.position, L3D.Tools.mul(direction,0.25)); + var pyramidCenter = L3D.Tools.diff(this.camera.position, L3D.Tools.mul(direction,0.25)); geometry.vertices.push( - L3D.Tools.sum( L3D.Tools.sum( this.position, left), other), - L3D.Tools.diff(L3D.Tools.sum( this.position, other), left), - L3D.Tools.diff(L3D.Tools.diff(this.position, left), other), - L3D.Tools.sum( L3D.Tools.diff(this.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.sum( L3D.Tools.sum( this.position, left), other), - L3D.Tools.diff(L3D.Tools.sum( this.position, other), left), - L3D.Tools.diff(L3D.Tools.diff(this.position, left), other), - L3D.Tools.sum( L3D.Tools.diff(this.position, other), left) - // L3D.Tools.diff(this.position, direction) + 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; @@ -82,30 +82,30 @@ L3D.ReverseRecommendation.prototype.regenerateArrow = function(mainCamera) { // First point of curve var f0 = mainCamera.position.clone(); - f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.target, this.position).normalize()),2)); + f0.add(L3D.Tools.mul(L3D.Tools.sum(new THREE.Vector3(0,-0.5,0), L3D.Tools.diff(this.camera.target, this.camera.position).normalize()),2)); // Last point of curve - var f1 = this.position.clone(); + var f1 = this.camera.position.clone(); // Last derivative of curve - var fp1 = L3D.Tools.diff(this.target, this.position); + var fp1 = L3D.Tools.diff(this.camera.target, this.camera.position); fp1.normalize(); fp1.multiplyScalar(2); // Camera direction - var dir = L3D.Tools.diff(this.position, mainCamera.position); + var dir = L3D.Tools.diff(this.camera.position, mainCamera.position); dir.normalize(); if (fp1.dot(dir) < -0.5) { // Regen polynom with better stuff - // var new_dir = L3D.Tools.cross(L3D.Tools.diff(this.position, mainCamera.position).normalize(), mainCamera.up); + // var new_dir = L3D.Tools.cross(L3D.Tools.diff(this.camera.position, mainCamera.position).normalize(), mainCamera.up); // new_dir.multiplyScalar(new_dir.dot(fp1) < 0 ? 1 : -1); // new_dir.add(dir); // new_dir.add(dir); // new_dir.multiplyScalar(2); // f0.add(new_dir); - if (mainCamera.position.y > this.position.y) { + if (mainCamera.position.y > this.camera.position.y) { f0.add(new THREE.Vector3(0,2,0)); } else { f0.add(new THREE.Vector3(0,-2,0)); @@ -176,7 +176,7 @@ L3D.ReverseRecommendation.prototype.regenerateArrow = function(mainCamera) { this.arrow.geometry.computeBoundingSphere(); // this.arrow.geometry.vertices[0] = new THREE.Vector3(); // mainCamera.position.clone(); - // this.arrow.geometry.vertices[1] = this.position.clone(); + // this.arrow.geometry.vertices[1] = this.camera.position.clone(); this.arrow.geometry.dynamic = true; this.arrow.geometry.verticesNeedUpdate = true; diff --git a/js/l3d/src/recommendations/ViewportRecommendation.js b/js/l3d/src/recommendations/ViewportRecommendation.js index 5ff7d65..31595fd 100644 --- a/js/l3d/src/recommendations/ViewportRecommendation.js +++ b/js/l3d/src/recommendations/ViewportRecommendation.js @@ -5,26 +5,26 @@ * @constructor */ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target) { - THREE.PerspectiveCamera.apply(this, arguments); + L3D.BaseRecommendation.apply(this, arguments); // Set Position if (position === undefined) { - this.position = new THREE.Vector3(0,0,5); + this.camera.position = new THREE.Vector3(0,0,5); } else { - this.position.x = position.x; - this.position.y = position.y; - this.position.z = position.z; + this.camera.position.x = position.x; + this.camera.position.y = position.y; + this.camera.position.z = position.z; } if (target === undefined) target = new THREE.Vector3(0,0,0); var direction = target.clone(); - direction.sub(this.position); + direction.sub(this.camera.position); direction.normalize(); - this.target = this.position.clone(); - this.target.add(L3D.Tools.mul(direction,10)); + this.camera.target = this.camera.position.clone(); + this.camera.target.add(L3D.Tools.mul(direction,10)); // this.up = new THREE.Vector3(0,0,1); // Compute corners @@ -40,10 +40,10 @@ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target) left = L3D.Tools.mul(left, 1); other = L3D.Tools.mul(other, 1); - geometry.vertices.push(L3D.Tools.sum(L3D.Tools.sum(this.position, left), other), - L3D.Tools.diff(L3D.Tools.sum(this.position, other),left), - L3D.Tools.diff(L3D.Tools.diff(this.position, left),other), - L3D.Tools.sum(L3D.Tools.diff(this.position, other), left) + geometry.vertices.push(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) ); geometry.faces.push(new THREE.Face3(0,1,2), // new THREE.Face3(0,2,1), @@ -90,18 +90,28 @@ L3D.ViewportRecommendation = function(arg1, arg2, arg3, arg4, position, target) this.mesh = new THREE.Mesh(geometry, material); this.mesh.raycastable = true; + + this.object3D = new THREE.Object3D(); + this.object3D.add(this.mesh); + this.object3D.add(this.line); + this.add(this.object3D); + }; -L3D.ViewportRecommendation.prototype = Object.create(THREE.PerspectiveCamera.prototype); +L3D.ViewportRecommendation.prototype = Object.create(L3D.BaseRecommendation.prototype); L3D.ViewportRecommendation.prototype.constructor = L3D.ViewportRecommendation; L3D.ViewportRecommendation.prototype.check = function() { this.mesh.material.color.setHex(0x663366); }; +L3D.ViewportRecommendation.prototype.initExtremity = function() { + +} + // Update function L3D.ViewportRecommendation.prototype.update = function(position) { // Compute distance between center of camera and position - dist = L3D.Tools.norm2(L3D.Tools.diff(position.position, this.position)); + dist = L3D.Tools.norm2(L3D.Tools.diff(position.position, this.camera.position)); var low_bound = 1; var high_bound = 5; @@ -122,30 +132,10 @@ L3D.ViewportRecommendation.prototype.update = function(position) { this.mesh.material.transparent = this.mesh.visible = false; }; -// Look function -L3D.ViewportRecommendation.prototype.look = function() { - this.lookAt(this.target); -}; - -L3D.ViewportRecommendation.prototype.addToScene = function(scene) { - scene.add(this); - scene.add(this.mesh); - scene.add(this.line); -}; - -L3D.ViewportRecommendation.prototype.traverse = function(callback) { - callback(this.mesh); - callback(this.line); -}; - -L3D.ViewportRecommendation.prototype.containsObject = function(object) { - return object === this.mesh; -}; - L3D.ViewportRecommendation.prototype.setSize = function(size) { - var direction = this.target.clone(); - direction.sub(this.position); + var direction = this.camera.target.clone(); + direction.sub(this.camera.position); direction.normalize(); var left = L3D.Tools.cross(direction, this.up); @@ -156,10 +146,10 @@ L3D.ViewportRecommendation.prototype.setSize = function(size) { other = L3D.Tools.mul(other, size); this.mesh.geometry.vertices = [ - L3D.Tools.sum(L3D.Tools.sum(this.position, left), other), - L3D.Tools.diff(L3D.Tools.sum(this.position, other),left), - L3D.Tools.diff(L3D.Tools.diff(this.position, left),other), - L3D.Tools.sum(L3D.Tools.diff(this.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) ]; this.mesh.geometry.verticesNeedUpdate = true; diff --git a/js/l3d/src/scenes/initScene.js b/js/l3d/src/scenes/initScene.js index 263000a..ec58410 100644 --- a/js/l3d/src/scenes/initScene.js +++ b/js/l3d/src/scenes/initScene.js @@ -1,5 +1,3 @@ -var Recommendation = Recommendation || L3D.ArrowRecommendation; - L3D.addLight = function(scene) { var directional_light = new THREE.DirectionalLight(0xdddddd); directional_light.position.set(1, 2.5, 1).normalize(); @@ -59,7 +57,7 @@ L3D.initPeach = function(camera, scene, coins) { Coin.init(0.001); var otherCams = []; - var cameras = new L3D.CameraContainer(camera, otherCams); + var cameras = otherCams; return cameras; }; @@ -288,7 +286,7 @@ L3D.initBobomb = function(camera, scene, coins) { } var otherCams = L3D.createBobombCameras(container_size.width(), container_size.height()); - var cameras = new L3D.CameraContainer(camera, otherCams); + var cameras = otherCams; otherCams.forEach(function(cam) {cam.addToScene(scene);}); @@ -460,7 +458,7 @@ L3D.initWhomp = function(camera, scene, coins) { } var otherCams = L3D.createWhompCameras(container_size.width(), container_size.height()); - var cameras = new L3D.CameraContainer(camera, otherCams); + var cameras = otherCams; otherCams.forEach(function(cam) {cam.addToScene(scene);}); @@ -612,7 +610,7 @@ L3D.initMountain = function(camera, scene, coins) { } var otherCams = L3D.createMountainCameras(container_size.width(), container_size.height()); - var cameras = new L3D.CameraContainer(camera, otherCams); + var cameras = otherCams; otherCams.forEach(function(cam) {cam.addToScene(scene);}); @@ -727,7 +725,7 @@ L3D.initSponza = function(camera, scene, coins) { } var otherCams = L3D.createSponzaCameras(container_size.width(), container_size.height()); - var cameras = new L3D.CameraContainer(camera, otherCams); + var cameras = otherCams; otherCams.forEach(function(cam) {cam.addToScene(scene);}); diff --git a/js/l3d/src/utils/CameraSelecter.js b/js/l3d/src/utils/CameraSelecter.js index c44b88c..8bf978e 100644 --- a/js/l3d/src/utils/CameraSelecter.js +++ b/js/l3d/src/utils/CameraSelecter.js @@ -1,7 +1,8 @@ -L3D.CameraSelecter = function(renderer, scene, cameras, coins, buttonManager) { +L3D.CameraSelecter = function(renderer, scene, camera, cameras, coins, buttonManager) { this.raycaster = new THREE.Raycaster(); this.renderer = renderer; this.mouse = {}; + this.camera = camera; this.cameras = cameras; this.prev = {}; this.buttonManager = buttonManager; @@ -15,7 +16,7 @@ L3D.CameraSelecter.prototype.pointedCamera = function() { var x = ( this.mouse.x / this.renderer.domElement.width ) * 2 - 1; var y = - (this.mouse.y / this.renderer.domElement.height) * 2 + 1; - var camera = this.cameras.mainCamera(); + var camera = this.camera; if (camera.pointerLocked) { @@ -58,8 +59,14 @@ L3D.CameraSelecter.prototype.pointedCamera = function() { return this.coins[coin]; } } - this.currentPointedCamera = this.cameras.getByObject(intersects[bestIndex].object); - return this.currentPointedCamera; + + if (intersects[bestIndex].object.parent.parent instanceof L3D.BaseRecommendation) { + + this.currentPointedCamera = intersects[bestIndex].object.parent.parent; + return this.currentPointedCamera; + + } + // } } } @@ -87,7 +94,7 @@ L3D.CameraSelecter.prototype.update = function(event, y) { // log it e = new L3D.BD.Event.Hovered(); e.start = true; - e.arrow_id = this.cameras.cameras.indexOf(this.currentPointedCamera); + e.arrow_id = this.cameras.indexOf(this.currentPointedCamera); e.send(); this.prev.x = this.mouse.x; @@ -108,8 +115,8 @@ L3D.CameraSelecter.prototype.update = function(event, y) { document.getElementById('container').style.cursor = hovered ? "pointer" : "auto"; - if (this.cameras.mainCamera().pointerLocked) - this.cameras.mainCamera().mousePointer.render(hovered ? L3D.MousePointer.RED : L3D.MousePointer.BLACK); + if (this.camera.pointerLocked) + this.camera.mousePointer.render(hovered ? L3D.MousePointer.RED : L3D.MousePointer.BLACK); }; @@ -121,11 +128,11 @@ L3D.CameraSelecter.prototype.click = function(event) { if (newCamera !== undefined && !(newCamera instanceof Coin)) { e = new L3D.BD.Event.ArrowClicked(); - e.arrow_id = this.cameras.cameras.indexOf(newCamera); + e.arrow_id = this.cameras.indexOf(newCamera); e.send(); newCamera.check(); - this.cameras.mainCamera().moveHermite(newCamera); + this.camera.moveHermite(newCamera); buttonManager.updateElements(); } else if (newCamera instanceof Coin) {