Tutorial is now clean (well.. let's say cleaner)
This commit is contained in:
Thomas FORGIONE
parent
7024d54d02
commit
69fb0db1eb
|
|
@ -96,6 +96,7 @@ function objectClickerOnClick(camera1, buttonManager, recommendations, coins) {
|
|||
|
||||
} else if (obj instanceof L3D.BaseRecommendation) {
|
||||
|
||||
obj.check();
|
||||
camera1.moveHermite(obj);
|
||||
|
||||
// Send event to DB
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ var TutoCamera = function() {
|
|||
this.collisions = true;
|
||||
|
||||
// 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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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.step = 0;
|
||||
this.coinNumber = 0;
|
||||
|
|
@ -7,6 +7,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
|
|||
this.onWindowResize = onWindowResize;
|
||||
this.container_size = container_size;
|
||||
this.coins = coins;
|
||||
this.clickableObjects = clickableObjects;
|
||||
|
||||
this.instructions = [
|
||||
{
|
||||
|
|
@ -103,6 +104,18 @@ TutorialSteps.prototype.setCameras = function(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() {
|
||||
if (this.step < this.instructions.length) {
|
||||
this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick);
|
||||
|
|
@ -117,19 +130,15 @@ TutorialSteps.prototype.nextStep = function() {
|
|||
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);
|
||||
this.addCoin(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
|
||||
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);
|
||||
this.addCoin(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
|
||||
this.addCoin(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
|
||||
this.addCoin(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
|
||||
break;
|
||||
case 9:
|
||||
this.camera.move(this.camera.resetElements);
|
||||
|
|
@ -140,8 +149,7 @@ TutorialSteps.prototype.nextStep = function() {
|
|||
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.addCoin(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
|
||||
this.camera.move({
|
||||
position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826),
|
||||
target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
|
||||
|
|
@ -149,8 +157,7 @@ TutorialSteps.prototype.nextStep = function() {
|
|||
break;
|
||||
case 14:
|
||||
var cam = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[2];
|
||||
this.cameras.push(cam);
|
||||
cam.addToScene(this.scene);
|
||||
this.addRecommendation(cam);
|
||||
this.camera.move({
|
||||
position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
|
||||
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
|
||||
|
|
@ -159,17 +166,13 @@ TutorialSteps.prototype.nextStep = function() {
|
|||
case 16:
|
||||
var cams = L3D.createPeachRecommendations(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);
|
||||
this.addRecommendation(cams[i]);
|
||||
}
|
||||
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);
|
||||
this.addCoin(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
|
||||
this.addCoin(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
|
||||
this.addCoin(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback));
|
||||
break;
|
||||
}
|
||||
this.step++;
|
||||
|
|
@ -178,11 +181,11 @@ TutorialSteps.prototype.nextStep = function() {
|
|||
|
||||
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 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';
|
||||
|
|
|
|||
|
|
@ -1,63 +1,76 @@
|
|||
var beenFullscreen = false;
|
||||
var isFullscreen = false;
|
||||
|
||||
var main_section = document.getElementById('main-section');
|
||||
|
||||
var container_size = {
|
||||
width: function() { return 1134; },
|
||||
height: function() { return 768; }
|
||||
};
|
||||
|
||||
// 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;
|
||||
window.onload = main;
|
||||
|
||||
var stats;
|
||||
var renderer, scene, container;
|
||||
var clickableObjects = [];
|
||||
var recommendations, objectClicker;
|
||||
var previewer;
|
||||
var loader;
|
||||
var camera1;
|
||||
var coins = [];
|
||||
var previousTime;
|
||||
var pointer;
|
||||
var startCanvas;
|
||||
var tutorial;
|
||||
var camera1;
|
||||
|
||||
init();
|
||||
animate();
|
||||
function main() {
|
||||
|
||||
// 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
|
||||
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.setSize(container_size.width(), container_size.height());
|
||||
// renderer.setSize(container_size.width(), container_size.height());
|
||||
renderer.shadowMapEnabled = true;
|
||||
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
|
||||
previewer = new L3D.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();
|
||||
|
|
@ -65,81 +78,61 @@ function init() {
|
|||
stats.domElement.style.position = 'absolute';
|
||||
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
|
||||
var pointer = new L3D.MousePointer(camera1);
|
||||
pointer.domElement.width = container_size.width();
|
||||
pointer.domElement.height = container_size.height();
|
||||
pointer = new L3D.MousePointer(camera1);
|
||||
|
||||
//
|
||||
var startCanvas = new L3D.StartCanvas(camera1);
|
||||
startCanvas.domElement.width = container_size.width();
|
||||
startCanvas.domElement.height = container_size.height();
|
||||
startCanvas.render();
|
||||
// Init start canvas
|
||||
startCanvas = new L3D.StartCanvas(camera1);
|
||||
|
||||
// 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;
|
||||
function initModels() {
|
||||
|
||||
cameras = [];
|
||||
tutorial.setCameras(cameras);
|
||||
// Init recommendations
|
||||
recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
|
||||
|
||||
// Load peach scene
|
||||
L3D.initPeach(camera1, scene);
|
||||
// init clickable objects
|
||||
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() {
|
||||
|
||||
// Add listeners
|
||||
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(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() {
|
||||
cameraSelecter.update();
|
||||
|
||||
// Stats for render
|
||||
stats.begin();
|
||||
|
||||
objectClicker.update();
|
||||
|
||||
// Update recommendations (set raycastable if shown)
|
||||
var transform = buttonManager.showArrows ? show : hide;
|
||||
cameras.map(function(camera) {
|
||||
if (camera instanceof Recommendation) {
|
||||
transform(camera);
|
||||
|
||||
camera.traverse(function(elt) {
|
||||
elt.raycastable = buttonManager.showArrows;
|
||||
recommendations.map(function(reco) {
|
||||
if (reco instanceof Recommendation) {
|
||||
reco.traverse(function(elt) {
|
||||
elt.visible = elt.raycastable = buttonManager.showArrows;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -153,7 +146,7 @@ function render() {
|
|||
previousTime = Date.now();
|
||||
|
||||
// Update the recommendations
|
||||
cameras.map(function(camera) {camera.update(camera1);});
|
||||
recommendations.map(function(reco) { reco.update(camera1);});
|
||||
|
||||
// Set current position of camera
|
||||
camera1.look();
|
||||
|
|
@ -162,87 +155,38 @@ function render() {
|
|||
renderer.setScissor(left, bottom, width, height);
|
||||
renderer.enableScissorTest(true);
|
||||
renderer.setViewport(left, bottom, width, height);
|
||||
THREEx.Transparency.update(camera1);
|
||||
renderer.render(scene, camera1);
|
||||
|
||||
// Remove borders of preview
|
||||
previewer.clear();
|
||||
|
||||
// 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
|
||||
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
|
||||
}
|
||||
previewer.render(container_size.width(), container_size.height());
|
||||
|
||||
function animate() {
|
||||
// Render each frame
|
||||
// requestAnimationFrame(animate);
|
||||
|
||||
// stats count the number of frames per second
|
||||
stats.begin();
|
||||
render();
|
||||
// Finish stats
|
||||
stats.end();
|
||||
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
container.style.width = container_size.width() + "px";
|
||||
container.style.height = container_size.height() + "px";
|
||||
resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
|
||||
|
||||
previewer.domElement.width = container_size.width();
|
||||
previewer.domElement.height = container_size.height();
|
||||
recommendations.forEach(function(reco) {
|
||||
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();
|
||||
|
||||
}
|
||||
|
||||
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() {
|
||||
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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue