tforgione/3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/l3d/apps/prototype/GlobalFunctions.js vendored
View File

@ -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

2
js/l3d/apps/prototype/tutorial/TutoCamera.js vendored
View File

@ -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;

55
js/l3d/apps/prototype/tutorial/TutorialSteps.js vendored
View File

@ -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';

258
js/l3d/apps/prototype/tutorial/main.js vendored
View File

@ -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();
}