Tutorial is now clean (well.. let's say cleaner)

This commit is contained in:
Thomas FORGIONE 2015-07-09 09:50:11 +02:00
parent 7024d54d02
commit 69fb0db1eb
4 changed files with 132 additions and 184 deletions

View File

@ -96,6 +96,7 @@ function objectClickerOnClick(camera1, buttonManager, recommendations, coins) {
} else if (obj instanceof L3D.BaseRecommendation) { } else if (obj instanceof L3D.BaseRecommendation) {
obj.check();
camera1.moveHermite(obj); camera1.moveHermite(obj);
// Send event to DB // Send event to DB

View File

@ -76,7 +76,7 @@ var TutoCamera = function() {
this.collisions = true; this.collisions = true;
// Create tutorial // Create tutorial
this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size); this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size, arguments[10]);
this.shouldLock = true; this.shouldLock = true;

View File

@ -1,5 +1,5 @@
var nextStep; var nextStep;
var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size) { var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size, clickableObjects) {
this.camera = tutoCamera; this.camera = tutoCamera;
this.step = 0; this.step = 0;
this.coinNumber = 0; this.coinNumber = 0;
@ -7,6 +7,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
this.onWindowResize = onWindowResize; this.onWindowResize = onWindowResize;
this.container_size = container_size; this.container_size = container_size;
this.coins = coins; this.coins = coins;
this.clickableObjects = clickableObjects;
this.instructions = [ this.instructions = [
{ {
@ -103,6 +104,18 @@ TutorialSteps.prototype.setCameras = function(cameras) {
this.cameras = cameras; this.cameras = cameras;
}; };
TutorialSteps.prototype.addCoin = function(coin) {
this.coins.push(coin);
coin.addToScene(this.scene);
this.clickableObjects.push(coin);
}
TutorialSteps.prototype.addRecommendation = function(reco) {
this.cameras.push(reco);
reco.addToScene(this.scene);
this.clickableObjects.push(reco);
}
TutorialSteps.prototype.nextStep = function() { TutorialSteps.prototype.nextStep = function() {
if (this.step < this.instructions.length) { if (this.step < this.instructions.length) {
this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick); this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick);
@ -117,19 +130,15 @@ TutorialSteps.prototype.nextStep = function() {
Coin.max = 1; Coin.max = 1;
Coin.update(); Coin.update();
this.camera.allowed.keyboardRotate = true; this.camera.allowed.keyboardRotate = true;
this.coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback)); this.addCoin(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
this.coins[this.coins.length-1].addToScene(this.scene);
document.getElementById('container').appendChild(Coin.domElement); document.getElementById('container').appendChild(Coin.domElement);
break; break;
case 6: case 6:
Coin.max = 4; Coin.max = 4;
Coin.update(); Coin.update();
this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback)); this.addCoin(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
this.coins[this.coins.length-1].addToScene(this.scene); this.addCoin(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
this.coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback)); this.addCoin(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, 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; break;
case 9: case 9:
this.camera.move(this.camera.resetElements); this.camera.move(this.camera.resetElements);
@ -140,8 +149,7 @@ TutorialSteps.prototype.nextStep = function() {
case 11: case 11:
Coin.max = 5; Coin.max = 5;
Coin.update(); Coin.update();
this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback)); this.addCoin(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
this.coins[this.coins.length-1].addToScene(this.scene);
this.camera.move({ this.camera.move({
position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826), position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826),
target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249) target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
@ -149,8 +157,7 @@ TutorialSteps.prototype.nextStep = function() {
break; break;
case 14: case 14:
var cam = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[2]; var cam = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[2];
this.cameras.push(cam); this.addRecommendation(cam);
cam.addToScene(this.scene);
this.camera.move({ this.camera.move({
position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036), position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745) target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
@ -159,17 +166,13 @@ TutorialSteps.prototype.nextStep = function() {
case 16: case 16:
var cams = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height()); var cams = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height());
for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) { for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
this.cameras.push(cams[i]); this.addRecommendation(cams[i]);
cams[i].addToScene(this.scene);
} }
Coin.max = 8; Coin.max = 8;
Coin.update(); Coin.update();
this.coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback)); this.addCoin(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
this.coins[this.coins.length-1].addToScene(this.scene); this.addCoin(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
this.coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback)); this.addCoin(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, 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; break;
} }
this.step++; this.step++;

View File

@ -1,63 +1,76 @@
var beenFullscreen = false; // Let's be sure we avoid using global variables
var isFullscreen = false;
var main_section = document.getElementById('main-section');
var container_size = {
width: function() { return 1134; },
height: function() { return 768; }
};
var onWindowResize = (function() { var onWindowResize = (function() {
// Disable scrolling // Disable scrolling
window.onscroll = function () { window.scrollTo(0, 0); }; window.onscroll = function () { window.scrollTo(0, 0); };
var mesh_number = 25; window.onload = main;
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 stats;
var renderer, scene, container;
var clickableObjects = [];
var recommendations, objectClicker;
var previewer; var previewer;
var loader; var camera1;
var coins = []; var coins = [];
var previousTime; var previousTime;
var pointer;
var startCanvas;
var tutorial; var tutorial;
var camera1;
init(); function main() {
animate();
// Main container that holds everything
container = document.getElementById('container');
// Initialization
initThreeElements();
initCanvases();
initModels();
initListeners();
appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
// Set the good size of cameras
onWindowResize();
Coin.update();
// Start tutorial
tutorial.setCameras(recommendations);
tutorial.nextStep();
startCanvas.render(L3D.StartCanvas.Black);
// Start rendering
setInterval(render, 20);
}
function initThreeElements() {
function init() {
// Initialize scene // Initialize scene
scene = new THREE.Scene(); scene = new THREE.Scene();
// Disable log for this time
L3D.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 = 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); renderer.setClearColor(0x87ceeb);
// Initialize pointer camera
camera1 = new TutoCamera(
50,
container_size.width() / container_size.height(),
0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container, clickableObjects
);
tutorial = camera1.tutorial;
}
function initCanvases() {
// Initialize previewer // Initialize previewer
previewer = new L3D.Previewer(renderer, scene); previewer = new L3D.Previewer(renderer, scene);
previewer.domElement.style.position ="absolute"; previewer.domElement.style.position ="absolute";
previewer.domElement.style.cssFloat = 'top-left'; previewer.domElement.style.cssFloat = 'top-left';
previewer.domElement.width = container_size.width();
previewer.domElement.height = container_size.height();
// Initialize stats counter // Initialize stats counter
stats = new Stats(); stats = new Stats();
@ -65,81 +78,61 @@ function init() {
stats.domElement.style.position = 'absolute'; stats.domElement.style.position = 'absolute';
stats.domElement.style.cssFloat = "top-left"; stats.domElement.style.cssFloat = "top-left";
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 // Initialize pointer for pointer lock
var pointer = new L3D.MousePointer(camera1); pointer = new L3D.MousePointer(camera1);
pointer.domElement.width = container_size.width();
pointer.domElement.height = container_size.height();
// // Init start canvas
var startCanvas = new L3D.StartCanvas(camera1); startCanvas = new L3D.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 function initModels() {
tutorial = camera1.tutorial;
cameras = []; // Init recommendations
tutorial.setCameras(cameras); recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
// Load peach scene // init clickable objects
L3D.initPeach(camera1, scene); var i;
for (i = 0; i < coins.length; i++)
clickableObjects.push(coins[i]);
initListeners(); for (i =0; i < recommendations.length; i++)
clickableObjects.push(recommendations[i]);
tutorial.nextStep();
setInterval(animate, 20);
} }
function initListeners() { function initListeners() {
// Add listeners
window.addEventListener('resize', onWindowResize, false); 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 // HTML Bootstrap buttons
buttonManager = new ButtonManager(camera1, cameras, previewer); buttonManager = new ButtonManager(camera1, recommendations, previewer);
// Object clicker for hover and clicking recommendations
objectClicker = new L3D.ObjectClicker(
renderer,
camera1,
clickableObjects,
objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function
container
);
// Camera selecter for hover and clicking recommendations
cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager);
} }
function render() { function render() {
cameraSelecter.update();
// Stats for render
stats.begin();
objectClicker.update();
// Update recommendations (set raycastable if shown) // Update recommendations (set raycastable if shown)
var transform = buttonManager.showArrows ? show : hide; recommendations.map(function(reco) {
cameras.map(function(camera) { if (reco instanceof Recommendation) {
if (camera instanceof Recommendation) { reco.traverse(function(elt) {
transform(camera); elt.visible = elt.raycastable = buttonManager.showArrows;
camera.traverse(function(elt) {
elt.raycastable = buttonManager.showArrows;
}); });
} }
}); });
@ -153,7 +146,7 @@ function render() {
previousTime = Date.now(); previousTime = Date.now();
// Update the recommendations // Update the recommendations
cameras.map(function(camera) {camera.update(camera1);}); recommendations.map(function(reco) { reco.update(camera1);});
// Set current position of camera // Set current position of camera
camera1.look(); camera1.look();
@ -162,87 +155,38 @@ function render() {
renderer.setScissor(left, bottom, width, height); renderer.setScissor(left, bottom, width, height);
renderer.enableScissorTest(true); renderer.enableScissorTest(true);
renderer.setViewport(left, bottom, width, height); renderer.setViewport(left, bottom, width, height);
THREEx.Transparency.update(camera1);
renderer.render(scene, camera1); renderer.render(scene, camera1);
// Remove borders of preview // Remove borders of preview
previewer.clear(); previewer.clear();
// Hide arrows in recommendation // Hide arrows in recommendation
cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); }); recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
// Update transparent elements
THREEx.Transparency.update(camera1);
// Render preview // Render preview
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height()); previewer.render(container_size.width(), container_size.height());
}
function animate() { // Finish stats
// Render each frame
// requestAnimationFrame(animate);
// stats count the number of frames per second
stats.begin();
render();
stats.end(); stats.end();
} }
function onWindowResize() { function onWindowResize() {
container.style.width = container_size.width() + "px"; resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
container.style.height = container_size.height() + "px";
previewer.domElement.width = container_size.width(); recommendations.forEach(function(reco) {
previewer.domElement.height = container_size.height(); resetCameraAspect(reco.camera, container_size.width(), container_size.height());
});
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
render(); render();
} }
function hide(object) { // onWindowResize will be the only global function
object.traverse(function(object) {object.visible = false;});
}
function show(object) {
object.traverse(function(object) {object.visible = true;});
}
return onWindowResize; 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();
}