A hell of a lot cleaning
This commit is contained in:
Thomas FORGIONE
36
js/l3d/apps/bouncing-cube/BouncingCube.js
Normal file
36
js/l3d/apps/bouncing-cube/BouncingCube.js
Normal file
@@ -0,0 +1,36 @@
|
||||
var BouncingCube = function(size, style) {
|
||||
Cube.call(this, size, style);
|
||||
|
||||
this.fixed_center = new THREE.Vector3();
|
||||
this.center = new THREE.Vector3();
|
||||
|
||||
this.speed = new THREE.Vector3(0,0,300);
|
||||
};
|
||||
BouncingCube.prototype = Object.create(Cube.prototype);
|
||||
BouncingCube.prototype.constructor = BouncingCube;
|
||||
|
||||
BouncingCube.prototype.update = function() {
|
||||
// Compute new center
|
||||
var speed_clone = this.speed.clone();
|
||||
speed_clone.multiply(BouncingCube.DT);
|
||||
|
||||
this.speed.add(BouncingCube.G);
|
||||
|
||||
if (this.speed.dot(this.speed) > 100) {
|
||||
this.center.add(speed_clone);
|
||||
}
|
||||
|
||||
if (this.center.z < 0) {
|
||||
this.speed.multiply(BouncingCube.FRICTION);
|
||||
this.center.z = 0;
|
||||
}
|
||||
|
||||
// Update the mesh
|
||||
this.mesh.position.set(this.center.x, this.center.y, this.center.z);
|
||||
};
|
||||
|
||||
// Static variables
|
||||
BouncingCube.DT = new THREE.Vector3(0.1,0.1,0.1);
|
||||
BouncingCube.FRICTION = new THREE.Vector3(1, 1, -0.5);
|
||||
BouncingCube.G = new THREE.Vector3(0,0,-10);
|
||||
|
||||
100
js/l3d/apps/bouncing-cube/main.js
Normal file
100
js/l3d/apps/bouncing-cube/main.js
Normal file
@@ -0,0 +1,100 @@
|
||||
var renderer, scene, camera, controls, cube, container, plane, mouse= {x:0, y:0};
|
||||
var raycaster;
|
||||
var objects = [];
|
||||
var container_size = {};
|
||||
var previousTime;
|
||||
container_size.width = 1067;
|
||||
container_size.height = 600;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// 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"});
|
||||
renderer.setSize(container_size.width, container_size.height);
|
||||
renderer.shadowMapEnabled = true;
|
||||
document.getElementById('container').appendChild(renderer.domElement);
|
||||
|
||||
// on initialise la scène
|
||||
scene = new THREE.Scene();
|
||||
raycaster = new THREE.Raycaster();
|
||||
|
||||
// init light
|
||||
var directional_light = new THREE.DirectionalLight(0xffffff);
|
||||
directional_light.position.set(1, 0.5, 1).normalize();
|
||||
directional_light.castShadow = true;
|
||||
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
|
||||
camera = new Camera(50, container_size.width / container_size.height, 1, 10000);
|
||||
scene.add(camera);
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
container.addEventListener('mousedown', click, false);
|
||||
|
||||
// on créé un cube au quel on définie un matériau puis on l’ajoute à la scène
|
||||
cube = new BouncingCube(200, {color: "red"});
|
||||
plane = new Plane(1000,1000);
|
||||
plane.translate(0,0,-100);
|
||||
|
||||
cube.addToScene(scene);
|
||||
plane.addToScene(scene);
|
||||
|
||||
objects.push(cube);
|
||||
objects.push(plane);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// on appelle la fonction animate() récursivement à chaque frame
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
cube.update();
|
||||
|
||||
var currentTime = Date.now() - previousTime;
|
||||
camera.update(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
camera.look();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = container.offsetWidth / container.offsetHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(container.offsetWidth, container.offsetHeight);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function click(event) {
|
||||
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
|
||||
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
// For this alternate method, set the canvas position *fixed*; set top > 0, set left > 0; padding must be 0; margin > 0 is OK
|
||||
//mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
|
||||
//mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;
|
||||
|
||||
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
|
||||
vector.unproject(camera);
|
||||
|
||||
raycaster.set(camera.position, vector.sub(camera.position).normalize());
|
||||
|
||||
intersects = raycaster.intersectObjects(scene.children);
|
||||
|
||||
if ( intersects.length > 0 ) {
|
||||
for (var i in intersects) {
|
||||
if (intersects[i].object.id === cube.mesh.id) {
|
||||
cube.speed.z = 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
js/l3d/apps/multisphere/main.js
Normal file
121
js/l3d/apps/multisphere/main.js
Normal file
@@ -0,0 +1,121 @@
|
||||
var mesh_number = 25;
|
||||
var renderer, scene, camera, controls, cube, container, plane, mouse= {x:0, y:0};
|
||||
var raycaster;
|
||||
var objects = [];
|
||||
var spheres = new Array(mesh_number);
|
||||
var visible = 0;
|
||||
|
||||
var loader, previousTime;
|
||||
|
||||
var container_size = {};
|
||||
container_size.width = 1067;
|
||||
container_size.height = 600;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function loadSphere(i) {
|
||||
loader.load('/static/data/spheres/' + (i+1) + '.obj', function (object) {
|
||||
object.traverse(function (child) {
|
||||
if (child instanceof THREE.Mesh ) {
|
||||
child.material.color.setHex(0xff0000);
|
||||
child.up = new THREE.Vector3(0,0,1);
|
||||
child.geometry.computeFaceNormals();
|
||||
child.geometry.computeVertexNormals();
|
||||
}
|
||||
});
|
||||
spheres[i] = object;
|
||||
scene.add(object);
|
||||
if (i !== 0)
|
||||
hide(object);
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
// 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"});
|
||||
renderer.setSize(container_size.width, container_size.height);
|
||||
renderer.shadowMapEnabled = true;
|
||||
document.getElementById('container').appendChild(renderer.domElement);
|
||||
|
||||
// on initialise la scène
|
||||
scene = new THREE.Scene();
|
||||
raycaster = new THREE.Raycaster();
|
||||
|
||||
// init light
|
||||
var directional_light = new THREE.DirectionalLight(0xffffff);
|
||||
directional_light.position.set(1, 0.5, 1).normalize();
|
||||
directional_light.castShadow = true;
|
||||
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
|
||||
camera = new Camera(50, container_size.width / container_size.height, 1, 10000);
|
||||
scene.add(camera);
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
container.addEventListener('mousedown', click, false);
|
||||
|
||||
// Création d'un objloader
|
||||
loader = new THREE.OBJLoader();
|
||||
|
||||
for (var i = 0; i < mesh_number; i++) {
|
||||
|
||||
loadSphere(i);
|
||||
|
||||
}
|
||||
|
||||
|
||||
plane = new Plane(1000,1000);
|
||||
plane.translate(0,0,-100);
|
||||
plane.addToScene(scene);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// on appelle la fonction animate() récursivement à chaque frame
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
var currentTime = Date.now() - previousTime;
|
||||
camera.update(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
|
||||
camera.look();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = container.offsetWidth / container.offsetHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(container.offsetWidth, container.offsetHeight);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function click(event) {
|
||||
++visible;
|
||||
visible %= spheres.length;
|
||||
|
||||
console.log('Mesh ', visible + 1, ' out of ', spheres.length, ' : ', spheres[visible].children[0].geometry.attributes.position.array.length, ' vertices (with duplication...)');
|
||||
|
||||
// hide everything except visible
|
||||
for (var i in spheres)
|
||||
{
|
||||
hide(spheres[i]);
|
||||
}
|
||||
show(spheres[visible]);
|
||||
}
|
||||
|
||||
function hide(object) {
|
||||
object.traverse(function ( object ) { object.visible = false; } );
|
||||
}
|
||||
|
||||
function show(object) {
|
||||
object.traverse(function ( object ) { object.visible = true; } );
|
||||
}
|
||||
67
js/l3d/apps/prototype/ButtonManager.js
vendored
Normal file
67
js/l3d/apps/prototype/ButtonManager.js
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
var ButtonManager = function(cameras, previewer) {
|
||||
this.cameras = cameras;
|
||||
this.previewer = previewer;
|
||||
|
||||
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.pointerLockElement = document.getElementById('lock');
|
||||
this.showarrowsElement = document.getElementById('showarrows');
|
||||
|
||||
this.recommendationElement = document.getElementById('recommendation');
|
||||
|
||||
this.fullscreenElement.onclick = function() {fullscreen();};
|
||||
|
||||
(function(self) {
|
||||
self.undoElement.onclick = function() {self.cameras.mainCamera().undo(); self.updateElements();};
|
||||
self.redoElement.onclick = function() {self.cameras.mainCamera().redo(); self.updateElements();};
|
||||
|
||||
self.fullElement.onclick = function() {
|
||||
self.cameras.map(function(camera) {
|
||||
if (!(camera instanceof PointerCamera)) {
|
||||
camera.fullArrow = self.fullElement.checked;
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
self.pointerLockElement.onchange = function() {
|
||||
self.cameras.mainCamera().shouldLock = self.pointerLockElement.checked;
|
||||
self.cameras.mainCamera().onPointerLockChange();
|
||||
};
|
||||
|
||||
self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;};
|
||||
|
||||
self.resetElement.onclick = function() {
|
||||
// Reinit camera
|
||||
self.cameras.mainCamera().reset();
|
||||
};
|
||||
|
||||
self.recommendationElement.onchange = function() {
|
||||
previewer.fixedRecommendation(self.recommendationElement.checked);
|
||||
};
|
||||
})(this);
|
||||
|
||||
};
|
||||
|
||||
ButtonManager.prototype.updateElements = function() {
|
||||
// Update icon
|
||||
if (!this.cameras.mainCamera().undoable()) {
|
||||
this.undoElement.className = "btn btn-default navbar-btn";
|
||||
} else {
|
||||
this.undoElement.className = "btn btn-primary navbar-btn";
|
||||
}
|
||||
|
||||
if (!this.cameras.mainCamera().redoable()) {
|
||||
this.redoElement.className = "btn btn-default navbar-btn";
|
||||
} else {
|
||||
this.redoElement.className = "btn btn-primary navbar-btn";
|
||||
}
|
||||
};
|
||||
|
||||
166
js/l3d/apps/prototype/Coin.js
vendored
Normal file
166
js/l3d/apps/prototype/Coin.js
vendored
Normal file
@@ -0,0 +1,166 @@
|
||||
var Coin = function(x,y,z, callback) {
|
||||
this.ready = false;
|
||||
this.got = false;
|
||||
this.init(x,y,z);
|
||||
if (callback) {
|
||||
this.callback = callback;
|
||||
this.rotating = true;
|
||||
}
|
||||
};
|
||||
|
||||
var _toto = new Audio();
|
||||
Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3";
|
||||
|
||||
Coin.domElement = document.createElement('canvas');
|
||||
Coin.domElement.style.position = 'absolute';
|
||||
Coin.domElement.style.cssFloat = 'top-left';
|
||||
Coin.domElement.style.top = "0px";
|
||||
Coin.domElement.style.left = "0px";
|
||||
|
||||
Coin.image = new Image();
|
||||
Coin.image.src = '/static/img/redcoin.png';
|
||||
|
||||
Coin.initSize = function() {
|
||||
try {
|
||||
Coin.domElement.width = container_size.width();
|
||||
Coin.domElement.height = container_size.height();
|
||||
} catch (e) {
|
||||
setTimeout(100, Coin.initSize);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
Coin.update = function() {
|
||||
|
||||
var x;
|
||||
try {
|
||||
x = container_size.width() * 4.25 / 5;
|
||||
Coin.domElement.width = container_size.width();
|
||||
Coin.domElement.height = container_size.height();
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
Coin.domElement.width = Coin.domElement.width;
|
||||
|
||||
Coin.ctx.drawImage(Coin.image, x + 75,25,30,30);
|
||||
|
||||
Coin.ctx.fillStyle = 'red';
|
||||
Coin.ctx.strokeStyle = 'black';
|
||||
|
||||
Coin.ctx.font = "30px Verdana";
|
||||
Coin.ctx.lineWidth = 5;
|
||||
Coin.ctx.strokeText(Coin.total - 1 + " / " + Coin.max, x, 50);
|
||||
Coin.ctx.fillText(Coin.total - 1 + " / " + Coin.max, x, 50);
|
||||
|
||||
Coin.ctx.stroke();
|
||||
Coin.ctx.fill();
|
||||
|
||||
};
|
||||
|
||||
Coin.image.onload = Coin.update;
|
||||
|
||||
Coin.total = 1;
|
||||
Coin.ctx = Coin.domElement.getContext('2d');
|
||||
Coin.update();
|
||||
|
||||
Coin.prototype.init = function(x,y,z) {
|
||||
if (Coin.BASIC_MESH !== null) {
|
||||
this.mesh = Coin.BASIC_MESH.clone();
|
||||
this.mesh.position.x = x;
|
||||
this.mesh.position.y = y;
|
||||
this.mesh.position.z = z;
|
||||
this.ready = true;
|
||||
this.mesh.raycastable = true;
|
||||
} else {
|
||||
(function(self,x,y,z) {
|
||||
setTimeout(function() {
|
||||
self.init(x,y,z);
|
||||
},1000);
|
||||
})(this,x,y,z);
|
||||
}
|
||||
};
|
||||
|
||||
Coin.prototype.addToScene = function(scene) {
|
||||
scene.add(this.mesh);
|
||||
};
|
||||
|
||||
Coin.prototype.update = function() {
|
||||
var self = this;
|
||||
if (this.ready && this.rotating)
|
||||
this.mesh.rotation.y += 0.1;
|
||||
};
|
||||
|
||||
Coin.prototype.get = function() {
|
||||
if (!this.got) {
|
||||
this.got = true;
|
||||
|
||||
// Call the callback if any
|
||||
if (this.callback)
|
||||
this.callback();
|
||||
|
||||
if (this.mesh) {
|
||||
this.mesh.visible = false;
|
||||
this.mesh.raycastable = false;
|
||||
}
|
||||
Coin.total ++;
|
||||
Coin.nextSound.play();
|
||||
if (Coin.total === 9) {
|
||||
// You got the last coin
|
||||
var music = document.getElementById('music');
|
||||
if (music !== null) {
|
||||
var wasPlaying = !music.paused;
|
||||
music.pause();
|
||||
setTimeout(function() {
|
||||
Coin.lastSound.play();
|
||||
setTimeout(function() {
|
||||
if (wasPlaying) {
|
||||
music.play();
|
||||
}
|
||||
}, Coin.lastSound.duration*1000);
|
||||
}, Coin.nextSound.duration*1000);
|
||||
}
|
||||
} else {
|
||||
Coin.nextSound = new Audio('/static/data/music/redcoins/' + Coin.total + Coin.extension);
|
||||
Coin.nextSound.preload = "auto";
|
||||
}
|
||||
|
||||
Coin.update();
|
||||
}
|
||||
};
|
||||
|
||||
Coin.lastSound = new Audio('/static/data/music/starappears' + Coin.extension);
|
||||
Coin.lastSound.preload = "auto";
|
||||
|
||||
Coin.total = 1;
|
||||
Coin.BASIC_MESH = null;
|
||||
|
||||
Coin._loader = new THREE.OBJLoader();
|
||||
|
||||
Coin.init = function(scale) {
|
||||
Coin.max = 8;
|
||||
if (!Coin.initialized) {
|
||||
Coin.initialized = true;
|
||||
|
||||
if (scale === undefined) {
|
||||
scale = 0.005;
|
||||
}
|
||||
|
||||
Coin._loader.load(
|
||||
'/static/data/coin/Coin.obj',
|
||||
function(object) {
|
||||
object.traverse(function (mesh) {
|
||||
if (mesh instanceof THREE.Mesh) {
|
||||
mesh.scale.set(scale,scale,scale);
|
||||
mesh.material.color.setHex(0xff0000);
|
||||
mesh.geometry.computeVertexNormals();
|
||||
mesh.raycastable = true;
|
||||
Coin.BASIC_MESH = mesh;
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Coin.nextSound = new Audio('/static/data/music/redcoins/1' + Coin.extension);
|
||||
}
|
||||
};
|
||||
299
js/l3d/apps/prototype/interactive/main.js
vendored
Normal file
299
js/l3d/apps/prototype/interactive/main.js
vendored
Normal file
@@ -0,0 +1,299 @@
|
||||
var isFullscreen = false;
|
||||
var beenFullscreen = false;
|
||||
|
||||
var main_section = document.getElementById('main-section');
|
||||
|
||||
// var container_size = {
|
||||
// width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
|
||||
// height: function() {
|
||||
// if (!isFullscreen)
|
||||
// return main_section.clientHeight
|
||||
// - document.getElementById('nav').offsetHeight
|
||||
// - document.getElementById('main-div').offsetHeight;
|
||||
// else
|
||||
// return screen.height;
|
||||
// }
|
||||
// };
|
||||
var container_size = {
|
||||
width: function() { return 1024; },
|
||||
height: function() { return 768; }
|
||||
};
|
||||
|
||||
var stats;
|
||||
|
||||
// Let's be sure we avoid using global variables
|
||||
var onWindowResize = (function() {
|
||||
|
||||
// Disable scrolling
|
||||
window.onscroll = function () { window.scrollTo(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, cameraSelecter;
|
||||
var spheres = new Array(mesh_number);
|
||||
var visible = 0;
|
||||
// stats;
|
||||
var previewer;
|
||||
var camera1;
|
||||
var loader;
|
||||
var coins = [];
|
||||
var previousTime;
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
|
||||
if (initMainScene !== initPeach && initMainScene !== initSponza && Coin.total !== 9) {
|
||||
|
||||
return 'Warning : you are going to leave the page and abort the current test !';
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
init();
|
||||
if (initMainScene !== initPeach && initMainScene !== initSponza)
|
||||
logfps();
|
||||
animate();
|
||||
|
||||
function logfps() {
|
||||
|
||||
// Log fps
|
||||
if (stats !== undefined) {
|
||||
|
||||
var event = new BD.Event.Fps();
|
||||
event.fps = stats.getFps();
|
||||
event.send();
|
||||
|
||||
}
|
||||
|
||||
setTimeout(logfps, 1000);
|
||||
|
||||
}
|
||||
|
||||
function init() {
|
||||
// Initialize scene
|
||||
scene = new THREE.Scene();
|
||||
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
|
||||
|
||||
// Collidable objects to prevent camera from traversing objects
|
||||
var collidableObjects = [];
|
||||
|
||||
// Initialize renderer
|
||||
container = document.getElementById('container');
|
||||
container.style.height = container_size.height() + 'px';
|
||||
container.style.width = container_size.width() + 'px';
|
||||
renderer.setSize(container_size.width(), container_size.height());
|
||||
// renderer.setSize(container_size.width(), container_size.height());
|
||||
renderer.setClearColor(0x87ceeb);
|
||||
|
||||
// Initialize pointer camera
|
||||
camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
|
||||
|
||||
// Initialize previewer
|
||||
previewer = new Previewer(renderer, scene);
|
||||
previewer.domElement.style.position ="absolute";
|
||||
previewer.domElement.style.cssFloat = 'top-left';
|
||||
previewer.domElement.width = container_size.width();
|
||||
previewer.domElement.height = container_size.height();
|
||||
|
||||
// Initialize stats counter
|
||||
stats = new Stats();
|
||||
stats.setMode(0);
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.cssFloat = "top-left";
|
||||
|
||||
// Initialize pointer for pointer lock
|
||||
var pointer = new MousePointer(camera1);
|
||||
pointer.domElement.width = container_size.width();
|
||||
pointer.domElement.height = container_size.height();
|
||||
|
||||
//
|
||||
var startCanvas = new StartCanvas(camera1);
|
||||
startCanvas.domElement.width = container_size.width();
|
||||
startCanvas.domElement.height = container_size.height();
|
||||
|
||||
// Add elements to page
|
||||
container.appendChild( stats.domElement );
|
||||
container.appendChild(Coin.domElement);
|
||||
container.appendChild(startCanvas.domElement);
|
||||
container.appendChild(pointer.domElement);
|
||||
container.appendChild(previewer.domElement);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
startCanvas.render();
|
||||
|
||||
cameras = initMainScene(camera1, scene, coins);
|
||||
// cameras = initPeach(camera1, scene, coins);
|
||||
// cameras = initBobomb(camera1, scene, coins);
|
||||
// cameras = initWhomp(camera1, scene, , coins);
|
||||
// cameras = initMountain(camera1, scene, coins);
|
||||
// cameras = initSponza(camera1, scene, coins);
|
||||
|
||||
// Add listeners
|
||||
initListeners();
|
||||
|
||||
// Set interval on animate
|
||||
setInterval(animate, 20);
|
||||
}
|
||||
|
||||
function initListeners() {
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
// Transmit click event to camera selecter
|
||||
document.addEventListener('mousedown', function(event) {
|
||||
if (event.which == 1)
|
||||
cameraSelecter.clickPointer(event);
|
||||
}, false
|
||||
);
|
||||
|
||||
// Transmit click event to camera selecter
|
||||
container.addEventListener('mousedown', function(event) {
|
||||
if (event.which == 1)
|
||||
cameraSelecter.click(event);
|
||||
}, false
|
||||
);
|
||||
|
||||
// Update camera selecter when mouse moved
|
||||
container.addEventListener('mousemove', function(event) {
|
||||
cameraSelecter.update(event);
|
||||
});
|
||||
|
||||
// Escape key to exit fullscreen mode
|
||||
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
|
||||
|
||||
// HTML Bootstrap buttons
|
||||
buttonManager = new ButtonManager(cameras, previewer);
|
||||
|
||||
// Camera selecter for hover and clicking recommendations
|
||||
cameraSelecter = new CameraSelecter(renderer, scene, cameras, coins, buttonManager);
|
||||
}
|
||||
|
||||
function render() {
|
||||
cameraSelecter.update();
|
||||
|
||||
// Update recommendations (set raycastable if shown)
|
||||
var transform = buttonManager.showArrows ? show : hide;
|
||||
cameras.map(function(camera) {
|
||||
if (camera instanceof RecommendedCamera) {
|
||||
transform(camera);
|
||||
|
||||
camera.traverse(function(elt) {
|
||||
elt.raycastable = buttonManager.showArrows;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Update coins
|
||||
coins.forEach(function(coin) { coin.update(); });
|
||||
|
||||
// Update main camera
|
||||
var currentTime = Date.now() - previousTime;
|
||||
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
|
||||
// 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 RecommendedCamera) hide(camera); });
|
||||
|
||||
// Update transparent elements
|
||||
THREEx.Transparency.update(cameras.mainCamera());
|
||||
|
||||
// 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;});
|
||||
}
|
||||
|
||||
// onWindowResize will be the only global function
|
||||
return onWindowResize;
|
||||
|
||||
})();
|
||||
|
||||
function fullscreen() {
|
||||
var container = document.getElementById('container');
|
||||
isFullscreen = true;
|
||||
|
||||
if (!beenFullscreen) {
|
||||
beenFullscreen = true;
|
||||
alert('To quit fullscren mode, type ESC key');
|
||||
}
|
||||
|
||||
container.style.position = "absolute";
|
||||
container.style.cssFloat = "top-left";
|
||||
container.style.top = "50px";
|
||||
container.style.bottom = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.right = "0px";
|
||||
container.style.width="";
|
||||
container.style.height="";
|
||||
container.style.overflow = "hidden";
|
||||
|
||||
onWindowResize();
|
||||
}
|
||||
|
||||
function stopFullscreen() {
|
||||
isFullscreen = false;
|
||||
|
||||
var container = document.getElementById('container');
|
||||
|
||||
container.style.position = "";
|
||||
container.style.cssFloat = "";
|
||||
container.style.top = "";
|
||||
container.style.bottom = "";
|
||||
container.style.left = "";
|
||||
container.style.right = "";
|
||||
container.style.width = container_size.width() + "px";
|
||||
container.style.height = container_size.height() + "px";
|
||||
|
||||
onWindowResize();
|
||||
}
|
||||
|
||||
|
||||
237
js/l3d/apps/prototype/replay/main.js
vendored
Normal file
237
js/l3d/apps/prototype/replay/main.js
vendored
Normal file
@@ -0,0 +1,237 @@
|
||||
var isFullscreen = false;
|
||||
var beenFullscreen = false;
|
||||
|
||||
var main_section = document.getElementById('main-section');
|
||||
// var container_size = {
|
||||
// width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
|
||||
// height: function() {
|
||||
// if (!isFullscreen)
|
||||
// return main_section.clientHeight
|
||||
// - document.getElementById('nav').offsetHeight
|
||||
// - document.getElementById('main-div').offsetHeight;
|
||||
// else
|
||||
// return screen.height;
|
||||
// }
|
||||
// };
|
||||
|
||||
var container_size = {
|
||||
width: function() { return 1024; },
|
||||
height: function() { return 768; }
|
||||
};
|
||||
|
||||
var onWindowResize = (function() {
|
||||
|
||||
// Disable scrolling
|
||||
window.onscroll = function () { window.scrollTo(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, cameraSelecter;
|
||||
var spheres = new Array(mesh_number);
|
||||
var visible = 0;
|
||||
var stats;
|
||||
|
||||
var loader;
|
||||
var coins = [];
|
||||
var previousTime;
|
||||
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Initialize scene
|
||||
scene = new THREE.Scene();
|
||||
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
|
||||
|
||||
// Collidable objects to prevent camera from traversing objects
|
||||
var collidableObjects = [];
|
||||
|
||||
// Initialize renderer
|
||||
container = document.getElementById('container');
|
||||
container.style.height = container_size.height() + 'px';
|
||||
container.style.width = container_size.width() + 'px';
|
||||
renderer.setSize(container_size.width(), container_size.height());
|
||||
// renderer.setSize(container_size.width(), container_size.height());
|
||||
renderer.shadowMapEnabled = true;
|
||||
renderer.setClearColor(0x87ceeb);
|
||||
|
||||
|
||||
// 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(renderer.domElement);
|
||||
|
||||
// Initialize pointer camera
|
||||
var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins);
|
||||
cameras = initMainScene(camera1, scene, coins);
|
||||
camera1.cameras = cameras;
|
||||
|
||||
// Add listeners
|
||||
initListeners();
|
||||
|
||||
setInterval(animate, 20);
|
||||
}
|
||||
|
||||
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, scene, cameras, buttonManager);
|
||||
}
|
||||
|
||||
function fullscreen() {
|
||||
isFullscreen = true;
|
||||
|
||||
if (!beenFullscreen) {
|
||||
beenFullscreen = true;
|
||||
alert('To quit fullscren mode, type ESC key');
|
||||
}
|
||||
|
||||
container.style.position = "absolute";
|
||||
container.style.cssFloat = "top-left";
|
||||
container.style.top = "50px";
|
||||
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() {
|
||||
isFullscreen = false;
|
||||
|
||||
container.style.position = "";
|
||||
container.style.cssFloat = "";
|
||||
container.style.top = "";
|
||||
container.style.bottom = "";
|
||||
container.style.left = "";
|
||||
container.style.right = "";
|
||||
container.style.width = container_size.width() + "px";
|
||||
container.style.height = container_size.height() + "px";
|
||||
|
||||
// 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 RecommendedCamera) {
|
||||
// transform(camera);
|
||||
|
||||
// camera.traverse(function(elt) {
|
||||
// elt.raycastable = buttonManager.showArrows;
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// Update coins
|
||||
coins.forEach(function(coin) { coin.update(); });
|
||||
|
||||
// Update main camera
|
||||
var currentTime = Date.now() - previousTime;
|
||||
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
|
||||
// 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());
|
||||
|
||||
// Hide arrows in recommendation
|
||||
// cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
|
||||
}
|
||||
|
||||
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";
|
||||
|
||||
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;});
|
||||
}
|
||||
|
||||
return onWindowResize;
|
||||
|
||||
})();
|
||||
555
js/l3d/apps/prototype/tutorial/TutoCamera.js
vendored
Normal file
555
js/l3d/apps/prototype/tutorial/TutoCamera.js
vendored
Normal file
@@ -0,0 +1,555 @@
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var TutoCamera = function() {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
||||
this.renderer = arguments[4];
|
||||
this.onWindowResize = arguments[6];
|
||||
var scene = arguments[5];
|
||||
var container_size = arguments[7];
|
||||
var coins = arguments[8];
|
||||
|
||||
if (arguments[9] === undefined)
|
||||
listenerTarget = document;
|
||||
else
|
||||
listenerTarget = arguments[9];
|
||||
|
||||
// Set Position
|
||||
this.theta = Math.PI;
|
||||
this.phi = Math.PI;
|
||||
|
||||
// this.keyboard = undefined;
|
||||
this.moving = false;
|
||||
|
||||
this.dragging = false;
|
||||
this.mouse = {x: 0, y: 0};
|
||||
this.mouseMove = {x: 0, y: 0};
|
||||
|
||||
|
||||
// Stuff for rendering
|
||||
this.position = new THREE.Vector3();
|
||||
this.forward = new THREE.Vector3();
|
||||
this.left = new THREE.Vector3();
|
||||
this.target = new THREE.Vector3(0,1,0);
|
||||
|
||||
// Stuff for events
|
||||
this.motion = {};
|
||||
|
||||
this.sensitivity = 0.05;
|
||||
this.speed = 1;
|
||||
|
||||
// Raycaster for collisions
|
||||
this.raycaster = new THREE.Raycaster();
|
||||
|
||||
// Create history object
|
||||
this.history = new History();
|
||||
|
||||
// Set events from the document
|
||||
var self = this;
|
||||
|
||||
var onKeyDown = function(event) {self.onKeyDown(event);};
|
||||
var onKeyUp = function(event) {self.onKeyUp(event);};
|
||||
var onMouseDown = function(event) {if (event.which === 1) self.onMouseDown(event); };
|
||||
var onMouseUp = function(event) {if (event.which === 1) self.onMouseUp(event); };
|
||||
var onMouseMove = function(event) {self.onMouseMove(event); };
|
||||
|
||||
document.addEventListener('keydown', onKeyDown, false);
|
||||
document.addEventListener('keyup', onKeyUp, false);
|
||||
|
||||
document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
|
||||
document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
|
||||
document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
|
||||
|
||||
document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, false);
|
||||
|
||||
listenerTarget.addEventListener('mousedown', function() {self.lockPointer();}, false);
|
||||
listenerTarget.addEventListener('mousedown', onMouseDown, false);
|
||||
listenerTarget.addEventListener('mousemove', onMouseMove, false);
|
||||
listenerTarget.addEventListener('mouseup', onMouseUp, false);
|
||||
listenerTarget.addEventListener('mouseout', onMouseUp, false);
|
||||
|
||||
document.getElementById('lock').addEventListener('change', function(e) {
|
||||
if (self.tutorial.nextAction() === 'uncheck-lock') {
|
||||
self.tutorial.nextStep();
|
||||
}
|
||||
});
|
||||
|
||||
this.collisions = true;
|
||||
|
||||
this.resetElements = resetBobombElements();
|
||||
|
||||
// Create tutorial
|
||||
this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size);
|
||||
|
||||
this.shouldLock = true;
|
||||
|
||||
};
|
||||
TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
TutoCamera.prototype.constructor = TutoCamera;
|
||||
|
||||
TutoCamera.prototype.lockPointer = function() {
|
||||
|
||||
if (this.shouldLock) {
|
||||
this.renderer.domElement.requestPointerLock =
|
||||
this.renderer.domElement.requestPointerLock ||
|
||||
this.renderer.domElement.mozRequestPointerLock ||
|
||||
this.renderer.domElement.webkitRequestPointerLock;
|
||||
|
||||
if (this.renderer.domElement.requestPointerLock) {
|
||||
|
||||
this.renderer.domElement.requestPointerLock();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
TutoCamera.prototype.isLocked = function() {
|
||||
var toto =
|
||||
document.pointerLockElement === this.renderer.domElement ||
|
||||
document.mozPointerLockElement === this.renderer.domElement ||
|
||||
document.webkitPointerLockElement === this.renderer.domElement;
|
||||
|
||||
return toto;
|
||||
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onPointerLockChange = function() {
|
||||
|
||||
if (this.isLocked()) {
|
||||
|
||||
// The pointer is locked : adapt the state of the camera
|
||||
this.pointerLocked = true;
|
||||
this.mousePointer.render();
|
||||
|
||||
this.mouse.x = this.renderer.domElement.width/2;
|
||||
this.mouse.y = this.renderer.domElement.height/2;
|
||||
|
||||
// Remove start canvas
|
||||
this.startCanvas.clear();
|
||||
|
||||
if (this.tutorial.nextAction() === 'lock-pointer') {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
this.pointerLocked = false;
|
||||
this.mousePointer.clear();
|
||||
|
||||
this.theta = this.previousTheta;
|
||||
this.phi = this.previousPhi;
|
||||
|
||||
this.mouseMove.x = 0;
|
||||
this.mouseMove.y = 0;
|
||||
|
||||
// Draw start canvas only if should lock
|
||||
if (this.shouldLock)
|
||||
this.startCanvas.render();
|
||||
else
|
||||
this.startCanvas.clear();
|
||||
|
||||
if (this.tutorial.nextAction() === 'unlock-pointer') {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Update function
|
||||
TutoCamera.prototype.update = function(time) {
|
||||
if (this.moving) {
|
||||
this.linearMotion(time);
|
||||
} else if (this.movingHermite) {
|
||||
this.hermiteMotion(time);
|
||||
} else {
|
||||
this.normalMotion(time);
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.linearMotion = function(time) {
|
||||
var position_direction = Tools.diff(this.new_position, this.position);
|
||||
var target_direction = Tools.diff(this.new_target, this.target);
|
||||
|
||||
this.position.add(Tools.mul(position_direction, 0.05 * time / 20));
|
||||
this.target.add(Tools.mul(target_direction, 0.05 * time / 20));
|
||||
|
||||
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
|
||||
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) {
|
||||
this.moving = false;
|
||||
this.anglesFromVectors();
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.hermiteMotion = function(time) {
|
||||
var e = this.hermitePosition.eval(this.t);
|
||||
this.position.x = e.x;
|
||||
this.position.y = e.y;
|
||||
this.position.z = e.z;
|
||||
|
||||
this.target = Tools.sum(this.position, this.hermiteAngles.eval(this.t));
|
||||
|
||||
this.t += 0.01 * time / 20;
|
||||
|
||||
if (this.t > 1) {
|
||||
this.movingHermite = false;
|
||||
this.anglesFromVectors();
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.normalMotion = function(time) {
|
||||
// Update angles
|
||||
if (this.motion.increasePhi) {this.phi += this.sensitivity; this.changed = true; }
|
||||
if (this.motion.decreasePhi) {this.phi -= this.sensitivity; this.changed = true; }
|
||||
if (this.motion.increaseTheta) {this.theta += this.sensitivity; this.changed = true; }
|
||||
if (this.motion.decreaseTheta) {this.theta -= this.sensitivity; this.changed = true; }
|
||||
|
||||
if (this.isLocked() || this.dragging) {
|
||||
|
||||
this.theta += this.mouseMove.x;
|
||||
this.phi -= this.mouseMove.y;
|
||||
|
||||
|
||||
this.mouseMove.x = 0;
|
||||
this.mouseMove.y = 0;
|
||||
|
||||
this.changed = true;
|
||||
}
|
||||
|
||||
// Clamp phi and theta
|
||||
this.phi = Math.min(Math.max(-(Math.PI/2-0.1),this.phi), Math.PI/2-0.1);
|
||||
this.theta = ((this.theta - Math.PI) % (2*Math.PI)) + Math.PI;
|
||||
|
||||
// Compute vectors (position and target)
|
||||
this.vectorsFromAngles();
|
||||
|
||||
// Update with events
|
||||
var delta = 0.1;
|
||||
var forward = this.forward.clone();
|
||||
forward.multiplyScalar(400.0 * delta);
|
||||
var left = this.up.clone();
|
||||
left.cross(forward);
|
||||
left.normalize();
|
||||
left.multiplyScalar(400.0 * delta);
|
||||
|
||||
// Move only if no collisions
|
||||
var speed = this.speed * time / 20;
|
||||
var direction = new THREE.Vector3();
|
||||
|
||||
if (this.motion.boost) speed *= 10;
|
||||
if (this.motion.moveForward) {direction.add(Tools.mul(forward, speed)); this.changed = true;}
|
||||
if (this.motion.moveBackward) {direction.sub(Tools.mul(forward, speed)); this.changed = true;}
|
||||
if (this.motion.moveLeft) {direction.add(Tools.mul(left, speed)); this.changed = true;}
|
||||
if (this.motion.moveRight) {direction.sub(Tools.mul(left, speed)); this.changed = true;}
|
||||
|
||||
var collide = this.isColliding(direction);
|
||||
if (this.collisions && collide) {
|
||||
var face = collide.face;
|
||||
var vertices = collide.object.geometry.vertices;
|
||||
var normal = Tools.cross(Tools.diff(vertices[face.b], vertices[face.a]), Tools.diff(vertices[face.c], vertices[face.a])).normalize();
|
||||
|
||||
if (Tools.dot(normal, direction) > 0) {
|
||||
normal.multiplyScalar(-1);
|
||||
}
|
||||
|
||||
normal.multiplyScalar(0.01);
|
||||
this.position.add(normal);
|
||||
} else {
|
||||
this.position.add(direction);
|
||||
}
|
||||
|
||||
// Update angle
|
||||
this.target = this.position.clone();
|
||||
this.target.add(forward);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.reset = function() {
|
||||
if (this.tutorial.nextAction() === 'reset-camera') {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
|
||||
this.resetPosition();
|
||||
this.moving = false;
|
||||
this.movingHermite = false;
|
||||
(new BD.Event.ResetClicked()).send();
|
||||
|
||||
this.previousTheta = this.theta;
|
||||
this.previousPhi = this.phi;
|
||||
};
|
||||
|
||||
TutoCamera.prototype.resetPosition = function() {
|
||||
this.position.copy(this.resetElements.position);
|
||||
this.target.copy(this.resetElements.target);
|
||||
this.anglesFromVectors();
|
||||
};
|
||||
|
||||
TutoCamera.prototype.vectorsFromAngles = function() {
|
||||
// Update direction
|
||||
this.forward.y = Math.sin(this.phi);
|
||||
|
||||
var cos = Math.cos(this.phi);
|
||||
this.forward.z = cos * Math.cos(this.theta);
|
||||
this.forward.x = cos * Math.sin(this.theta);
|
||||
this.forward.normalize();
|
||||
|
||||
};
|
||||
|
||||
TutoCamera.prototype.anglesFromVectors = function() {
|
||||
var forward = Tools.diff(this.target, this.position);
|
||||
forward.normalize();
|
||||
|
||||
this.phi = Math.asin(forward.y);
|
||||
|
||||
// Don't know why this line works... But thanks Thierry-san and
|
||||
// Bastien because it seems to work...
|
||||
this.theta = Math.atan2(forward.x, forward.z);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.move = function(otherCamera, toSave) {
|
||||
if (toSave === undefined)
|
||||
toSave = true;
|
||||
|
||||
this.moving = true;
|
||||
this.new_target = otherCamera.target.clone();
|
||||
this.new_position = otherCamera.position.clone();
|
||||
var t = [0,1];
|
||||
var f = [this.position.clone(), this.new_position];
|
||||
var fp = [Tools.diff(this.target, this.position), Tools.diff(this.new_target, this.new_position)];
|
||||
this.hermite = new Hermite.Polynom(t,f,fp);
|
||||
this.t = 0;
|
||||
|
||||
if (toSave) {
|
||||
if (this.changed) {
|
||||
this.save();
|
||||
this.changed = false;
|
||||
}
|
||||
this.history.addState({position: otherCamera.position.clone(), target: otherCamera.target.clone()});
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.moveHermite = function(otherCamera, toSave) {
|
||||
if (this.tutorial.nextAction() === 'recommendation') {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
|
||||
if (toSave === undefined)
|
||||
toSave = true;
|
||||
|
||||
this.movingHermite = true;
|
||||
this.t = 0;
|
||||
|
||||
this.hermitePosition = new Hermite.special.Polynom(
|
||||
this.position.clone(),
|
||||
otherCamera.position.clone(),
|
||||
Tools.mul(Tools.diff(otherCamera.target, otherCamera.position).normalize(),4)
|
||||
);
|
||||
|
||||
this.hermiteAngles = new Hermite.special.Polynom(
|
||||
Tools.diff(this.target, this.position),
|
||||
Tools.diff(otherCamera.target, otherCamera.position),
|
||||
new THREE.Vector3()
|
||||
);
|
||||
|
||||
if (toSave) {
|
||||
if (this.changed) {
|
||||
this.save();
|
||||
this.changed = false;
|
||||
}
|
||||
this.history.addState({position: otherCamera.position.clone(), target: otherCamera.target.clone()});
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.isColliding = function(direction) {
|
||||
this.raycaster.set(this.position, direction.clone().normalize());
|
||||
var intersects = this.raycaster.intersectObjects(this.collidableObjects, true);
|
||||
|
||||
for (var i in intersects) {
|
||||
if (intersects[i].distance < Tools.norm(direction) + this.speed * 300 &&
|
||||
intersects[i].object.raycastable) {
|
||||
return intersects[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Look function
|
||||
TutoCamera.prototype.look = function() {
|
||||
this.lookAt(this.target);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.addToScene = function(scene) {
|
||||
scene.add(this);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onKeyEvent = function(event, toSet) {
|
||||
// Create copy of state
|
||||
var motionJsonCopy = JSON.stringify(this.motion);
|
||||
var moved;
|
||||
|
||||
if (this.allowed.keyboardTranslate) {
|
||||
moved = true;
|
||||
|
||||
switch ( event.keyCode ) {
|
||||
// Azerty keyboards
|
||||
case 38: case 90: this.motion.moveForward = toSet; break; // up / z
|
||||
case 37: case 81: this.motion.moveLeft = toSet; break; // left / q
|
||||
case 40: case 83: this.motion.moveBackward = toSet; break; // down / s
|
||||
case 39: case 68: this.motion.moveRight = toSet; break; // right / d
|
||||
|
||||
// Qwerty keyboards
|
||||
case 38: case 87: this.motion.moveForward = toSet; break; // up / w
|
||||
case 37: case 65: this.motion.moveLeft = toSet; break; // left / a
|
||||
case 40: case 83: this.motion.moveBackward = toSet; break; // down / s
|
||||
case 39: case 68: this.motion.moveRight = toSet; break; // right / d
|
||||
|
||||
case 32: this.motion.boost = toSet; moved = false; break;
|
||||
default: moved = false; break;
|
||||
}
|
||||
|
||||
if (moved && this.tutorial.nextAction() === 'translate-keyboard' && !toSet) {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
if (this.allowed.keyboardRotate) {
|
||||
moved = true;
|
||||
|
||||
switch ( event.keyCode ) {
|
||||
case 73: case 104: this.motion.increasePhi = toSet; break; // 8 Up for angle
|
||||
case 75: case 98: this.motion.decreasePhi = toSet; break; // 2 Down for angle
|
||||
case 74: case 100: this.motion.increaseTheta = toSet; break; // 4 Left for angle
|
||||
case 76: case 102: this.motion.decreaseTheta = toSet; break; // 6 Right for angle
|
||||
|
||||
default: moved = false; break;
|
||||
}
|
||||
|
||||
if (moved && this.tutorial.nextAction() === 'rotate-keyboard' && !toSet) {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
switch (event.keyCode) {
|
||||
case 13: if (toSet) this.log(); break;
|
||||
}
|
||||
|
||||
if (motionJsonCopy != JSON.stringify(this.motion)) {
|
||||
// Log any change
|
||||
var e = new BD.Event.KeyboardEvent();
|
||||
e.camera = this;
|
||||
e.send();
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onKeyDown = function(event) {
|
||||
this.onKeyEvent(event, true);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onKeyUp = function(event) {
|
||||
this.onKeyEvent(event, false);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onMouseDown = function(event) {
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
if (this.allowed.mouseRotate) {
|
||||
this.dragging = true;
|
||||
this.mouseMoved = false;
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onMouseMove = function(event) {
|
||||
if (!this.shouldLock && this.dragging) {
|
||||
this.previousTheta = this.theta;
|
||||
this.previousPhi = this.phi;
|
||||
|
||||
var mouse = {x: this.mouse.x, y: this.mouse.y};
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
this.mouseMove.x = this.mouse.x - mouse.x;
|
||||
this.mouseMove.y = this.mouse.y - mouse.y;
|
||||
this.mouseMoved = true;
|
||||
|
||||
if (this.tutorial.nextAction() === 'rotate-mouse') {
|
||||
this.tutorial.nextStep();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onMouseMovePointer = function(e) {
|
||||
|
||||
if (this.isLocked()) {
|
||||
|
||||
// Backup theta and phi
|
||||
this.previousTheta = this.theta;
|
||||
this.previousPhi = this.phi;
|
||||
|
||||
this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
|
||||
this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
|
||||
|
||||
this.mouseMove.x *= -(this.sensitivity/10);
|
||||
this.mouseMove.y *= (this.sensitivity/10);
|
||||
|
||||
this.mouseMoved = true;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
TutoCamera.prototype.onMouseUp = function(event) {
|
||||
this.onMouseMove(event);
|
||||
|
||||
// Send log to DB
|
||||
if (this.dragging && this.mouseMoved && !this.moving && !this.movingHermite) {
|
||||
var e = new BD.Event.KeyboardEvent();
|
||||
e.camera = this;
|
||||
e.send();
|
||||
}
|
||||
|
||||
this.dragging = false;
|
||||
};
|
||||
|
||||
TutoCamera.prototype.log = function() {
|
||||
console.log("createCamera(\nnew THREE.Vector3(" + this.position.x + "," + this.position.y + ',' + this.position.z + '),\n' +
|
||||
"new THREE.Vector3(" + this.target.x + "," + this.target.y + ',' + this.target.z + ')\n)');
|
||||
};
|
||||
|
||||
TutoCamera.prototype.save = function() {
|
||||
var backup = {};
|
||||
backup.position = this.position.clone();
|
||||
backup.target = this.target.clone();
|
||||
this.history.addState(backup);
|
||||
};
|
||||
|
||||
TutoCamera.prototype.undo = function() {
|
||||
var move = this.history.undo();
|
||||
if (move !== undefined) {
|
||||
var event = new BD.Event.PreviousNextClicked();
|
||||
event.previous = true;
|
||||
event.camera = move;
|
||||
event.send();
|
||||
|
||||
this.move(move, false);
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.redo = function() {
|
||||
var move = this.history.redo();
|
||||
if (move !== undefined) {
|
||||
var event = new BD.Event.PreviousNextClicked();
|
||||
event.previous = false;
|
||||
event.camera = move;
|
||||
event.send();
|
||||
|
||||
this.move(move, false);
|
||||
}
|
||||
};
|
||||
|
||||
TutoCamera.prototype.undoable = function() {
|
||||
return this.history.undoable();
|
||||
};
|
||||
|
||||
TutoCamera.prototype.redoable = function() {
|
||||
return this.history.redoable();
|
||||
};
|
||||
225
js/l3d/apps/prototype/tutorial/TutorialSteps.js
vendored
Normal file
225
js/l3d/apps/prototype/tutorial/TutorialSteps.js
vendored
Normal file
@@ -0,0 +1,225 @@
|
||||
var nextStep;
|
||||
var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size) {
|
||||
this.camera = tutoCamera;
|
||||
this.step = 0;
|
||||
this.coinNumber = 0;
|
||||
this.camera.allowed = {};
|
||||
this.onWindowResize = onWindowResize;
|
||||
this.container_size = container_size;
|
||||
this.coins = coins;
|
||||
|
||||
this.instructions = [
|
||||
{
|
||||
text:"Welcome to this tutorial ! Click on the canvas to go start !",
|
||||
justclick:false
|
||||
},
|
||||
{
|
||||
text: "You can use your mouse to move around, and press the escape key to unlock the pointer",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "You can also uncheck the <em>lock pointer</em> otion at the bottom of the page to rotate the camera via drag'n'drop !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text:"You can use your mouse (drag'n'drop) to rotate the camera",
|
||||
justclick:false
|
||||
},
|
||||
{
|
||||
text:"Nice ! You can also use (2,4,6 and 8) keys or (k,j,l and i)",
|
||||
justclick: true
|
||||
},
|
||||
{
|
||||
text: "Here is a red coin, click on it !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "Nice, there are a 3 more red coins around you, try to get them ! Check the coin counter !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "Two more ! Feel free to select the pointer lock option you prefer",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "One more !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text:"Nice ! You will now learn to translate the camera",
|
||||
justclick: true
|
||||
},
|
||||
{
|
||||
text: "Try pressing an arrow key on your keyboard to translate the camera !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "There is a red coin on the top of the castle, just if front of you ! Go and get it !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "You got it ! Try to click on reset camera !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "Nice ! Let me introduce you to <emp>recommendations</em>",
|
||||
justclick: true
|
||||
},
|
||||
{
|
||||
text: "This is a recommendation, by hovering it, you should see a preview, and by clicking on it, you should go to the recommended viewpoint",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "The recommendation will change color once you clicked on it, just like a web link",
|
||||
justclick:true
|
||||
},
|
||||
{
|
||||
text: "Here are some more recommendations, try to browse the scene and find the missing red coins (5/8)",
|
||||
justclick:false
|
||||
},
|
||||
{
|
||||
text:"Tip : you can use the arrow buttons in the bar at the bottom of the screen to go to the previous / next position",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "Tip : if you find that the previews take too much place, you can put them at the bottom of the screen (use the checkbox options below) !",
|
||||
justclick: false
|
||||
},
|
||||
{
|
||||
text: "Congratulations ! You've successfully finished the tutorial !",
|
||||
justclick: false
|
||||
}
|
||||
];
|
||||
|
||||
var self = this;
|
||||
nextStep = function() {self.nextStep();};
|
||||
|
||||
this.scene = scene;
|
||||
|
||||
Coin.domElement.style.display = "none";
|
||||
};
|
||||
|
||||
TutorialSteps.prototype.setCameras = function(cameras) {
|
||||
this.cameras = cameras;
|
||||
};
|
||||
|
||||
TutorialSteps.prototype.nextStep = function() {
|
||||
console.log(this.step);
|
||||
if (this.step < this.instructions.length) {
|
||||
this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick);
|
||||
var callback = function() {self.coinNumber++; self.nextStep();};
|
||||
var self = this;
|
||||
switch (this.step) {
|
||||
case 0: break;
|
||||
case 3: this.camera.allowed.mouseRotate = true; break;
|
||||
case 4: this.camera.allowed.keyboardRotate = true; break;
|
||||
case 5:
|
||||
Coin.domElement.style.display = "";
|
||||
Coin.max = 1;
|
||||
Coin.update();
|
||||
this.camera.allowed.keyboardRotate = true;
|
||||
this.coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
document.getElementById('container').appendChild(Coin.domElement);
|
||||
break;
|
||||
case 6:
|
||||
Coin.max = 4;
|
||||
Coin.update();
|
||||
this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
this.coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
this.coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
break;
|
||||
case 9:
|
||||
this.camera.move(this.camera.resetElements);
|
||||
break;
|
||||
case 10:
|
||||
this.camera.allowed.keyboardTranslate = true;
|
||||
break;
|
||||
case 11:
|
||||
Coin.max = 5;
|
||||
Coin.update();
|
||||
this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
this.camera.move({
|
||||
position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826),
|
||||
target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
|
||||
});
|
||||
break;
|
||||
case 14:
|
||||
var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2];
|
||||
this.cameras.push(cam);
|
||||
cam.addToScene(this.scene);
|
||||
this.camera.move({
|
||||
position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
|
||||
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
|
||||
});
|
||||
break;
|
||||
case 16:
|
||||
var cams = createPeachCameras(this.container_size.width(), this.container_size.height());
|
||||
for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
|
||||
this.cameras.push(cams[i]);
|
||||
cams[i].addToScene(this.scene);
|
||||
}
|
||||
Coin.max = 8;
|
||||
Coin.update();
|
||||
this.coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
this.coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
this.coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback));
|
||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||
break;
|
||||
}
|
||||
this.step++;
|
||||
}
|
||||
};
|
||||
|
||||
TutorialSteps.prototype.nextAction = function() {
|
||||
switch (this.step) {
|
||||
case 1: return 'lock-pointer';
|
||||
case 2: return 'unlock-pointer';
|
||||
case 3: return 'uncheck-lock';
|
||||
case 4: return 'rotate-mouse';
|
||||
case 5: return 'rotate-keyboard';
|
||||
case 11: return 'translate-keyboard';
|
||||
case 13: return 'reset-camera';
|
||||
case 15: return 'recommendation';
|
||||
}
|
||||
};
|
||||
|
||||
TutorialSteps.prototype.tryFinish = function() {
|
||||
if (this.coinNumber === 8) {
|
||||
console.log("Finished");
|
||||
}
|
||||
};
|
||||
|
||||
TutorialSteps.prototype.alert = function(myString, justclicked) {
|
||||
this.notify(myString, justclicked);
|
||||
this.onWindowResize();
|
||||
};
|
||||
|
||||
TutorialSteps.prototype.notify = function(myString, justclick) {
|
||||
$('#alert-placeholder').html(
|
||||
'<div id="toto" class="alert alert-warning alert-dismissable">' +
|
||||
(justclick ?
|
||||
'<button type="button" class="close" aria-hidden="true"' +
|
||||
'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' +
|
||||
'<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
|
||||
'</button>' : '') +
|
||||
'<span><strong>' +
|
||||
myString +
|
||||
(justclick ?
|
||||
' <a href="#" onclick="setTimeout(onWindowResize, 100); nextStep();"><em>(next)</em></span>' : '' ) +
|
||||
'</strong></span>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
$('#toto').removeClass('alert-info').addClass('alert-danger');
|
||||
|
||||
setTimeout(function() {
|
||||
$('#toto').removeClass('alert-danger').addClass('alert-warning');
|
||||
}, 500);
|
||||
};
|
||||
247
js/l3d/apps/prototype/tutorial/main.js
vendored
Normal file
247
js/l3d/apps/prototype/tutorial/main.js
vendored
Normal file
@@ -0,0 +1,247 @@
|
||||
var beenFullscreen = false;
|
||||
var isFullscreen = false;
|
||||
|
||||
var main_section = document.getElementById('main-section');
|
||||
|
||||
var container_size = {
|
||||
width: function() { return 1024; },
|
||||
height: function() { return 768; }
|
||||
};
|
||||
|
||||
var onWindowResize = (function() {
|
||||
|
||||
// Disable scrolling
|
||||
window.onscroll = function () { window.scrollTo(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, cameraSelecter;
|
||||
var spheres = new Array(mesh_number);
|
||||
var visible = 0;
|
||||
var stats;
|
||||
var previewer;
|
||||
var loader;
|
||||
var coins = [];
|
||||
var previousTime;
|
||||
var tutorial;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// Initialize scene
|
||||
scene = new THREE.Scene();
|
||||
|
||||
// Disable log for this time
|
||||
BD.disable();
|
||||
|
||||
// Collidable objects to prevent camera from traversing objects
|
||||
var collidableObjects = [];
|
||||
|
||||
// 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, scene);
|
||||
previewer.domElement.style.position ="absolute";
|
||||
previewer.domElement.style.cssFloat = 'top-left';
|
||||
previewer.domElement.width = container_size.width();
|
||||
previewer.domElement.height = container_size.height();
|
||||
|
||||
// Initialize stats counter
|
||||
stats = new Stats();
|
||||
stats.setMode(0);
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.cssFloat = "top-left";
|
||||
|
||||
var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container);
|
||||
|
||||
// Initialize pointer for pointer lock
|
||||
var pointer = new MousePointer(camera1);
|
||||
pointer.domElement.width = container_size.width();
|
||||
pointer.domElement.height = container_size.height();
|
||||
|
||||
//
|
||||
var startCanvas = new StartCanvas(camera1);
|
||||
startCanvas.domElement.width = container_size.width();
|
||||
startCanvas.domElement.height = container_size.height();
|
||||
startCanvas.render();
|
||||
|
||||
// Add elements to page
|
||||
container.appendChild( stats.domElement );
|
||||
container.appendChild(Coin.domElement);
|
||||
container.appendChild(startCanvas.domElement);
|
||||
container.appendChild(pointer.domElement);
|
||||
container.appendChild(previewer.domElement);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// Initialize pointer camera
|
||||
tutorial = camera1.tutorial;
|
||||
|
||||
cameras = new CameraContainer(camera1, []);
|
||||
tutorial.setCameras(cameras);
|
||||
|
||||
// Load peach scene
|
||||
initPeach(camera1, scene);
|
||||
|
||||
initListeners();
|
||||
|
||||
tutorial.nextStep();
|
||||
|
||||
setInterval(animate, 20);
|
||||
}
|
||||
|
||||
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, previewer);
|
||||
|
||||
// Camera selecter for hover and clicking recommendations
|
||||
cameraSelecter = new CameraSelecter(renderer, scene, cameras, coins, buttonManager);
|
||||
}
|
||||
|
||||
|
||||
function render() {
|
||||
cameraSelecter.update();
|
||||
|
||||
// Update recommendations (set raycastable if shown)
|
||||
var transform = buttonManager.showArrows ? show : hide;
|
||||
cameras.map(function(camera) {
|
||||
if (camera instanceof RecommendedCamera) {
|
||||
transform(camera);
|
||||
|
||||
camera.traverse(function(elt) {
|
||||
elt.raycastable = buttonManager.showArrows;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Update coins
|
||||
coins.forEach(function(coin) { coin.update(); });
|
||||
|
||||
// Update main camera
|
||||
var currentTime = Date.now() - previousTime;
|
||||
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
|
||||
// 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);
|
||||
THREEx.Transparency.update(cameras.mainCamera());
|
||||
renderer.render(scene, cameras.mainCamera());
|
||||
|
||||
// Remove borders of preview
|
||||
previewer.clear();
|
||||
|
||||
// Hide arrows in recommendation
|
||||
cameras.map(function(camera) { if (camera instanceof RecommendedCamera) 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;});
|
||||
}
|
||||
|
||||
return onWindowResize;
|
||||
|
||||
})();
|
||||
|
||||
function fullscreen() {
|
||||
isFullscreen = true;
|
||||
|
||||
if (!beenFullscreen) {
|
||||
beenFullscreen = true;
|
||||
alert('To quit fullscren mode, type ESC key');
|
||||
}
|
||||
|
||||
container.style.position = "absolute";
|
||||
container.style.cssFloat = "top-left";
|
||||
container.style.top = "50px";
|
||||
container.style.bottom = "0px";
|
||||
container.style.left = "0px";
|
||||
container.style.right = "0px";
|
||||
container.style.width="";
|
||||
container.style.height="";
|
||||
container.style.overflow = "hidden";
|
||||
|
||||
onWindowResize();
|
||||
}
|
||||
|
||||
function stopFullscreen() {
|
||||
isFullscreen = false;
|
||||
|
||||
container.style.position = "";
|
||||
container.style.cssFloat = "";
|
||||
container.style.top = "";
|
||||
container.style.bottom = "";
|
||||
container.style.left = "";
|
||||
container.style.right = "";
|
||||
container.style.width = container_size.width() + "px";
|
||||
container.style.height = container_size.height() + "px";
|
||||
|
||||
onWindowResize();
|
||||
}
|
||||
91
js/l3d/apps/stream-demo/main.js
Normal file
91
js/l3d/apps/stream-demo/main.js
Normal file
@@ -0,0 +1,91 @@
|
||||
var mesh_number = 25;
|
||||
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}, sphere, sphereLoader;
|
||||
var bigmesh;
|
||||
var raycaster;
|
||||
var objects = [];
|
||||
var spheres = new Array(mesh_number);
|
||||
var visible = 0;
|
||||
var previousTime;
|
||||
var loader;
|
||||
|
||||
var container_size = {width: 1067, height: 600};
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
// 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"});
|
||||
renderer.setSize(container_size.width, container_size.height);
|
||||
renderer.shadowMapEnabled = true;
|
||||
// renderer.setClearColor(0x000000);
|
||||
document.getElementById('container').appendChild(renderer.domElement);
|
||||
|
||||
// on initialise la scène
|
||||
scene = new THREE.Scene();
|
||||
raycaster = new THREE.Raycaster();
|
||||
|
||||
// init light
|
||||
var directional_light = new THREE.DirectionalLight(0x999999);
|
||||
directional_light.position.set(1, 0.5, 1).normalize();
|
||||
directional_light.castShadow = true;
|
||||
scene.add(directional_light);
|
||||
|
||||
var ambient_light = new THREE.AmbientLight(0x333333);
|
||||
scene.add(ambient_light);
|
||||
|
||||
// on initialise la camera que l’on place ensuite sur la scène
|
||||
camera = new Camera(50, container_size.width / container_size.height, 1, 100000);
|
||||
scene.add(camera);
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
|
||||
// Load the scene
|
||||
// loader = new THREE.OBJLoader();
|
||||
sphereLoader = new ProgressiveLoaderGeometry('/static/data/spheres/' + params.get.res + '.obj', scene, null);
|
||||
sphereLoader.load();
|
||||
sphere = sphereLoader.obj;
|
||||
|
||||
plane = new Plane(1000,1000);
|
||||
plane.translate(0,0,-100);
|
||||
plane.addToScene(scene);
|
||||
|
||||
|
||||
setInterval(animate, 20);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// requestAnimationFrame(animate);
|
||||
|
||||
var currentTime = Date.now() - previousTime;
|
||||
camera.update(isNaN(currentTime) ? 20 : currentTime);
|
||||
previousTime = Date.now();
|
||||
camera.look();
|
||||
|
||||
// sphere.addFace();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
camera.aspect = container.offsetWidth / container.offsetHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(container.offsetWidth, container.offsetHeight);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function hide(object) {
|
||||
object.traverse(function(object) {object.visible = false;});
|
||||
}
|
||||
|
||||
function show(object) {
|
||||
object.traverse(function(object) {object.visible = true;});
|
||||
}
|
||||
|
||||
function click(event) {
|
||||
// Nope
|
||||
}
|
||||
Reference in New Issue
Block a user