Updated Tutorial.

src/tutorial/introduction.ts

@@ -12,13 +12,52 @@ import {
 import {DefaultScene} from "../defaultScene";
 import {HtmlButton} from "../../../babylon-html";
 import Hls from "hls.js";
+import {Spinner} from "../objects/spinner";
 
+type Step = {
+    name: string;
+    video?: string;
+}
+const steps: Array<Step> = [
+    {
+        'name': 'Introduction',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/67c6fbbfba87cfaf689494953f6c4966/manifest/video.m3u8'
+    },
+    {
+        'name': 'Entering VR',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/1aee90d213aaad1c9ef2fbfc857262b9/manifest/video.m3u8'
+    },
+    {
+        'name': 'Basic Navigation',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/db06343306521b5d1503b7ecf5b511b0/manifest/video.m3u8'
+    },
+    {
+        'name': 'Creating Objects',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/9d41c70d12cba2edde99f9c45f135d8c/manifest/video.m3u8'
+    },
+    {
+        'name': 'Editing Objects',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/a4a019386c0c15c812ac7d445fe6bdfc/manifest/video.m3u8'
+    },
+    {
+        'name': 'Resizing Objects',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/440484fd4a6a17848a09fc2117dbcbf6/manifest/video.m3u8'
+    },
+    {
+        'name': 'Changing Settings',
+        'video': 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/8347e2b96d6e3f9a66007d48bb8ddeea/manifest/video.m3u8'
+    },
+    {'name': 'Done', 'video': null}
+
+]
 const logger = log.getLogger('Introduction');
 export class Introduction {
     private readonly _scene: Scene;
     private videoElement: HTMLVideoElement;
-
+    private spinner: Spinner;
     constructor() {
+        this.spinner = new Spinner();
+        this.spinner.show();
         logger.info('Introduction constructor');
         this._scene = DefaultScene.Scene;
         this.initialize();
@@ -29,6 +68,7 @@ export class Introduction {
         this.videoElement = vid;
         vid.setAttribute('autoplay', 'true');
         vid.setAttribute('playsinline', 'true');
+        vid.setAttribute('loop', 'false');
         vid.setAttribute('src', src);
 
         const texture = new VideoTexture("video", vid, this._scene, true);
@@ -43,12 +83,14 @@ export class Introduction {
             hls.loadSource(src);
             hls.attachMedia(vid);
             hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                vid.loop = false;
                 vid.play().then(() => {
-                    this.logger.debug("Video Playing");
+                    logger.debug("Video Playing");
                 });
             });
         } else if (vid.canPlayType('application/vnd.apple.mpegurl')) {
             vid.src = src;
+            vid.loop = false;
             vid.addEventListener('loadedmetadata', function () {
                 vid.play().then(() => {
 
@@ -61,25 +103,12 @@ export class Introduction {
     }
 
     private initialize() {
-        /*
+        const controllerButton = this.buildButton('Tutorial');
-        const talkTrack = new Sound("talkTrack", "assets/sounds/introTalkTrack.mp3", this._scene, () => {
+        controllerButton.onPointerObservable.add((eventData: ActionEvent) => {
-            this.ready();
-        }, {
-            loop: false,
-            autoplay: false,
-            volume: 1
-        });*/
-        this.ready();
-    }
-
-    private ready() {
-        const startButton = this.buildButton('Begin Tutorial');
-        startButton.onPointerObservable.add((eventData: ActionEvent) => {
             if (eventData.sourceEvent.type === "pointerup") {
-                this.start(startButton);
+                this.step(0, controllerButton, null);
             }
         }, -1, true, this, false);
-
     }
 
     private buildButton(name: string): HtmlButton {
@@ -89,31 +118,35 @@ export class Introduction {
         return button;
     }
 
-    private start(prev: HtmlButton) {
-        prev.dispose();
-        const controllerButton = this.buildButton('Controllers');
-        const video = this.buildVideo('https://customer-l4pyjzbav11fzy04.cloudflarestream.com/8b906146c75bb5d81e03d199707ed0e9/manifest/video.m3u8', new Vector3(0, 1.8, -.5));
-        controllerButton.onPointerObservable.add((eventData: ActionEvent) => {
-            if (eventData.sourceEvent.type === "pointerup") {
-                this.controllers(controllerButton, video);
-            }
-        }, -1, true, this, false);
 
-    }
+    private step(index: number, prev?: HtmlButton, prevVideo?: AbstractMesh) {
-
+        if (prevVideo && prevVideo?.metadata) {
-    private controllers(prev: HtmlButton, prevVideo: AbstractMesh) {
-        if (prevVideo.metadata) {
             prevVideo.metadata.video.pause();
             prevVideo.metadata.video.remove();
             prevVideo.dispose();
         }
+        if (prev) {
             prev.dispose();
-        const controllerButton = this.buildButton('Controllers 2');
+        }
-        const video = this.buildVideo('https://customer-l4pyjzbav11fzy04.cloudflarestream.com/8b906146c75bb5d81e03d199707ed0e9/manifest/video.m3u8', new Vector3(0, 1.8, -.5));
+        if (index < steps.length) {
+            const controllerButton = this.buildButton(steps[index].name);
+            if (steps[index].video) {
+                const video = this.buildVideo(steps[index].video, new Vector3(0, 1.8, -.5));
+                controllerButton.onPointerObservable.add((eventData: ActionEvent) => {
+                    if (eventData.sourceEvent.type === "pointerup") {
+                        this.step(index + 1, controllerButton, video);
+                    }
+                }, -1, true, this, false);
+            } else {
+                controllerButton.onPointerObservable.add((eventData: ActionEvent) => {
+                    if (eventData.sourceEvent.type === "pointerup") {
+                        localStorage.setItem('tutorialCompleted', 'true');
+                        controllerButton.dispose();
+                    }
+                }, -1, true, this, false);
             }
 
-    private showVideo(url: string) {
+        }
-
     }
 
     private makeObject(text: string, position: Vector3): AbstractMesh {

src/vrApp.ts

@@ -11,6 +11,7 @@ import {groundMeshObserver} from "./util/functions/groundMeshObserver";
 import {buildQuestLink} from "./util/functions/buildQuestLink";
 import {exportGltf} from "./util/functions/exportGltf";
 import {DefaultScene} from "./defaultScene";
+import {Introduction} from "./tutorial/introduction";
 
 const webGpu = false;
 export class VrApp {
@@ -60,7 +61,9 @@ export class VrApp {
             })
         }
         this.logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer');
-        //const intro = new Introduction();
+        if (!localStorage.getItem('tutorialCompleted')) {
+            const intro = new Introduction();
+        }
         this.engine.runRenderLoop(() => {
             scene.render();
         });