video player as interactive object + move to HUD

src/components/GameDesigner/GameDesigner.vue

@@ -65,11 +65,8 @@
 
 <script>
 
-import { GameEngine } from '@/lib/GameEngine';
 import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
 
-let gameEngine = null;
-
 export default {
     mixins: [GameEnvironmentMixin],
     props:{

src/components/GamePlaying/GamePlaying.vue

@@ -52,12 +52,7 @@
 
 <script>
 
-import { GameEngine } from '@/lib/GameEngine';
-import { Hero } from '@/lib/Hero';
-import { Grass } from '@/components/InteractiveObjects/Grass';
-import { VideoPlayer } from '@/components/InteractiveObjects/VideoPlayer';
 import { useAppStore } from '@/stores/app';
-import { MazeQuizGame } from '../InteractiveObjects/MazeQuizGame/MazeQuizGame';
 
 import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
 

src/components/InteractiveObjects/InteractiveObject.js

@@ -10,6 +10,7 @@ import { PuzzleGame4 } from "./PuzzleGame4";
 // import { Game6 } from "./games/Game6";
 import { TextObject } from "./TextObject";
 import { ImageObject } from "./ImageObject";
+import { VideoPlayer } from "./VideoPlayer";
 
 const games = {PuzzleGame1, PuzzleGame2, PuzzleGame4};
 
@@ -18,7 +19,7 @@ class InteractiveObject {
         this.name = obj.name;
         this.ready = new Promise((resolve, reject) => {
             let mesh;
-            switch (obj.type) {
+            switch (obj.id) {
                 case 'group':
                     mesh = new Group();
                     obj.group.forEach(g => {
@@ -48,7 +49,7 @@ class InteractiveObject {
                     resolve(mesh);
                     break;
                 case 'gltf':
-                    console.log('loadingg', obj.value)
+                    //console.log('loadingg', obj.value)
                     new GLTFLoader().load(obj.value, (gltf) => {
                         let gltfObj = gltf.scene;
                         gltf.scene.traverse(function (object) {
@@ -81,11 +82,15 @@ class InteractiveObject {
                 case 'PuzzleGame4':
                 case 'PuzzleGame5':
                 case 'PuzzleGame6':
-                    var game = new games[obj.type](context, obj.args[0], obj.args[1], obj.args[2]);
+                    let game = new games[obj.type](context, obj.args[0], obj.args[1], obj.args[2]);
                     mesh = game.object;
                     mesh.game = game;
                     resolve(mesh);
                     break;
+                case 'VideoPlayer':
+                    let vp = new VideoPlayer(context, `/asset/default/${obj.$go.asset.name}`);
+                    vp.ready.then(resolve);
+                    break;
             }
         });
         this.ready.then((mesh) => {
@@ -137,6 +142,6 @@ const InteractiveObjectTypes = [
     }, {
         id: 'VideoPlayer', name: 'Video Player'
     }
-]
+];
 
 export { InteractiveObject, InteractiveObjectTypes }

src/components/InteractiveObjects/VideoPlayer.js

@@ -2,28 +2,78 @@ import * as THREE from 'three';
 
 
 class VideoPlayer {
-    constructor(context, video, w, h){
-        let geometry = new THREE.PlaneGeometry( w, h );
-        let map = new THREE.VideoTexture( video );
-		map.colorSpace = THREE.SRGBColorSpace;
-        let material = new THREE.MeshStandardMaterial( {
-            color: 0xffffff,
-            map,
-            transparent: true,
-            opacity: 0.5,
-        } );
-        let plane = new THREE.Mesh( geometry, material );
-        this.object = plane;
+    constructor(context, src){
+        let vi, plane, data;
 
-        context.clickable.add(plane, ()=>{
-            material.opacity = 0.9
-            if (video.paused){
-                video.play();
-            }else{
-                video.pause();
-            }
-        });
+        this.ready = new Promise((resolve, reject)=>{
+            vi = document.createElement('video');
+            vi.src = src;
+            vi.addEventListener('loadedmetadata', ()=>{
+                this.aspect = vi.videoWidth / vi.videoHeight;
+                let geometry = new THREE.PlaneGeometry( this.aspect, 1 );
+                let map = new THREE.VideoTexture( vi );
+                map.colorSpace = THREE.SRGBColorSpace;
+                let material = new THREE.MeshStandardMaterial( {
+                    color: 0xffffff,
+                    map,
+                    transparent: true,
+                    opacity: 0.5,
+                    side: THREE.DoubleSide
+                } );
+                plane = new THREE.Mesh( geometry, material );
+                this.object = plane;
+                context.clickable.add(plane, ()=>{
+                    material.opacity = 1
+                    if (vi.paused){
+                        vi.play();
+                    }else{
+                        vi.pause();
+                    }
+                });
+                resolve(plane);
+            })
+            vi.addEventListener('play', ()=>{
+                if (context.dashboard?.active){
+                    //console.log(plane);
+                    // plane.matrix.multiply(context.dashboard.group.matrix)
+                    // plane.applyMatrix4(plane.matrix)
+
+                    // let m1 = plane.matrix.clone(), m2 = context.dashboard.group.matrix.clone();
+                    // let m = m1.premultiply(m2);
+                    data = {
+                        parent: plane.parent,
+                        location: {
+                            position: plane.position.clone(),
+                            quaternion: plane.quaternion.clone(),
+                            scale: plane.scale.clone()
+                        }
+                    }
+                    console.log(data.location)
+                    context.dashboard.group.attach(plane);
+                    //plane.applyMatrix4(m.invert())
+
+
+                    context.motionQueue.add({
+                        o: plane,
+                        a: { 
+                            rotation: { x:0, y:0, z:0 },
+                            position: { x:0, y:0, z:-0.25 },
+                            scale: { x: 1, y:1, z:1 }
+                        },
+                        t: 1
+                    })
+                }
+            })
+            vi.addEventListener('pause', ()=>{
+                data.parent.attach(plane);
+                context.motionQueue.add({
+                    o: plane,
+                    a: data.location,
+                    t: 1
+                })
+            })
+        })
     }
 }
 
-export {VideoPlayer}
+export { VideoPlayer }