mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Tutorial.

Browse Source
This commit is contained in:
Michael Mainguy 2024-04-25 12:38:29 -05:00
parent d761a59d6d
commit 4db349581b
2 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/tutorial/introduction.ts
View File

@ -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 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 {

5
src/vrApp.ts
View File

@ -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();
});