2015-06-02 11:01:28 +02:00
var nextStep ;
2015-08-28 21:34:29 +02:00
var TutorialSteps = function ( tutoCamera , scene , coins , onWindowResize , containerSize , clickableObjects ) {
2015-05-27 11:02:51 +02:00
this . camera = tutoCamera ;
this . step = 0 ;
2015-06-03 10:06:55 +02:00
this . coinNumber = 0 ;
2015-05-27 11:02:51 +02:00
this . camera . allowed = { } ;
2015-06-02 11:01:28 +02:00
this . onWindowResize = onWindowResize ;
2015-08-28 21:34:29 +02:00
this . containerSize = containerSize ;
2015-06-03 10:06:55 +02:00
this . coins = coins ;
2015-07-09 09:50:11 +02:00
this . clickableObjects = clickableObjects ;
2015-05-27 11:02:51 +02:00
this . instructions = [
{
2015-09-04 16:31:21 +02:00
text : "Welcome to the tutorial. Click anywhere on the canvas to start. You will enter into the 'pointer lock' mode" ,
2015-06-25 14:40:11 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Move your mouse to look around. Press the escape key to unlock the pointer." ,
2015-06-25 14:40:11 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "You can also uncheck the <em>lock pointer</em> option at the bottom of the page to unlock the pointer." ,
2015-06-25 14:40:11 +02:00
justclick : false
2015-05-27 11:02:51 +02:00
} ,
{
2015-09-04 16:31:21 +02:00
text : "Now, the pointer is unlocked. Click and drag your mouse to look around." ,
2015-05-27 11:02:51 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Nice! You can also use the (2,4,6 and 8) keys or (k,j,l and i) keys to look around." ,
2015-05-27 11:02:51 +02:00
justclick : true
} ,
{
2015-09-04 16:31:21 +02:00
text : "Here is a red coin, click on it!" ,
2015-05-27 16:18:24 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Nice, there are a 3 more red coins around you, try to get them! Check the gauge (your score)! You can lock the pointer if you wish." ,
2015-05-28 10:43:58 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Two more!" ,
2015-05-28 10:43:58 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "One more!" ,
2015-05-28 10:43:58 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Nice! You will now learn to navigate in the scene." ,
2015-05-27 11:02:51 +02:00
justclick : true
2015-05-28 10:43:58 +02:00
} ,
{
2015-09-04 16:31:21 +02:00
text : "Press one of the arrow keys on your keyboard to move!" ,
2015-05-28 10:43:58 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "There is a red coin on the roof of the castle, just in front of you! Go and get it!" ,
2015-05-28 10:43:58 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "You got it! Now, click on the 'reset camera' button!" ,
2015-05-29 10:11:20 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Nice! Let me introduce you to <em>recommendations</em>" ,
2015-05-29 10:11:20 +02:00
justclick : true
} ,
{
2015-09-04 16:31:21 +02:00
text : "This is a recommendation, by hovering it, you should see a preview, and by clicking on it, you will automatically move towards the recommended viewpoint. Click on this recommendation to try." ,
2015-05-29 10:11:20 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "The recommendation will change color once you clicked on it, just like a web link." ,
2015-05-29 10:11:20 +02:00
justclick : true
} ,
2015-07-22 17:56:47 +02:00
{
2015-09-04 16:31:21 +02:00
text : "Recommendations can be displayed as 3D arrows like the one you just saw, or as viewports like this one. Click on this recommendation to proceed." ,
2015-07-22 17:56:47 +02:00
justclick : false
} ,
2015-05-29 10:11:20 +02:00
{
2015-07-22 17:01:36 +02:00
text : "Here are some more recommendations, try to browse the scene and find the missing red coins" ,
2015-05-29 10:11:20 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-05-29 10:11:20 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-05-29 10:11:20 +02:00
justclick : false
} ,
2015-07-22 17:01:36 +02:00
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-07-22 17:01:36 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-07-22 17:01:36 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-07-22 17:01:36 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-07-22 17:01:36 +02:00
justclick : false
} ,
{
2015-09-04 16:31:21 +02:00
text : "Tip: You can use the previous / next buttons in the control bar at the bottom of the screen to go to the previous / next position" ,
2015-07-22 17:01:36 +02:00
justclick : false
} ,
2015-05-29 10:11:20 +02:00
{
2015-09-04 16:31:21 +02:00
text : "Congratulations! You've successfully collected all the coins and completed the tutorial ! Click on the green button to continue!" ,
2015-05-28 10:43:58 +02:00
justclick : false
2015-05-27 11:02:51 +02:00
}
] ;
2015-06-02 11:01:28 +02:00
var self = this ;
nextStep = function ( ) { self . nextStep ( ) ; } ;
this . scene = scene ;
2015-06-25 14:59:22 +02:00
Coin . domElement . style . display = "none" ;
2015-07-01 10:14:15 +02:00
} ;
2015-06-02 11:01:28 +02:00
TutorialSteps . prototype . setCameras = function ( cameras ) {
this . cameras = cameras ;
2015-07-01 10:14:15 +02:00
} ;
2015-05-27 11:02:51 +02:00
2015-07-09 09:50:11 +02:00
TutorialSteps . prototype . addCoin = function ( coin ) {
this . coins . push ( coin ) ;
coin . addToScene ( this . scene ) ;
this . clickableObjects . push ( coin ) ;
2015-07-09 17:48:46 +02:00
} ;
2015-07-09 09:50:11 +02:00
TutorialSteps . prototype . addRecommendation = function ( reco ) {
this . cameras . push ( reco ) ;
reco . addToScene ( this . scene ) ;
this . clickableObjects . push ( reco ) ;
2015-07-09 17:48:46 +02:00
} ;
2015-07-09 09:50:11 +02:00
2015-05-27 11:02:51 +02:00
TutorialSteps . prototype . nextStep = function ( ) {
if ( this . step < this . instructions . length ) {
this . alert ( this . instructions [ this . step ] . text , this . instructions [ this . step ] . justclick ) ;
2015-06-03 10:06:55 +02:00
var callback = function ( ) { self . coinNumber ++ ; self . nextStep ( ) ; } ;
2015-05-28 10:43:58 +02:00
var self = this ;
2015-05-27 11:02:51 +02:00
switch ( this . step ) {
case 0 : break ;
2015-06-25 14:40:11 +02:00
case 3 : this . camera . allowed . mouseRotate = true ; break ;
2015-07-22 14:48:14 +02:00
case 4 :
this . camera . allowed . keyboardRotate = true ;
break ;
2015-06-25 14:40:11 +02:00
case 5 :
2015-07-22 14:48:14 +02:00
if ( ! confirm ( 'Do you want to keep pointer lock disabled ?' ) ) {
document . getElementById ( 'lock' ) . checked = true ;
this . camera . shouldLock = true ;
this . camera . onPointerLockChange ( ) ;
}
2015-08-03 00:00:07 +02:00
// Block camera
2015-08-04 18:59:24 +02:00
for ( var key in this . camera . motion ) {
this . camera . motion [ key ] = false ;
2015-08-03 00:00:07 +02:00
}
2015-06-25 14:59:22 +02:00
Coin . domElement . style . display = "" ;
2015-06-10 17:38:05 +02:00
Coin . max = 1 ;
Coin . update ( ) ;
2015-05-27 16:18:24 +02:00
this . camera . allowed . keyboardRotate = true ;
2015-07-09 09:50:11 +02:00
this . addCoin ( new Coin ( 0.4911245636058468 , 1.225621525492101 , - 5.11526684540265 , callback ) ) ;
2015-06-05 15:50:00 +02:00
document . getElementById ( 'container' ) . appendChild ( Coin . domElement ) ;
2015-05-27 16:18:24 +02:00
break ;
2015-06-25 14:40:11 +02:00
case 6 :
2015-06-10 17:38:05 +02:00
Coin . max = 4 ;
Coin . update ( ) ;
2015-07-09 09:50:11 +02:00
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 ) ) ;
2015-05-28 10:43:58 +02:00
break ;
2015-06-25 14:40:11 +02:00
case 9 :
2015-05-28 10:43:58 +02:00
this . camera . move ( this . camera . resetElements ) ;
break ;
2015-06-25 14:40:11 +02:00
case 10 :
2015-06-02 14:23:12 +02:00
this . camera . allowed . keyboardTranslate = true ;
2015-06-10 10:19:42 +02:00
break ;
2015-06-25 14:40:11 +02:00
case 11 :
2015-06-10 17:38:05 +02:00
Coin . max = 5 ;
2015-08-31 10:03:21 +02:00
Coin . set ( ) ;
2015-07-09 09:50:11 +02:00
this . addCoin ( new Coin ( 2.7378029903574026 , 2.953347730618792 , - 11.550836282321221 , callback ) ) ;
2015-06-10 10:19:42 +02:00
this . camera . move ( {
position : new THREE . Vector3 ( - 0.3528994281499122 , - 0.026355227893303856 , - 0.2766844454377826 ) ,
target : new THREE . Vector3 ( 13.645394042405439 , 12.337463485871524 , - 35.64876053273249 )
} ) ;
2015-05-28 10:43:58 +02:00
break ;
2015-06-25 14:40:11 +02:00
case 14 :
2015-08-28 21:34:29 +02:00
this . firstReco = L3D . createPeachRecommendations ( this . containerSize . width ( ) , this . containerSize . height ( ) ) [ 0 ] ;
2015-07-22 17:56:47 +02:00
this . addRecommendation ( this . firstReco ) ;
2015-05-29 10:11:20 +02:00
this . camera . move ( {
2015-07-22 17:56:47 +02:00
position : new THREE . Vector3 ( - 9.157274598933608 , 3.6852142459329533 , 2.1820896816244444 ) ,
target : new THREE . Vector3 ( 28.719309042259358 , - 7.287186618613339 , - 4.523939765031559 )
2015-05-29 10:11:20 +02:00
} ) ;
break ;
2015-06-25 14:40:11 +02:00
case 16 :
2015-08-28 21:34:29 +02:00
this . secondReco = L3D . createPeachRecommendations ( this . containerSize . width ( ) , this . containerSize . height ( ) , L3D . ViewportRecommendation ) [ 1 ] ;
2015-07-22 17:56:47 +02:00
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 :
2015-08-28 21:34:29 +02:00
var cams = L3D . createPeachRecommendations ( this . containerSize . width ( ) , this . containerSize . height ( ) ) ;
2015-07-22 17:56:47 +02:00
for ( var i = 2 ; i < cams . length ; i ++ ) {
2015-07-09 09:50:11 +02:00
this . addRecommendation ( cams [ i ] ) ;
2015-05-29 10:11:20 +02:00
}
2015-08-31 10:03:21 +02:00
Coin . total = 0 ;
2015-06-10 17:38:05 +02:00
Coin . max = 8 ;
2015-08-31 10:03:21 +02:00
Coin . set ( ) ;
2015-07-22 17:01:36 +02:00
var coins = L3D . generateCoins ( L3D . createPeachCoins ( ) ) ;
2015-07-22 17:56:47 +02:00
for ( i = 0 ; i < coins . length ; i ++ ) {
2015-07-22 17:01:36 +02:00
coins [ i ] . rotating = true ;
coins [ i ] . callback = callback ;
this . addCoin ( coins [ i ] ) ;
}
2015-06-10 10:19:42 +02:00
break ;
2015-05-27 11:02:51 +02:00
}
this . step ++ ;
}
2015-07-01 10:14:15 +02:00
} ;
2015-05-27 11:02:51 +02:00
TutorialSteps . prototype . nextAction = function ( ) {
switch ( this . step ) {
2015-07-09 09:50:11 +02:00
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' ;
2015-06-25 14:40:11 +02:00
case 11 : return 'translate-keyboard' ;
case 13 : return 'reset-camera' ;
2015-10-01 15:24:32 +02:00
case 15 : return 'recommendation' ;
case 16 : return ;
2015-07-22 17:56:47 +02:00
case 17 : return 'recommendation' ;
2015-05-28 10:43:58 +02:00
}
2015-07-01 10:14:15 +02:00
} ;
2015-05-28 10:43:58 +02:00
TutorialSteps . prototype . tryFinish = function ( ) {
2015-06-03 10:06:55 +02:00
if ( this . coinNumber === 8 ) {
2015-05-28 10:43:58 +02:00
console . log ( "Finished" ) ;
2015-05-27 11:02:51 +02:00
}
2015-07-01 10:14:15 +02:00
} ;
2015-05-27 11:02:51 +02:00
TutorialSteps . prototype . alert = function ( myString , justclicked ) {
this . notify ( myString , justclicked ) ;
2015-06-02 11:01:28 +02:00
this . onWindowResize ( ) ;
2015-07-01 10:14:15 +02:00
} ;
2015-05-27 11:02:51 +02:00
TutorialSteps . prototype . notify = function ( myString , justclick ) {
$ ( '#alert-placeholder' ) . html (
2015-06-10 10:19:42 +02:00
'<div id="toto" class="alert alert-warning alert-dismissable">' +
2015-05-27 11:02:51 +02:00
( justclick ?
'<button type="button" class="close" aria-hidden="true"' +
2015-06-02 11:01:28 +02:00
'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' +
2015-05-27 11:02:51 +02:00
'<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
'</button>' : '' ) +
2015-05-29 10:11:20 +02:00
'<span><strong>' +
2015-05-27 11:02:51 +02:00
myString +
2015-06-10 10:06:14 +02:00
( justclick ?
2015-09-04 16:31:21 +02:00
' <a href="#" onclick="setTimeout(onWindowResize, 100); nextStep();"><em>Click here to continue the tutorial. </em></span>' : '' ) +
2015-05-29 10:11:20 +02:00
'</strong></span>' +
2015-05-27 11:02:51 +02:00
'</div>'
2015-07-01 10:14:15 +02:00
) ;
2015-06-10 10:06:14 +02:00
2015-06-10 10:19:42 +02:00
$ ( '#toto' ) . removeClass ( 'alert-info' ) . addClass ( 'alert-danger' ) ;
2015-06-10 10:06:14 +02:00
setTimeout ( function ( ) {
2015-06-10 10:19:42 +02:00
$ ( '#toto' ) . removeClass ( 'alert-danger' ) . addClass ( 'alert-warning' ) ;
2015-06-10 10:06:14 +02:00
} , 500 ) ;
2015-07-01 10:14:15 +02:00
} ;