diff --git a/src/components/InteractiveObjects/InteractiveObject.js b/src/components/InteractiveObjects/InteractiveObject.js index b6446bb..5dd0d60 100644 --- a/src/components/InteractiveObjects/InteractiveObject.js +++ b/src/components/InteractiveObjects/InteractiveObject.js @@ -22,13 +22,12 @@ const InteractiveObjectsImports = { class InteractiveObject { constructor(gameEngine, obj) { this.name = obj.name; - this.ready = new Promise(async (resolve, reject) => { + return new Promise(async (resolve, reject) => { switch (obj.type || 'GenericObject') { case 'Group': this.object = new Group(); for (let g of obj.group){ - let go = new InteractiveObject(gameEngine, g); - let gameMesh = await go.ready; + let gameMesh = await new InteractiveObject(gameEngine, g); this.object.add(gameMesh.object); } break; @@ -78,9 +77,8 @@ class InteractiveObject { this.object.game = game; break; case 'VideoPlayer': - let vp = new VideoPlayer(gameEngine, gameEngine.assetPath + obj.$go.asset.name); - this.source = await vp.ready; - this.object = vp.object; + this.source = await new VideoPlayer(gameEngine, obj.$go.asset.name, gameEngine.assetPath); + this.object = this.source.object; break; case 'PuzzleGame1': case 'PuzzleGame2': diff --git a/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js b/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js index 63eecc4..6022a89 100644 --- a/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js +++ b/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js @@ -110,8 +110,7 @@ class MazeObject { //console.log('loadingggg', def.objects) def.objects?.forEach(async obj => { obj.room = room; - let go = new InteractiveObject(engine, obj) - await go.ready; + let go = await new InteractiveObject(engine, obj) go.object.scale.multiplyScalar(wallSize) go.object.position.multiplyScalar(wallSize) go.object.applyMatrix4(def.matrix); diff --git a/src/components/InteractiveObjects/TextObject.js b/src/components/InteractiveObjects/TextObject.js index 737b3f3..d6749fe 100644 --- a/src/components/InteractiveObjects/TextObject.js +++ b/src/components/InteractiveObjects/TextObject.js @@ -4,7 +4,6 @@ import { assignParams } from "@/lib/MeshUtils"; class TextObject { constructor(engine, obj) { - console.log('OBJ', obj) const txt = new Text(); // Set properties to configure: txt.text = obj.text; diff --git a/src/components/InteractiveObjects/VideoPlayer.js b/src/components/InteractiveObjects/VideoPlayer.js index 302929e..c08152a 100644 --- a/src/components/InteractiveObjects/VideoPlayer.js +++ b/src/components/InteractiveObjects/VideoPlayer.js @@ -2,12 +2,11 @@ import * as THREE from 'three'; class VideoPlayer { - constructor(engine, src){ - let vi, plane, data; - - this.ready = new Promise((resolve, reject)=>{ + constructor(engine, src, path = ''){ + let vi, plane; + return new Promise((resolve, reject)=>{ vi = document.createElement('video'); - vi.src = src; + vi.src = path + src; vi.addEventListener('loadedmetadata', ()=>{ this.aspect = vi.videoWidth / vi.videoHeight; let geometry = new THREE.PlaneGeometry( this.aspect, 1 ); @@ -23,23 +22,27 @@ class VideoPlayer { plane = new THREE.Mesh( geometry, material ); this.object = plane; engine.clickable.add(plane, ()=>{ - material.opacity = 1 if (vi.paused){ vi.play(); }else{ vi.pause(); } }); + + vi.addEventListener('play', ()=>{ + material.opacity = 1 + if (engine.dashboard?.active){ + engine.dashboard.attach(plane); + } + }) + vi.addEventListener('pause', ()=>{ + material.opacity = 0.5; + engine.dashboard?.detach(plane); + }) + this.video = vi; + resolve(this); }) - vi.addEventListener('play', ()=>{ - if (engine.dashboard?.active){ - engine.dashboard.attach(plane); - } - }) - vi.addEventListener('pause', ()=>{ - engine.dashboard?.detach(plane); - }) }) } } diff --git a/src/components/InteractiveObjects/VideoPlayer.vue b/src/components/InteractiveObjects/VideoPlayer.vue index 52769da..b57d7e4 100644 --- a/src/components/InteractiveObjects/VideoPlayer.vue +++ b/src/components/InteractiveObjects/VideoPlayer.vue @@ -5,7 +5,7 @@
{{ modelValue.title }}
- + diff --git a/src/components/SceneDesigner/Scene.vue b/src/components/SceneDesigner/Scene.vue index be1fe60..e40ecc5 100644 --- a/src/components/SceneDesigner/Scene.vue +++ b/src/components/SceneDesigner/Scene.vue @@ -23,6 +23,13 @@ + + + + + @@ -78,6 +85,9 @@ export default { this.modelValue.title = e.name } }, + assignIntro(e){ + this.modelValue.intro = e.id; + }, } } \ No newline at end of file diff --git a/src/components/SceneDesigner/Task.vue b/src/components/SceneDesigner/Task.vue index 224be11..bc49bf5 100644 --- a/src/components/SceneDesigner/Task.vue +++ b/src/components/SceneDesigner/Task.vue @@ -11,7 +11,7 @@ - + diff --git a/src/mixins/GameEnvironmentMixin.js b/src/mixins/GameEnvironmentMixin.js index dd9da36..cd006a6 100644 --- a/src/mixins/GameEnvironmentMixin.js +++ b/src/mixins/GameEnvironmentMixin.js @@ -1,4 +1,5 @@ import { InteractiveObject } from '@/components/InteractiveObjects/InteractiveObject'; +import { VideoPlayer } from '@/components/InteractiveObjects/VideoPlayer'; import { GameEngine } from '@/lib/GameEngine'; import { Hero } from '@/lib/Hero'; import { autoScale } from '@/lib/MeshUtils'; @@ -98,7 +99,7 @@ export default { async expandScenarioData(scene){ const promises = []; - ['environment', 'scene'].filter(e=>scene.data[e]).forEach(e=>{ + ['environment', 'scene', 'intro'].filter(e=>scene.data[e]).forEach(e=>{ promises.push(this.$api.gameObject.load(scene.data[e]).then(r=>scene.data['$'+e] = r.data)) }) @@ -124,13 +125,19 @@ export default { } if (this.scene.data.$scene){ let env = await gameEngine.load(this.scene.data.$scene.asset.name); - //console.log('ENV', env) this.setObjectAttributes(l, this.scene.data, env.scene, env, 100); gameEngine.activeObjects.add(env.scene); } + if (this.scene.data.$intro && this.env == 'GamePlaying'){ + let intro = await new VideoPlayer(gameEngine, this.scene.data.$intro.asset.name, gameEngine.assetPath); + gameEngine.activeObjects.add(intro.object); + intro.video.addEventListener('pause',()=>{ + intro.object.removeFromParent(); + }); + intro.video.play(); + } for (let i of this.scene.data.items || []) { - let io = new InteractiveObject(gameEngine, i.data) - await io.ready; + let io = await new InteractiveObject(gameEngine, i.data) //let gltf = await gameEngine.load(`/asset/default/${i.data.$go.asset.name}`); //console.log(i.data, io.object) diff --git a/src/plugins/params.js b/src/plugins/params.js index 13430f7..ebea9e4 100644 --- a/src/plugins/params.js +++ b/src/plugins/params.js @@ -33,7 +33,7 @@ export default { }, { value: 'video', icon: 'filmstrip', - type: 'Descriptive', + type: 'Video', color: 'deep-orange-darken-4' }, { value: 'audio',