2015-06-02 11:01:28 +02:00
var nextStep ;
var TutorialSteps = function ( tutoCamera , scene , onWindowResize , container _size ) {
2015-05-27 11:02:51 +02:00
this . camera = tutoCamera ;
this . step = 0 ;
2015-05-28 10:43:58 +02:00
this . coins = 0 ;
2015-05-27 11:02:51 +02:00
this . camera . allowed = { } ;
2015-06-02 11:01:28 +02:00
this . onWindowResize = onWindowResize ;
this . container _size = container _size ;
2015-05-27 11:02:51 +02:00
this . instructions = [
{
text : "Welcome to this tutorial ! Click on the right arrow to go to the next instruction !" ,
justclick : true
} ,
{
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
} ,
{
2015-05-27 16:18:24 +02:00
text : "Here is a red coin, click on it !" ,
justclick : false
} ,
{
2015-05-28 10:43:58 +02:00
text : "Nice, there are a few coins around you, try to get them ! 1/4" ,
justclick : false
} ,
{
text : "2/4" ,
justclick : false
} ,
{
text : "3/4" ,
justclick : false
} ,
{
text : "Nice ! You will now learn to translate the camera" ,
2015-05-27 11:02:51 +02:00
justclick : true
2015-05-28 10:43:58 +02:00
} ,
{
text : "Try pressing the up key to go forward !" ,
justclick : false
} ,
{
text : "There is a red coin on the top of the castle ! Try to find it by targetting the place where you want to go with the mouse, and then using the arrow keys to go there" ,
justclick : false
} ,
{
2015-05-29 10:11:20 +02:00
text : "You got it ! Try to click on reset camera !" ,
justclick : false
} ,
{
text : "Nice ! Let me introduce you to <emp>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 : "Here are some more recommendations, try to browse the scene and find the missing red coins (5/8)" ,
justclick : false
} ,
{
text : "6/8 : you can use the arrow buttons to go to the previous / next position" ,
justclick : false
} ,
{
text : "7/8 ! Only one more !" ,
justclick : false
} ,
{
text : "Congratulations ! You've successfully finished the tutorial !" ,
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 ;
}
TutorialSteps . prototype . setCameras = function ( cameras ) {
this . cameras = cameras ;
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-05-28 10:43:58 +02:00
var callback = function ( ) { self . coins ++ ; self . nextStep ( ) ; } ;
var self = this ;
2015-05-27 11:02:51 +02:00
switch ( this . step ) {
case 0 : break ;
case 1 : this . camera . allowed . mouseRotate = true ; break ;
case 2 : this . camera . allowed . keyboardRotate = true ; break ;
2015-05-27 16:18:24 +02:00
case 3 :
this . camera . allowed . keyboardRotate = true ;
2015-05-29 10:11:20 +02:00
coins . push ( new Coin ( 0.4911245636058468 , 1.225621525492101 , - 5.11526684540265 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-27 16:18:24 +02:00
break ;
2015-05-28 10:43:58 +02:00
case 4 :
2015-06-02 14:44:02 +02:00
coins . push ( new Coin ( 1.4074130964382279 , 0.6458319586843252 , - 6.75244526999632 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-28 10:43:58 +02:00
coins . push ( new Coin ( - 4.2701659473968965 , 0.6745750513698942 , - 0.484545726832743 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-28 10:43:58 +02:00
coins . push ( new Coin ( - 4.336597108439718 , 0.4203578350484251 , - 8.447211342176862 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-28 10:43:58 +02:00
break ;
case 7 :
this . camera . move ( this . camera . resetElements ) ;
break ;
case 8 :
2015-06-02 14:23:12 +02:00
this . camera . allowed . keyboardTranslate = true ;
2015-05-28 10:43:58 +02:00
coins . push ( new Coin ( 2.7378029903574026 , 2.953347730618792 , - 11.550836282321221 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-28 10:43:58 +02:00
break ;
2015-05-29 10:11:20 +02:00
case 12 :
2015-06-02 11:01:28 +02:00
var cam = createPeachCameras ( this . container _size . width ( ) , this . container _size . height ( ) ) [ 2 ] ;
this . cameras . push ( cam ) ;
cam . addToScene ( this . scene ) ;
2015-05-29 10:11:20 +02:00
this . camera . move ( {
position : new THREE . Vector3 ( 0.24120226734236713 , 0.2009624547018851 , - 0.5998422840047036 ) ,
target : new THREE . Vector3 ( 24.021711452218575 , 7.072419314071788 , - 32.020702608601745 )
} ) ;
break ;
case 14 :
2015-06-02 11:01:28 +02:00
var cams = createPeachCameras ( this . container _size . width ( ) , this . container _size . height ( ) ) ;
2015-05-29 10:11:20 +02:00
for ( var i = 0 ; i < cams . length ; i == 1 ? i += 2 : i ++ ) {
2015-06-02 11:01:28 +02:00
this . cameras . push ( cams [ i ] ) ;
cams [ i ] . addToScene ( this . scene ) ;
2015-05-29 10:11:20 +02:00
}
coins . push ( new Coin ( 3.701112872561801 , - 0.4620393514856378 , - 3.3373375945128085 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-29 10:11:20 +02:00
coins . push ( new Coin ( 6.694675339780243 , - 1.2480369397526456 , - 1.992336719279164 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-29 10:11:20 +02:00
coins . push ( new Coin ( - 2.458336118265302 , - 1.549510268763568 , - 11.186153614421212 , callback ) ) ;
2015-06-02 11:01:28 +02:00
coins [ coins . length - 1 ] . addToScene ( this . scene ) ;
2015-05-27 11:02:51 +02:00
}
this . step ++ ;
}
}
TutorialSteps . prototype . nextAction = function ( ) {
switch ( this . step ) {
case 2 : return 'rotate-mouse' ;
case 3 : return 'rotate-keyboard' ;
2015-05-28 10:43:58 +02:00
case 9 : return 'translate-keyboard' ;
2015-05-29 10:11:20 +02:00
case 11 : return 'reset-camera' ;
case 13 : return 'recommendation' ;
2015-05-28 10:43:58 +02:00
}
}
TutorialSteps . prototype . tryFinish = function ( ) {
if ( this . coins === 8 ) {
console . log ( "Finished" ) ;
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-05-27 11:02:51 +02:00
}
TutorialSteps . prototype . notify = function ( myString , justclick ) {
$ ( '#alert-placeholder' ) . html (
2015-05-29 10:11:20 +02:00
'<div class="alert alert-' + ( justclick ? 'warning' : 'info' ) + ' 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-05-29 10:11:20 +02:00
'</strong></span>' +
2015-05-27 11:02:51 +02:00
'</div>'
) ;
}