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")