From 1d6dbc05228c44e3ebc15906ba95c0182bb9b86c Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 6 May 2015 14:54:02 +0200 Subject: [PATCH] Separate prototype in classes in multiple files, and merged two versions --- controllers/prototype/index.js | 4 +- controllers/prototype/views/prototype.jade | 10 +- static/js/CameraContainer.js | 12 +- static/js/OldFixedCamera.js | 1 + static/js/prototype/ButtonManager.js | 51 ++ static/js/prototype/Previewer.js | 52 ++ static/js/prototype/arrows/main.js | 550 -------------------- static/js/prototype/initScene.js | 187 +++++++ static/js/prototype/main.js | 253 ++++++++++ static/js/prototype/raycasterTools.js | 80 +++ static/js/prototype/viewports/main.js | 553 --------------------- views/withjs.jade | 2 +- 12 files changed, 646 insertions(+), 1109 deletions(-) create mode 100644 static/js/prototype/ButtonManager.js create mode 100644 static/js/prototype/Previewer.js delete mode 100644 static/js/prototype/arrows/main.js create mode 100644 static/js/prototype/initScene.js create mode 100644 static/js/prototype/main.js create mode 100644 static/js/prototype/raycasterTools.js delete mode 100644 static/js/prototype/viewports/main.js diff --git a/controllers/prototype/index.js b/controllers/prototype/index.js index 29bb6da..19e6f6d 100644 --- a/controllers/prototype/index.js +++ b/controllers/prototype/index.js @@ -10,7 +10,7 @@ module.exports.index = function(req, res) { module.exports.arrows = function(req, res) { res.setHeader('Content-Type', 'text/html'); - res.locals.extrajs = ''; + res.locals.cameraStyle = 'arrows'; res.render('prototype.jade', res.locals, function(err, result) { console.log(err); @@ -21,7 +21,7 @@ module.exports.arrows = function(req, res) { module.exports.viewports = function(req, res) { res.setHeader('Content-Type', 'text/html'); - res.locals.extrajs = ''; + res.locals.cameraStyle = 'viewports'; res.render('prototype.jade', res.locals, function(err, result) { res.send(result); diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade index 3aa2a7a..f49ae4c 100644 --- a/controllers/prototype/views/prototype.jade +++ b/controllers/prototype/views/prototype.jade @@ -4,7 +4,15 @@ block title title #{title} - Prototype block extrajs - #{extrajs} + script(src="/static/js/prototype/initScene.js") + script(src="/static/js/prototype/raycasterTools.js") + script(src="/static/js/prototype/Previewer.js") + script(src="/static/js/prototype/ButtonManager.js") + if cameraStyle == 'arrows' + script Recommendation = FixedCamera; + else if cameraStyle == 'viewports' + script Recommendation = OldFixedCamera; + script(src="/static/js/prototype/main.js") block extrahead link(rel="stylesheet" href="/static/css/prototype.css") diff --git a/static/js/CameraContainer.js b/static/js/CameraContainer.js index 9a04a0c..95c371c 100644 --- a/static/js/CameraContainer.js +++ b/static/js/CameraContainer.js @@ -1,5 +1,13 @@ -var CameraContainer = function () { - this.cameras = new Array(); +var CameraContainer = function (pointerCamera, cameras) { + if (cameras !== undefined) { + this.cameras = cameras; + } else { + this.cameras = []; + } + + if (pointerCamera !== undefined) { + this.push(pointerCamera); + } } CameraContainer.prototype.mainCamera = function(id) { diff --git a/static/js/OldFixedCamera.js b/static/js/OldFixedCamera.js index 09fd0f8..a9c8fc5 100644 --- a/static/js/OldFixedCamera.js +++ b/static/js/OldFixedCamera.js @@ -86,6 +86,7 @@ var OldFixedCamera = function(arg1, arg2, arg3, arg4, position, target) { }); this.mesh = new THREE.Mesh(geometry, material); + this.mesh.raycastable = true; } OldFixedCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); OldFixedCamera.prototype.constructor = OldFixedCamera; diff --git a/static/js/prototype/ButtonManager.js b/static/js/prototype/ButtonManager.js new file mode 100644 index 0000000..892cd24 --- /dev/null +++ b/static/js/prototype/ButtonManager.js @@ -0,0 +1,51 @@ +var ButtonManager = function(cameras) { + this.cameras = cameras; + + this.showArrows = true; + this.beenFullscreen = false; + + this.fullscreenElement = document.getElementById('full'); + this.fullElement = document.getElementById('fullarrow'); + this.resetElement = document.getElementById('reset'); + this.undoElement = document.getElementById('undo'); + this.redoElement = document.getElementById('redo'); + + this.collisionElement = document.getElementById('collisions'); + this.showarrowsElement = document.getElementById('showarrows'); + + this.fullscreenElement.onclick = function() {}; + this.resetElement.onclick = cameras.mainCamera().reset(); + + (function(self) { + self.undoElement.onclick = function() {cameras.mainCamera().undo(); self.updateElements();} + self.redoElement.onclick = function() {cameras.mainCamera().redo(); self.updateElements();} + + self.fullElement.onclick = function() { + cameras.map(function(camera) { + if (!(camera instanceof PointerCamera)) { + camera.fullArrow = self.fullElement.checked; + } + }); + + self.collisionElement.onchange = function() {cameras.mainCamera().collisions = self.collisionElement.checked;} + self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;} + }; + })(this); + +} + +ButtonManager.prototype.updateElements = function() { + // Update icon + if (!this.cameras.mainCamera().undoable()) { + this.undoElement.className = "btn btn-default"; + } else { + this.undoElement.className = "btn btn-primary"; + } + + if (!this.cameras.mainCamera().redoable()) { + this.redoElement.className = "btn btn-default"; + } else { + this.redoElement.className = "btn btn-primary"; + } +} + diff --git a/static/js/prototype/Previewer.js b/static/js/prototype/Previewer.js new file mode 100644 index 0000000..114f00f --- /dev/null +++ b/static/js/prototype/Previewer.js @@ -0,0 +1,52 @@ +var Previewer = function(renderer) { + this.domElement = document.createElement('canvas'); + this.ctx = this.domElement.getContext('2d'); + this.renderer = renderer; +} + +Previewer.prototype.render = function(prev, container_width, container_height) { + var width = container_width / 5; + var height = container_height / 5; + var left = prev.x - width/2; + var bottom = renderer.domElement.height - prev.y + height/5; + + if (prev.go) { + width = Math.floor(container_width / 5); + height = Math.floor(container_height / 5); + left = Math.floor(prev.x - width/2); + bottom = Math.floor(renderer.domElement.height - prev.y + height/5); + + + // Draw border + var can_bottom = container_height - bottom - height ; + this.ctx.strokeStyle = "#ffffff"; + this.ctx.beginPath(); + this.ctx.moveTo(left-1, can_bottom); + this.ctx.lineTo(left-1, can_bottom + height); + this.ctx.lineTo(left + width-1, can_bottom + height); + this.ctx.lineTo(left + width-1, can_bottom); + this.ctx.closePath(); + this.ctx.stroke(); + + this.ctx.strokeStyle = "#000000"; + this.ctx.beginPath(); + this.ctx.moveTo(left, can_bottom + 1); + this.ctx.lineTo(left, can_bottom + height - 1); + this.ctx.lineTo(left + width - 2 , can_bottom + height-1); + this.ctx.lineTo(left + width - 2, can_bottom+1); + this.ctx.closePath(); + this.ctx.stroke(); + + // Do render in previsualization + prev.camera.look(); + renderer.setScissor(left, bottom, width, height); + renderer.enableScissorTest (true); + renderer.setViewport(left, bottom, width, height); + renderer.render(scene, prev.camera); + } + +} + +Previewer.prototype.clear = function() { + this.domElement.width = this.domElement.width; +} diff --git a/static/js/prototype/arrows/main.js b/static/js/prototype/arrows/main.js deleted file mode 100644 index da6c657..0000000 --- a/static/js/prototype/arrows/main.js +++ /dev/null @@ -1,550 +0,0 @@ -var mesh_number = 25; -var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}; -var bigmesh; -var raycaster; -var objects = []; -var cameras = new CameraContainer(); -var spheres = new Array(mesh_number); -var visible = 0; -var stats; -var canvas; -var ctx2d; - -var loader; - -var main_section = document.getElementById('main-section'); -var offset = function() { - return - document.getElementById('nav').offsetHeight - + document.getElementById('main-div').offsetHeight; -} - -console.log(document.getElementById('main-div').offsetHeight); -var container_size = { - width: function() { return main_section.clientWidth; }, - height: function() { - return main_section.clientHeight - - document.getElementById('nav').offsetHeight - - document.getElementById('main-div').offsetHeight; - } -}; - -console.log(container_size.width(), container_size.height()); - -var prev = {x:0, y:0, go:false}; -var showArrows = true; -var beenFullscreen = false; - -var undoElement = document.getElementById('undo'); -var redoElement = document.getElementById('redo'); - -function updateElements() { - // Update icon - if (!cameras.mainCamera().undoable()) { - undoElement.className = "btn btn-default"; - } else { - undoElement.className = "btn btn-primary"; - } - - if (!cameras.mainCamera().redoable()) { - redoElement.className = "btn btn-default"; - } else { - redoElement.className = "btn btn-primary"; - } -} - -init(); -animate(); - -function init() { - // Collidable objects to prevent camera from traversing objects - var collidableObjects = new Array(); - - document.getElementById('full').onclick = fullscreen; - - // Add the listener on the button - document.getElementById('reset').onclick = function() { cameras.mainCamera().reset(); }; - var fullarrow = document.getElementById('fullarrow'); - fullarrow.onchange = function() { - cameras.map(function(camera) { - if (camera instanceof FixedCamera) { - camera.fullArrow = fullarrow.checked; - } - }); - } - - var collisions = document.getElementById('collisions'); - collisions.onchange = function() { - cameras.mainCamera().collisions = collisions.checked; - } - - var showarrows = document.getElementById('showarrows'); - showarrows.onchange = function() { - showArrows = showarrows.checked; - } - - undoElement.onclick = function() { - cameras.mainCamera().undo(); - updateElements(); - - } - - redoElement.onclick = function() { - cameras.mainCamera().redo(); - updateElements(); - } - - // on initialise le moteur de rendu - container = document.getElementById('container'); - container.style.height = container_size.height() + 'px'; - container.style.width = container_size.width() + 'px'; - renderer = new THREE.WebGLRenderer({alpha:true, antialias:true}); - renderer.setSize(container_size.width(), container_size.height()); - // renderer.setSize(container_size.width(), container_size.height()); - renderer.shadowMapEnabled = true; - renderer.setClearColor(0x87ceeb); - - canvas = document.createElement('canvas'); - canvas.style.position ="absolute"; - canvas.style.cssFloat = 'top-left'; - canvas.width = container_size.width(); - canvas.height = container_size.height(); - ctx2d = canvas.getContext('2d'); - ctx2d.lineWidth = 1; - - // on initialise la scène - scene = new THREE.Scene(); - raycaster = new THREE.Raycaster(); - - // Create stats counter - stats = new Stats(); - stats.setMode(0); - - stats.domElement.style.position = 'absolute'; - stats.domElement.style.cssFloat = "top-left"; - container.appendChild( stats.domElement ); - container.appendChild(canvas); - container.appendChild(renderer.domElement); - - // init light - var directional_light = new THREE.DirectionalLight(0xdddddd); - directional_light.position.set(1, 2.5, 1).normalize(); - directional_light.castShadow = false; - scene.add(directional_light); - - var ambient_light = new THREE.AmbientLight(0x444444); - scene.add(ambient_light); - - // on initialise la camera que l’on place ensuite sur la scène - var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container); - camera1.speed = 0.001; - camera1.reset(); - camera1.save(); - scene.add(camera1); - cameras.push(camera1); - - var loader = new THREE.OBJMTLLoader(); - - var onProgress = function ( xhr ) { - if ( xhr.lengthComputable ) { - var percentComplete = xhr.loaded / xhr.total * 100; - console.log( Math.round(percentComplete, 2) + '% downloaded' ); - } - }; - - var onError = function ( xhr ) { - }; - - // THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); - var loader = new THREE.OBJMTLLoader(); - - - loader.load( static_path + 'data/castle/princess peaches castle (outside).obj', - static_path + 'data/castle/princess peaches castle (outside).mtl', - function ( object ) { - object.up = new THREE.Vector3(0,0,1); - scene.add(object); - collidableObjects.push(object); - object.traverse(function (object) { - if (object instanceof THREE.Mesh) { - object.geometry.mergeVertices(); - object.geometry.computeVertexNormals(); - object.material.side = THREE.DoubleSide; - object.raycastable = true; - if (object.material.name === 'Material.103_princess_peaches_cast') { - object.material.transparent = true; - } - } - }); - }, onProgress, onError ); - - loader.load( static_path + 'data/first/Floor 1.obj', - static_path + 'data/first/Floor 1.mtl', - function ( object ) { - object.position.z -= 10.9; - object.position.y += 0.555; - object.position.x += 3.23; - - var theta = 0.27; - object.rotation.y = Math.PI - theta; - - object.up = new THREE.Vector3(0,0,1); - scene.add(object); - collidableObjects.push(object); - object.traverse(function (object) { - if (object instanceof THREE.Mesh) { - object.material.side = THREE.DoubleSide; - // object.geometry.mergeVertices(); - // object.geometry.computeVertexNormals(); - object.raycastable = true; - if (object.material.name === 'Material.054_777F0E0B_c.bmp' || - object.material.name === 'Material.061_5C3492AB_c.bmp' ) { - object.material.transparent = true; - } - } - }); - }, onProgress, onError ); - - // loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj', - // static_path + 'data/bobomb/bobomb battlefeild.mtl', - // function ( object ) { - // // object.position.z -= 10.9; - // // object.position.y += 0.555; - // // object.position.x += 3.23; - - // var theta = 0.27; - // object.rotation.y = Math.PI - theta; - - // object.up = new THREE.Vector3(0,0,1); - // collidableObjects.push(object); - // scene.add(object); - // object.traverse(function (object) { - // if (object instanceof THREE.Mesh) { - // object.material.side = THREE.DoubleSide; - // console.log(object.geometry.vertices.length); - // object.geometry.mergeVertices(); - // object.geometry.computeVertexNormals(); - // if (object.material.name === 'Material.071_574B138E_c.bmp' || - // object.material.name === 'Material.070_41A41EE3_c.bmp') { - // object.material.transparent = true; - // } - - // } - // }); - // }, onProgress, onError ); - - // loader.load( static_path + 'data/star/GrandStar.obj', - // static_path + 'data/star/GrandStar.mtl', - // function ( object ) { - // object.position.z -= 10.9; - // object.position.y += 0.555; - // object.position.x += 3.23; - - // var theta = 0.27; - // object.rotation.y = Math.PI - theta; - - // object.up = new THREE.Vector3(0,0,1); - // scene.add(object); - // collidableObjects.push(object); - // object.traverse(function (object) { - // if (object instanceof THREE.Mesh) { - // object.scale.set(0.005,0.005,0.005); - // object.position.x = 13; - // object.position.z = -35; - // object.position.y = 30; - - // object.rotation.z = Math.PI/2; - // object.rotation.x = Math.PI/2; - // object.rotation.y = Math.PI; - // object.material.side = THREE.DoubleSide; - // object.geometry.mergeVertices(); - // object.geometry.computeVertexNormals(); - // object.raycastable = true; - // } - // }); - // }, onProgress, onError ); - - createCamera( - new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533), - new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852) - ); - - createCamera( - new THREE.Vector3(4.659399030971226, 1.018674883050052597, -2.578139604982815), - new THREE.Vector3(-16.08800293200113, -28.8795632312717, -19.165379404919797) - ); - - createCamera( - new THREE.Vector3(2.625389073616235, 1.2252620948239699, -4.818718135555419), - new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813) - ); - - createCamera( - new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783), - new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774) - ); - - createCamera( - new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845), - new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945) - ); - - createCamera( - new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124), - new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961) - ); - - window.addEventListener('resize', onWindowResize, false); - - container.addEventListener('mousedown', function(event) { if (event.which == 1) click(event); }, false); - container.addEventListener('mousemove', updateMouse, false); - document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); - - camera1.collidableObjects = collidableObjects; - - // Load the scene - loadScene(); - - -} - -function fullscreen() { - - if (!beenFullscreen) { - beenFullscreen = true; - alert('To quit fullscren mode, type ESC key'); - } - - container.style.position = "absolute"; - container.style.cssFloat = "top-left"; - container.style.top = "0px"; - container.style.bottom = "0px"; - container.style.left = "0px"; - container.style.right = "0px"; - container.style.width=""; - container.style.height=""; - container.style.overflow = "hidden"; - - canvas.style.position = "absolute"; - canvas.style.cssFloat = "top-left"; - canvas.style.top = "0px"; - canvas.style.bottom = "0px"; - canvas.style.left = "0px"; - canvas.style.right = "0px"; - canvas.width=window.innerWidth; - canvas.height=window.innerHeight; - canvas.style.overflow = "hidden"; - - onWindowResize(); -} - -function stopFullscreen() { - container.style.position = ""; - container.style.cssFloat = ""; - container.style.width = container_size.width() + "px"; - container.style.height = container_size.height() + "px"; - container.style.overflow = ""; - - // canvas.style.position = ""; - // canvas.style.cssFloat = ""; - canvas.style.top = ""; - canvas.style.bottom = ""; - canvas.style.left = ""; - canvas.style.right = ""; - canvas.width = container_size.width(); - canvas.height = container_size.height(); - // canvas.style.overflow = ""; - - onWindowResize(); -} - -function log() { - console.log(container.style.width); -} - -function createCamera(position, target) { - var camera = new FixedCamera( - 50, - container_size.width() / container_size.height(), - 1, - 100000, - position, - target - ); - - camera.addToScene(scene); - cameras.push(camera); - -} - -function loadScene() { - -} - -function render() { - updateMouse(); - - var transform = showArrows ? show : hide; - cameras.map(function(camera) { - if (camera instanceof FixedCamera) { - transform(camera); - - camera.traverse(function(elt) { - elt.raycastable = showArrows; - }); - } - }); - - cameras.updateMainCamera(); - cameras.update(cameras.mainCamera()); - cameras.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()); - - // Clear canvas - canvas.width = canvas.width; - - width = container_size.width() / 5; - height = container_size.height() / 5; - left = prev.x - width/2; - bottom = renderer.domElement.height - prev.y + height/5; - - if (prev.go) { - // Hide arrows - cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); }); - - width = Math.floor(container_size.width() / 5); - height = Math.floor(container_size.height() / 5); - left = Math.floor(prev.x - width/2); - bottom = Math.floor(renderer.domElement.height - prev.y + height/5); - - - // Draw border - var can_bottom = container_size.height() - bottom - height ; - ctx2d.strokeStyle = "#ffffff"; - ctx2d.beginPath(); - ctx2d.moveTo(left-1, can_bottom); - ctx2d.lineTo(left-1, can_bottom + height); - ctx2d.lineTo(left + width-1, can_bottom + height); - ctx2d.lineTo(left + width-1, can_bottom); - ctx2d.closePath(); - ctx2d.stroke(); - - ctx2d.strokeStyle = "#000000"; - ctx2d.beginPath(); - ctx2d.moveTo(left, can_bottom + 1); - ctx2d.lineTo(left, can_bottom + height - 1); - ctx2d.lineTo(left + width - 2 , can_bottom + height-1); - ctx2d.lineTo(left + width - 2, can_bottom+1); - ctx2d.closePath(); - ctx2d.stroke(); - - // Do render in previsualization - prev.camera.look(); - renderer.setScissor(left, bottom, width, height); - renderer.enableScissorTest (true); - renderer.setViewport(left, bottom, width, height); - renderer.render(scene, prev.camera); - } -} - -function animate() { - // on appelle la fonction animate() récursivement à chaque frame - requestAnimationFrame(animate); - - stats.begin(); - render(); - stats.end(); -} - -function onWindowResize() { - - container.style.width = container_size.width() + "px"; - container.style.height = container_size.height() + "px"; - - canvas.width = container_size.width(); - canvas.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();}); - render(); -} - -function hide(object) { - object.traverse(function(object) {object.visible = false;}); -} - -function show(object) { - object.traverse(function(object) {object.visible = true;}); -} - -function updateMouse(event) { - - if (event !== undefined) { - mouse.x = event.offsetX == undefined ? event.layerX : event.offsetX; - mouse.y = event.offsetY == undefined ? event.layerY : event.offsetY; - } - - var hovered = pointedCamera(event); - - if (hovered !== undefined) { - prev.x = mouse.x; - prev.y = mouse.y; - prev.camera = hovered; - prev.go = true; - } else { - prev.go = false; - } -} - -function click(event) { - var newCamera = pointedCamera(event); - if (newCamera !== undefined) { - cameras.mainCamera().moveHermite(newCamera); - updateElements(); - } -} - -function pointedCamera(event) { - var returnCamera; - - var x = ( mouse.x / renderer.domElement.width ) * 2 - 1; - var y = - (mouse.y / renderer.domElement.height) * 2 + 1; - - var camera = cameras.mainCamera(); - - var vector = new THREE.Vector3(x, y, 0.5); - vector.unproject(camera); - - raycaster.set(camera.position, vector.sub(camera.position).normalize()); - - var intersects = raycaster.intersectObjects(scene.children, true); - - if ( intersects.length > 0 ) { - var minDistance; - var bestIndex; - - // Looking for cameras - for (i in intersects) { - if (intersects[i].object.raycastable) { - if ((intersects[i].distance > 0.5 && minDistance === undefined) || (intersects[i].distance < minDistance )) { - if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) { - minDistance = intersects[i].distance; - bestIndex = i; - } - } - } - } - - if (bestIndex !== undefined) { - if (cameras.getById(intersects[bestIndex].object.parent.id) !== undefined) { - return cameras.getById(intersects[bestIndex].object.parent.id); - } - } - } -} diff --git a/static/js/prototype/initScene.js b/static/js/prototype/initScene.js new file mode 100644 index 0000000..ac2b888 --- /dev/null +++ b/static/js/prototype/initScene.js @@ -0,0 +1,187 @@ +// Define Recommendation if not defined +var Recommendation = Recommendation || FixedCamera; + +function initPeachCastle(scene, collidableObjects, loader, static_path) { + // Create loader if not already done + if (loader === undefined) { + loader = new THREE.OBJMTLLoader(); + } + + // Try to guess the path to static files + if (static_path === undefined) { + static_path = "/static/"; + } + + loader.load( + static_path + 'data/castle/princess peaches castle (outside).obj', + static_path + 'data/castle/princess peaches castle (outside).mtl', + function ( object ) { + object.up = new THREE.Vector3(0,0,1); + scene.add(object); + collidableObjects.push(object); + object.traverse(function (object) { + if (object instanceof THREE.Mesh) { + object.geometry.mergeVertices(); + object.geometry.computeVertexNormals(); + object.material.side = THREE.DoubleSide; + object.raycastable = true; + if (object.material.name === 'Material.103_princess_peaches_cast') { + object.material.transparent = true; + } + } + }); + } + ); + + loader.load( + static_path + 'data/first/Floor 1.obj', + static_path + 'data/first/Floor 1.mtl', + function ( object ) { + object.position.z -= 10.9; + object.position.y += 0.555; + object.position.x += 3.23; + + var theta = 0.27; + object.rotation.y = Math.PI - theta; + + object.up = new THREE.Vector3(0,0,1); + scene.add(object); + collidableObjects.push(object); + object.traverse(function (object) { + if (object instanceof THREE.Mesh) { + object.material.side = THREE.DoubleSide; + object.geometry.mergeVertices(); + object.geometry.computeVertexNormals(); + object.raycastable = true; + if (object.material.name === 'Material.054_777F0E0B_c.bmp' || + object.material.name === 'Material.061_5C3492AB_c.bmp' ) { + object.material.transparent = true; + } + } + }); + } + ); +} + + +function createPeachCameras(width, height) { + var cams = []; + + var createCamera = function(position, target) { + return new Recommendation( + 50, + width / height, + 1, + 100000, + position, + target + ); + } + + cams.push(createCamera( + new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533), + new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852) + )); + + cams.push(createCamera( + new THREE.Vector3(4.659399030971226, 1.018674883050052597, -2.578139604982815), + new THREE.Vector3(-16.08800293200113, -28.8795632312717, -19.165379404919797) + )); + + cams.push(createCamera( + new THREE.Vector3(2.625389073616235, 1.2252620948239699, -4.818718135555419), + new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813) + )); + + cams.push(createCamera( + new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783), + new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774) + )); + + cams.push(createCamera( + new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845), + new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945) + )); + + cams.push(createCamera( + new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124), + new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961) + )); + + return cams; +} + +function initBobombScene(scene, loader, static_path) { + // Create loader if not already done + if (loader === undefined) { + loader = new THREE.OBJMTLLoader(); + } + + // Try to guess the path to static files + if (static_path === undefined) { + static_path = "/static/"; + } + + loader.load( + static_path + 'data/bobomb/bobomb battlefeild.obj', + static_path + 'data/bobomb/bobomb battlefeild.mtl', + function ( object ) { + // object.position.z -= 10.9; + // object.position.y += 0.555; + // object.position.x += 3.23; + + var theta = 0.27; + object.rotation.y = Math.PI - theta; + + object.up = new THREE.Vector3(0,0,1); + collidableObjects.push(object); + scene.add(object); + object.traverse(function (object) { + if (object instanceof THREE.Mesh) { + object.material.side = THREE.DoubleSide; + console.log(object.geometry.vertices.length); + object.geometry.mergeVertices(); + object.geometry.computeVertexNormals(); + if (object.material.name === 'Material.071_574B138E_c.bmp' || + object.material.name === 'Material.070_41A41EE3_c.bmp') { + object.material.transparent = true; + } + + } + }); + } + ); + + loader.load( + static_path + 'data/star/GrandStar.obj', + static_path + 'data/star/GrandStar.mtl', + function ( object ) { + object.position.z -= 10.9; + object.position.y += 0.555; + object.position.x += 3.23; + + var theta = 0.27; + object.rotation.y = Math.PI - theta; + + object.up = new THREE.Vector3(0,0,1); + scene.add(object); + collidableObjects.push(object); + object.traverse(function (object) { + if (object instanceof THREE.Mesh) { + object.scale.set(0.005,0.005,0.005); + object.position.x = 13; + object.position.z = -35; + object.position.y = 30; + + object.rotation.z = Math.PI/2; + object.rotation.x = Math.PI/2; + object.rotation.y = Math.PI; + object.material.side = THREE.DoubleSide; + object.geometry.mergeVertices(); + object.geometry.computeVertexNormals(); + object.raycastable = true; + } + }); + } + ); +} diff --git a/static/js/prototype/main.js b/static/js/prototype/main.js new file mode 100644 index 0000000..f92726e --- /dev/null +++ b/static/js/prototype/main.js @@ -0,0 +1,253 @@ +var mesh_number = 25; +var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}; +var bigmesh; +var raycaster; +var objects = []; +var cameras, cameraSelecter; +var spheres = new Array(mesh_number); +var visible = 0; +var stats; +var previewer; + +var loader; + +var main_section = document.getElementById('main-section'); +var offset = function() { + return + document.getElementById('nav').offsetHeight + + document.getElementById('main-div').offsetHeight; +} + +console.log(document.getElementById('main-div').offsetHeight); +var container_size = { + width: function() { return main_section.clientWidth; }, + height: function() { + return main_section.clientHeight + - document.getElementById('nav').offsetHeight + - document.getElementById('main-div').offsetHeight; + } +}; + +console.log(container_size.width(), container_size.height()); + +init(); +animate(); + +function init() { + // Collidable objects to prevent camera from traversing objects + var collidableObjects = new Array(); + + // Initialize renderer + container = document.getElementById('container'); + container.style.height = container_size.height() + 'px'; + container.style.width = container_size.width() + 'px'; + renderer = new THREE.WebGLRenderer({alpha:true, antialias:true}); + renderer.setSize(container_size.width(), container_size.height()); + // renderer.setSize(container_size.width(), container_size.height()); + renderer.shadowMapEnabled = true; + renderer.setClearColor(0x87ceeb); + + // Initialize previewer + previewer = new Previewer(renderer); + previewer.domElement.style.position ="absolute"; + previewer.domElement.style.cssFloat = 'top-left'; + previewer.domElement.width = container_size.width(); + previewer.domElement.height = container_size.height(); + + // Initialize scene + scene = new THREE.Scene(); + + // Initialize stats counter + stats = new Stats(); + stats.setMode(0); + stats.domElement.style.position = 'absolute'; + stats.domElement.style.cssFloat = "top-left"; + + // Add elements to page + container.appendChild( stats.domElement ); + container.appendChild(previewer.domElement); + container.appendChild(renderer.domElement); + + // init light + var directional_light = new THREE.DirectionalLight(0xdddddd); + directional_light.position.set(1, 2.5, 1).normalize(); + directional_light.castShadow = false; + scene.add(directional_light); + + var ambient_light = new THREE.AmbientLight(0x444444); + scene.add(ambient_light); + + // Initialize pointer camera + var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container); + camera1.speed = 0.001; + camera1.reset(); + camera1.save(); + scene.add(camera1); + + // Collisions + camera1.collidableObjects = collidableObjects; + + + // Initialize recommendations + var otherCams = createPeachCameras(container_size.width(), container_size.height()); + cameras = new CameraContainer(camera1, otherCams); + otherCams.forEach(function(cam) { cam.addToScene(scene); }); + + // Initalize loader + var loader = new THREE.OBJMTLLoader(); + + // Load scene + initPeachCastle(scene, collidableObjects, loader, static_path); + + // Add listeners + initListeners(); +} + +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); + }, false + ); + + // Escape key to exit fullscreen mode + document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); + + // HTML Bootstrap buttons + buttonManager = new ButtonManager(cameras); + + // Camera selecter for hover and clicking recommendations + cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager); +} + +function fullscreen() { + + if (!beenFullscreen) { + beenFullscreen = true; + alert('To quit fullscren mode, type ESC key'); + } + + container.style.position = "absolute"; + container.style.cssFloat = "top-left"; + container.style.top = "0px"; + container.style.bottom = "0px"; + container.style.left = "0px"; + container.style.right = "0px"; + container.style.width=""; + container.style.height=""; + container.style.overflow = "hidden"; + + canvas.style.position = "absolute"; + canvas.style.cssFloat = "top-left"; + canvas.style.top = "0px"; + canvas.style.bottom = "0px"; + canvas.style.left = "0px"; + canvas.style.right = "0px"; + canvas.width=window.innerWidth; + canvas.height=window.innerHeight; + canvas.style.overflow = "hidden"; + + onWindowResize(); +} + +function stopFullscreen() { + container.style.position = ""; + container.style.cssFloat = ""; + container.style.width = container_size.width() + "px"; + container.style.height = container_size.height() + "px"; + container.style.overflow = ""; + + // canvas.style.position = ""; + // canvas.style.cssFloat = ""; + canvas.style.top = ""; + canvas.style.bottom = ""; + canvas.style.left = ""; + canvas.style.right = ""; + canvas.width = container_size.width(); + canvas.height = container_size.height(); + // canvas.style.overflow = ""; + + onWindowResize(); +} + +function render() { + cameraSelecter.update(); + + // Update recommendations (set raycastable if shown) + var transform = buttonManager.showArrows ? show : hide; + cameras.map(function(camera) { + if (camera instanceof Recommendation) { + transform(camera); + + camera.traverse(function(elt) { + elt.raycastable = buttonManager.showArrows; + }); + } + }); + + // Update main camera + cameras.updateMainCamera(); + + // Update the recommendations + cameras.update(cameras.mainCamera()); + + // Set current position of camera + cameras.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()); + + // Remove borders of preview + previewer.clear(); + + // Hide arrows in recommendation + cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); }); + + // Render preview + previewer.render(cameraSelecter.prev, container_size.width(), container_size.height()); +} + +function animate() { + // Render each frame + requestAnimationFrame(animate); + + // stats count the number of frames per second + stats.begin(); + render(); + stats.end(); +} + +function onWindowResize() { + + container.style.width = container_size.width() + "px"; + container.style.height = container_size.height() + "px"; + + previewer.domElement.width = container_size.width(); + 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();}); + render(); +} + +function hide(object) { + object.traverse(function(object) {object.visible = false;}); +} + +function show(object) { + object.traverse(function(object) {object.visible = true;}); +} + diff --git a/static/js/prototype/raycasterTools.js b/static/js/prototype/raycasterTools.js new file mode 100644 index 0000000..dcca7cb --- /dev/null +++ b/static/js/prototype/raycasterTools.js @@ -0,0 +1,80 @@ +var CameraSelecter = function(renderer, cameras, buttonManager) { + this.raycaster = new THREE.Raycaster(); + this.renderer = renderer; + this.mouse = {}; + this.cameras = cameras; + this.prev = {}; + this.buttonManager = buttonManager; +} + +CameraSelecter.prototype.pointedCamera = function() { + var returnCamera; + + var x = ( this.mouse.x / renderer.domElement.width ) * 2 - 1; + var y = - (this.mouse.y / renderer.domElement.height) * 2 + 1; + + var camera = this.cameras.mainCamera(); + + var vector = new THREE.Vector3(x, y, 0.5); + vector.unproject(camera); + + this.raycaster.set(camera.position, vector.sub(camera.position).normalize()); + + var intersects = this.raycaster.intersectObjects(scene.children, true); + + if ( intersects.length > 0 ) { + var minDistance; + var bestIndex; + + // Looking for cameras + for (i in intersects) { + if (intersects[i].object.raycastable && !(intersects[i].object instanceof THREE.Line)) { + if ((intersects[i].distance > 0.5 && minDistance === undefined) || (intersects[i].distance < minDistance )) { + if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) { + minDistance = intersects[i].distance; + bestIndex = i; + } + } + } + } + + if (bestIndex !== undefined) { + // if (this.cameras.getById(intersects[bestIndex].object.parent.id) !== undefined) { + var obj = intersects[bestIndex].object; + if (Recommendation === FixedCamera) { + console.log("toto"); + return this.cameras.getById(intersects[bestIndex].object.parent.id); + } else { + return this.cameras.getById(intersects[bestIndex].object.id); + console.log('tata'); + } + // } + } + } +} + +CameraSelecter.prototype.update = function(event) { + if (event !== undefined) { + this.mouse.x = event.offsetX == undefined ? event.layerX : event.offsetX; + this.mouse.y = event.offsetY == undefined ? event.layerY : event.offsetY; + } + + var hovered = this.pointedCamera(event); + + if (hovered !== undefined) { + this.prev.x = this.mouse.x; + this.prev.y = this.mouse.y; + this.prev.camera = hovered; + this.prev.go = true; + } else { + this.prev.go = false; + } +} + +CameraSelecter.prototype.click = function(event) { + var newCamera = this.pointedCamera(event); + if (newCamera !== undefined) { + this.cameras.mainCamera().moveHermite(newCamera); + buttonManager.updateElements(); + } +} diff --git a/static/js/prototype/viewports/main.js b/static/js/prototype/viewports/main.js deleted file mode 100644 index 7bafc21..0000000 --- a/static/js/prototype/viewports/main.js +++ /dev/null @@ -1,553 +0,0 @@ -var mesh_number = 25; -var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}; -var bigmesh; -var raycaster; -var objects = []; -var cameras = new CameraContainer(); -var spheres = new Array(mesh_number); -var visible = 0; -var stats; -var canvas; -var ctx2d; - -var loader; - -var main_section = document.getElementById('main-section'); -var offset = function() { - return - document.getElementById('nav').offsetHeight - + document.getElementById('main-div').offsetHeight; -} - -console.log(document.getElementById('main-div').offsetHeight); -var container_size = { - width: function() { return main_section.clientWidth; }, - height: function() { - return main_section.clientHeight - - document.getElementById('nav').offsetHeight - - document.getElementById('main-div').offsetHeight; - } -}; - -console.log(container_size.width(), container_size.height()); - -var prev = {x:0, y:0, go:false}; -var showArrows = true; -var beenFullscreen = false; - -var undoElement = document.getElementById('undo'); -var redoElement = document.getElementById('redo'); - -function updateElements() { - // Update icon - if (!cameras.mainCamera().undoable()) { - undoElement.className = "btn btn-default"; - } else { - undoElement.className = "btn btn-primary"; - } - - if (!cameras.mainCamera().redoable()) { - redoElement.className = "btn btn-default"; - } else { - redoElement.className = "btn btn-primary"; - } -} - -init(); -animate(); - -function init() { - // Collidable objects to prevent camera from traversing objects - var collidableObjects = new Array(); - - document.getElementById('full').onclick = fullscreen; - - // Add the listener on the button - document.getElementById('reset').onclick = function() { cameras.mainCamera().reset(); }; - var fullarrow = document.getElementById('fullarrow'); - fullarrow.onchange = function() { - cameras.map(function(camera) { - if (camera instanceof OldFixedCamera) { - camera.fullArrow = fullarrow.checked; - } - }); - } - - var collisions = document.getElementById('collisions'); - collisions.onchange = function() { - cameras.mainCamera().collisions = collisions.checked; - } - - var showarrows = document.getElementById('showarrows'); - showarrows.onchange = function() { - showArrows = showarrows.checked; - } - - undoElement.onclick = function() { - cameras.mainCamera().undo(); - updateElements(); - - } - - redoElement.onclick = function() { - cameras.mainCamera().redo(); - updateElements(); - } - - // on initialise le moteur de rendu - container = document.getElementById('container'); - container.style.height = container_size.height() + 'px'; - container.style.width = container_size.width() + 'px'; - renderer = new THREE.WebGLRenderer({alpha:true, antialias:true}); - renderer.setSize(container_size.width(), container_size.height()); - // renderer.setSize(container_size.width(), container_size.height()); - renderer.shadowMapEnabled = true; - renderer.setClearColor(0x87ceeb); - - canvas = document.createElement('canvas'); - canvas.style.position ="absolute"; - canvas.style.cssFloat = 'top-left'; - canvas.width = container_size.width(); - canvas.height = container_size.height(); - ctx2d = canvas.getContext('2d'); - ctx2d.lineWidth = 1; - - // on initialise la scène - scene = new THREE.Scene(); - raycaster = new THREE.Raycaster(); - - // Create stats counter - stats = new Stats(); - stats.setMode(0); - - stats.domElement.style.position = 'absolute'; - stats.domElement.style.cssFloat = "top-left"; - container.appendChild( stats.domElement ); - container.appendChild(canvas); - container.appendChild(renderer.domElement); - - // init light - var directional_light = new THREE.DirectionalLight(0xdddddd); - directional_light.position.set(1, 2.5, 1).normalize(); - directional_light.castShadow = false; - scene.add(directional_light); - - var ambient_light = new THREE.AmbientLight(0x444444); - scene.add(ambient_light); - - // on initialise la camera que l’on place ensuite sur la scène - var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container); - camera1.speed = 0.001; - camera1.reset(); - camera1.save(); - scene.add(camera1); - cameras.push(camera1); - - var loader = new THREE.OBJMTLLoader(); - - var onProgress = function ( xhr ) { - if ( xhr.lengthComputable ) { - var percentComplete = xhr.loaded / xhr.total * 100; - console.log( Math.round(percentComplete, 2) + '% downloaded' ); - } - }; - - var onError = function ( xhr ) { - }; - - // THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); - var loader = new THREE.OBJMTLLoader(); - - - loader.load( static_path + 'data/castle/princess peaches castle (outside).obj', - static_path + 'data/castle/princess peaches castle (outside).mtl', - function ( object ) { - object.up = new THREE.Vector3(0,0,1); - scene.add(object); - collidableObjects.push(object); - object.traverse(function (object) { - if (object instanceof THREE.Mesh) { - object.geometry.mergeVertices(); - object.geometry.computeVertexNormals(); - object.material.side = THREE.DoubleSide; - object.raycastable = true; - if (object.material.name === 'Material.103_princess_peaches_cast') { - object.material.transparent = true; - } - } - }); - }, onProgress, onError ); - - loader.load( static_path + 'data/first/Floor 1.obj', - static_path + 'data/first/Floor 1.mtl', - function ( object ) { - object.position.z -= 10.9; - object.position.y += 0.555; - object.position.x += 3.23; - - var theta = 0.27; - object.rotation.y = Math.PI - theta; - - object.up = new THREE.Vector3(0,0,1); - scene.add(object); - collidableObjects.push(object); - object.traverse(function (object) { - if (object instanceof THREE.Mesh) { - object.material.side = THREE.DoubleSide; - // object.geometry.mergeVertices(); - // object.geometry.computeVertexNormals(); - object.raycastable = true; - if (object.material.name === 'Material.054_777F0E0B_c.bmp' || - object.material.name === 'Material.061_5C3492AB_c.bmp' ) { - object.material.transparent = true; - } - } - }); - }, onProgress, onError ); - - // loader.load( static_path + 'data/bobomb/bobomb battlefeild.obj', - // static_path + 'data/bobomb/bobomb battlefeild.mtl', - // function ( object ) { - // // object.position.z -= 10.9; - // // object.position.y += 0.555; - // // object.position.x += 3.23; - - // var theta = 0.27; - // object.rotation.y = Math.PI - theta; - - // object.up = new THREE.Vector3(0,0,1); - // collidableObjects.push(object); - // scene.add(object); - // object.traverse(function (object) { - // if (object instanceof THREE.Mesh) { - // object.material.side = THREE.DoubleSide; - // console.log(object.geometry.vertices.length); - // object.geometry.mergeVertices(); - // object.geometry.computeVertexNormals(); - // if (object.material.name === 'Material.071_574B138E_c.bmp' || - // object.material.name === 'Material.070_41A41EE3_c.bmp') { - // object.material.transparent = true; - // } - - // } - // }); - // }, onProgress, onError ); - - // loader.load( static_path + 'data/star/GrandStar.obj', - // static_path + 'data/star/GrandStar.mtl', - // function ( object ) { - // object.position.z -= 10.9; - // object.position.y += 0.555; - // object.position.x += 3.23; - - // var theta = 0.27; - // object.rotation.y = Math.PI - theta; - - // object.up = new THREE.Vector3(0,0,1); - // scene.add(object); - // collidableObjects.push(object); - // object.traverse(function (object) { - // if (object instanceof THREE.Mesh) { - // object.scale.set(0.005,0.005,0.005); - // object.position.x = 13; - // object.position.z = -35; - // object.position.y = 30; - - // object.rotation.z = Math.PI/2; - // object.rotation.x = Math.PI/2; - // object.rotation.y = Math.PI; - // object.material.side = THREE.DoubleSide; - // object.geometry.mergeVertices(); - // object.geometry.computeVertexNormals(); - // object.raycastable = true; - // } - // }); - // }, onProgress, onError ); - - createCamera( - new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533), - new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852) - ); - - createCamera( - new THREE.Vector3(4.659399030971226, 1.018674883050052597, -2.578139604982815), - new THREE.Vector3(-16.08800293200113, -28.8795632312717, -19.165379404919797) - ); - - createCamera( - new THREE.Vector3(2.625389073616235, 1.2252620948239699, -4.818718135555419), - new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813) - ); - - createCamera( - new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783), - new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774) - ); - - createCamera( - new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845), - new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945) - ); - - createCamera( - new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124), - new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961) - ); - - window.addEventListener('resize', onWindowResize, false); - - container.addEventListener('mousedown', function(event) { if (event.which == 1) click(event); }, false); - container.addEventListener('mousemove', updateMouse, false); - document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); - - camera1.collidableObjects = collidableObjects; - - // Load the scene - loadScene(); - - -} - -function fullscreen() { - - if (!beenFullscreen) { - beenFullscreen = true; - alert('To quit fullscren mode, type ESC key'); - } - - container.style.position = "absolute"; - container.style.cssFloat = "top-left"; - container.style.top = "0px"; - container.style.bottom = "0px"; - container.style.left = "0px"; - container.style.right = "0px"; - container.style.width=""; - container.style.height=""; - container.style.overflow = "hidden"; - - canvas.style.position = "absolute"; - canvas.style.cssFloat = "top-left"; - canvas.style.top = "0px"; - canvas.style.bottom = "0px"; - canvas.style.left = "0px"; - canvas.style.right = "0px"; - canvas.width=window.innerWidth; - canvas.height=window.innerHeight; - canvas.style.overflow = "hidden"; - - onWindowResize(); -} - -function stopFullscreen() { - container.style.position = ""; - container.style.cssFloat = ""; - container.style.width = container_size.width() + "px"; - container.style.height = container_size.height() + "px"; - container.style.overflow = ""; - - // canvas.style.position = ""; - // canvas.style.cssFloat = ""; - canvas.style.top = ""; - canvas.style.bottom = ""; - canvas.style.left = ""; - canvas.style.right = ""; - canvas.width = container_size.width(); - canvas.height = container_size.height(); - // canvas.style.overflow = ""; - - onWindowResize(); -} - -function log() { - console.log(container.style.width); -} - -function createCamera(position, target) { - var camera = new OldFixedCamera( - 50, - container_size.width() / container_size.height(), - 1, - 100000, - position, - target - ); - - camera.addToScene(scene); - cameras.push(camera); - -} - -function loadScene() { - -} - -function render() { - updateMouse(); - - var transform = showArrows ? show : hide; - cameras.map(function(camera) { - if (camera instanceof OldFixedCamera) { - transform(camera); - - camera.traverse(function(elt) { - elt.raycastable = showArrows; - }); - } - }); - - cameras.updateMainCamera(); - cameras.update(cameras.mainCamera()); - cameras.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()); - - // Clear canvas - canvas.width = canvas.width; - - width = container_size.width() / 5; - height = container_size.height() / 5; - left = prev.x - width/2; - bottom = renderer.domElement.height - prev.y + height/5; - - if (prev.go) { - // Hide arrows - cameras.map(function(camera) { if (camera instanceof OldFixedCamera) hide(camera); }); - - width = Math.floor(container_size.width() / 5); - height = Math.floor(container_size.height() / 5); - left = Math.floor(prev.x - width/2); - bottom = Math.floor(renderer.domElement.height - prev.y + height/5); - - - // Draw border - var can_bottom = container_size.height() - bottom - height ; - ctx2d.strokeStyle = "#ffffff"; - ctx2d.beginPath(); - ctx2d.moveTo(left-1, can_bottom); - ctx2d.lineTo(left-1, can_bottom + height); - ctx2d.lineTo(left + width-1, can_bottom + height); - ctx2d.lineTo(left + width-1, can_bottom); - ctx2d.closePath(); - ctx2d.stroke(); - - ctx2d.strokeStyle = "#000000"; - ctx2d.beginPath(); - ctx2d.moveTo(left, can_bottom + 1); - ctx2d.lineTo(left, can_bottom + height - 1); - ctx2d.lineTo(left + width - 2 , can_bottom + height-1); - ctx2d.lineTo(left + width - 2, can_bottom+1); - ctx2d.closePath(); - ctx2d.stroke(); - - // Do render in previsualization - prev.camera.look(); - renderer.setScissor(left, bottom, width, height); - renderer.enableScissorTest (true); - renderer.setViewport(left, bottom, width, height); - renderer.render(scene, prev.camera); - } -} - -function animate() { - // on appelle la fonction animate() récursivement à chaque frame - requestAnimationFrame(animate); - - stats.begin(); - render(); - stats.end(); -} - -function onWindowResize() { - - container.style.width = container_size.width() + "px"; - container.style.height = container_size.height() + "px"; - - canvas.width = container_size.width(); - canvas.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();}); - render(); -} - -function hide(object) { - object.traverse(function(object) {object.visible = false;}); -} - -function show(object) { - object.traverse(function(object) {object.visible = true;}); -} - -function updateMouse(event) { - - if (event !== undefined) { - mouse.x = event.offsetX == undefined ? event.layerX : event.offsetX; - mouse.y = event.offsetY == undefined ? event.layerY : event.offsetY; - } - - var hovered = pointedCamera(event); - - if (hovered !== undefined) { - prev.x = mouse.x; - prev.y = mouse.y; - prev.camera = hovered; - prev.go = true; - } else { - prev.go = false; - } -} - -function click(event) { - var newCamera = pointedCamera(event); - if (newCamera !== undefined) { - cameras.mainCamera().move(newCamera); - updateElements(); - } -} - -function pointedCamera(event) { - var returnCamera; - - var x = ( mouse.x / renderer.domElement.width ) * 2 - 1; - var y = - (mouse.y / renderer.domElement.height) * 2 + 1; - - var camera = cameras.mainCamera(); - - var vector = new THREE.Vector3(x, y, 0.5); - vector.unproject(camera); - - raycaster.set(camera.position, vector.sub(camera.position).normalize()); - - var intersects = raycaster.intersectObjects(scene.children, true); - - if ( intersects.length > 0 ) { - var minDistance; - var bestIndex; - - - // Looking for cameras - for (i in intersects) { - if (! (intersects[i].object instanceof THREE.Line)) { - // if (intersects[i].object.raycastable) { - if ((intersects[i].distance > 0.5 && minDistance === undefined) || (intersects[i].distance < minDistance )) { - if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) { - minDistance = intersects[i].distance; - bestIndex = i; - } - } - // } - } - } - - if (bestIndex !== undefined) { - if (cameras.getById(intersects[bestIndex].object.id) !== undefined) { - return cameras.getById(intersects[bestIndex].object.id); - } - } - } -} diff --git a/views/withjs.jade b/views/withjs.jade index cdc0e2b..2e71372 100644 --- a/views/withjs.jade +++ b/views/withjs.jade @@ -8,7 +8,7 @@ block js script(src="/static/js/three/MTLLoader.js") script(src="/static/js/three/OBJLoader.js") script(src="/static/js/three/OBJMTLLoader.js") - script(src="/static/js/three/OrbitControls.js") + -//script(src="/static/js/three/OrbitControls.js") script(src="/static/js/Cube.js") script(src="/static/js/ProgressiveSphere.js") script(src="/static/js/Camera.js")