From 4db349581be272c6f1e6480dcbd2bcb5fe74afca Mon Sep 17 00:00:00 2001 From: Michael Mainguy Date: Thu, 25 Apr 2024 12:38:29 -0500 Subject: [PATCH] Updated Tutorial. --- src/tutorial/introduction.ts | 107 +++++++++++++++++++++++------------ src/vrApp.ts | 5 +- 2 files changed, 74 insertions(+), 38 deletions(-) diff --git a/src/tutorial/introduction.ts b/src/tutorial/introduction.ts index d849d81..e06cc25 100644 --- a/src/tutorial/introduction.ts +++ b/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 = [ + { + '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 talkTrack = new Sound("talkTrack", "assets/sounds/introTalkTrack.mp3", this._scene, () => { - this.ready(); - }, { - loop: false, - autoplay: false, - volume: 1 - });*/ - this.ready(); - } - - private ready() { - const startButton = this.buildButton('Begin Tutorial'); - startButton.onPointerObservable.add((eventData: ActionEvent) => { + const controllerButton = this.buildButton('Tutorial'); + controllerButton.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 controllers(prev: HtmlButton, prevVideo: AbstractMesh) { - if (prevVideo.metadata) { + private step(index: number, prev?: HtmlButton, prevVideo?: AbstractMesh) { + if (prevVideo && prevVideo?.metadata) { prevVideo.metadata.video.pause(); prevVideo.metadata.video.remove(); prevVideo.dispose(); } - 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)); - } - - private showVideo(url: string) { + if (prev) { + prev.dispose(); + } + 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 makeObject(text: string, position: Vector3): AbstractMesh { diff --git a/src/vrApp.ts b/src/vrApp.ts index 3a1074d..49ac796 100644 --- a/src/vrApp.ts +++ b/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(); });