diff --git a/prototype/js/main.js b/prototype/js/main.js index e7c03b7..8d08400 100644 --- a/prototype/js/main.js +++ b/prototype/js/main.js @@ -11,6 +11,7 @@ var stats; var loader; var container_size = {width: 1067, height: 600}; +var prev = {x:0, y:0, go:false}; init(); animate(); @@ -160,8 +161,8 @@ function init() { ); createCamera( - new THREE.Vector3(4.659399030971226, 0.018674883050052597, -2.578139604982815), - new THREE.Vector3(-24.57865295128155, -14.475635296016854, -25.70931529313326) + new THREE.Vector3(4.659399030971226, 1.018674883050052597, -2.578139604982815), + new THREE.Vector3(-16.08800293200113, -28.8795632312717, -19.165379404919797) ); createCamera( @@ -187,6 +188,7 @@ function init() { window.addEventListener('resize', onWindowResize, false); container.addEventListener('mousedown', click, false); + container.addEventListener('mousemove', mouseMove, false); camera1.collidableObjects = collidableObjects; @@ -215,16 +217,41 @@ function loadScene() { } +function render() { + cameras.map(function(camera) { if (camera instanceof FixedCamera) show(camera); }); + cameras.updateMainCamera(); + cameras.update(cameras.mainCamera()); + cameras.look(); + + var left = 0, bottom = 0, width = container.offsetWidth, height = container.offsetHeight; + renderer.setScissor(left, bottom, width, height); + renderer.enableScissorTest(true); + renderer.setViewport(left, bottom, width, height); + renderer.render(scene, cameras.mainCamera()); + + if (prev.go) { + // Hide arrows + cameras.map(function(camera) { if (camera instanceof FixedCamera) hide(camera); }); + + width = container.offsetWidth / 5; + height = container.offsetHeight / 5; + left = prev.x - width/2; + bottom = prev.y + height/5; + + 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(); - cameras.updateMainCamera(); - cameras.update(cameras.mainCamera()); - cameras.look(); - - renderer.render(scene, cameras.mainCamera()); + render(); stats.end(); } @@ -233,7 +260,7 @@ function onWindowResize() { cameras.forEach(function(camera) {camera.updateProjectionMatrix();}); renderer.setSize(container.offsetWidth, container.offsetHeight); - renderer.render(scene, cameras.mainCamera()); + render(); } function hide(object) { @@ -244,18 +271,35 @@ function show(object) { object.traverse(function(object) {object.visible = true;}); } +function mouseMove(event) { + var hovered = pointedCamera(event); + + if (hovered !== undefined) { + prev.x = event.clientX - renderer.domElement.offsetLeft; + prev.y = container.offsetHeight - (event.clientY - renderer.domElement.offsetTop); + prev.camera = hovered; + prev.go = true; + } else { + prev.go = false; + } +} + function click(event) { + var newCamera = pointedCamera(event); + if (newCamera !== undefined) + cameras.mainCamera().move(newCamera); +} + +function pointedCamera(event) { + var returnCamera; + var mouse = { x: ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1, y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1 } - // Show all cameras - // cameras.map(show); - var camera = cameras.mainCamera(); - var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); vector.unproject(camera); @@ -282,24 +326,8 @@ function click(event) { if (bestIndex !== undefined) { if (cameras.getById(intersects[bestIndex].object.parent.id) !== undefined) { - var new_camera = cameras.getById(intersects[bestIndex].object.parent.id); - // hide(new_camera); - cameras.mainCamera().move(new_camera); - } - } - - // Looking for objects - for (o in objects) { - if ( intersects[bestIndex].object.id == objects[o].id && cameras.get(objects[o].seen_by[0]) !== undefined) { - var new_camera = cameras.get(objects[o].seen_by[0]); - cameras.mainCamera().move(new_camera); - break; + return cameras.getById(intersects[bestIndex].object.parent.id); } } } - - // var pos = cameras.mainCamera().position; - // var target = cameras.mainCamera().target - // console.log("Position = ", pos.x, pos.y, pos.z); - // console.log("Target = ", target.x, target.y, target.z); }