280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
var nextStep;
|
|
var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, containerSize, clickableObjects) {
|
|
this.camera = tutoCamera;
|
|
this.step = 0;
|
|
this.coinNumber = 0;
|
|
this.camera.allowed = {};
|
|
this.onWindowResize = onWindowResize;
|
|
this.containerSize = containerSize;
|
|
this.coins = coins;
|
|
this.clickableObjects = clickableObjects;
|
|
|
|
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 roof of the castle, just in 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 <em>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: "Recommendations can be displayed as 3D arrows like the one you just saw, or as viewports like this one",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Here are some more recommendations, try to browse the scene and find the missing red coins",
|
|
justclick:false
|
|
},
|
|
{
|
|
text:"Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick: false
|
|
},
|
|
{
|
|
text: "Tip : you can use the previous / next buttons in the bar at the bottom of the screen to go to the previous / next position",
|
|
justclick:false
|
|
},
|
|
{
|
|
text: "Congratulations ! You've successfully finished the tutorial ! Click on the green button to continue !",
|
|
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.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);
|
|
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:
|
|
if (!confirm('Do you want to keep pointer lock disabled ?')) {
|
|
document.getElementById('lock').checked = true;
|
|
this.camera.shouldLock = true;
|
|
this.camera.onPointerLockChange();
|
|
}
|
|
|
|
// Block camera
|
|
for (var key in this.camera.motion) {
|
|
this.camera.motion[key] = false;
|
|
}
|
|
|
|
Coin.domElement.style.display = "";
|
|
Coin.max = 1;
|
|
Coin.update();
|
|
this.camera.allowed.keyboardRotate = true;
|
|
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.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);
|
|
break;
|
|
case 10:
|
|
this.camera.allowed.keyboardTranslate = true;
|
|
break;
|
|
case 11:
|
|
Coin.max = 5;
|
|
Coin.set();
|
|
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)
|
|
});
|
|
break;
|
|
case 14:
|
|
this.firstReco = L3D.createPeachRecommendations(this.containerSize.width(), this.containerSize.height())[0];
|
|
this.addRecommendation(this.firstReco);
|
|
this.camera.move({
|
|
position: new THREE.Vector3(-9.157274598933608,3.6852142459329533,2.1820896816244444),
|
|
target: new THREE.Vector3(28.719309042259358,-7.287186618613339,-4.523939765031559)
|
|
});
|
|
break;
|
|
case 16:
|
|
this.secondReco = L3D.createPeachRecommendations(this.containerSize.width(), this.containerSize.height(), L3D.ViewportRecommendation)[1];
|
|
this.addRecommendation(this.secondReco);
|
|
this.secondReco.raycastable = true;
|
|
this.camera.move({
|
|
position: new THREE.Vector3(-4.450089930098798,1.9849620256150362,-6.290933967410013),
|
|
target: new THREE.Vector3(-41.36549967804652,3.333580368597787,-21.63478458275742)
|
|
});
|
|
break;
|
|
case 17:
|
|
var cams = L3D.createPeachRecommendations(this.containerSize.width(), this.containerSize.height());
|
|
for (var i = 2; i < cams.length; i++) {
|
|
this.addRecommendation(cams[i]);
|
|
}
|
|
Coin.total = 0;
|
|
Coin.max = 8;
|
|
Coin.set();
|
|
var coins = L3D.generateCoins(L3D.createPeachCoins());
|
|
for (i = 0; i < coins.length; i++) {
|
|
coins[i].rotating = true;
|
|
coins[i].callback = callback;
|
|
this.addCoin(coins[i]);
|
|
}
|
|
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: // Fallthrough
|
|
case 16: // Fallthrough
|
|
case 17: 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);
|
|
};
|