refactoring

src/components/AssetsManagement/AssetSelector.vue

@@ -2,9 +2,6 @@
     <slot name="activator" v-bind="activatorProps" @click="dialog = !dialog"></slot>
     <v-dialog transition="dialog-bottom-transition" fullscreen v-model="dialog">
         <v-card title="Assets">
-            <v-container v-if="type?.includes('GameObject')">
-                <v-btn v-for="(v, i) in InteractiveObjectTypes" @click="select(v, 'InteractiveObject')">{{ v.name }}</v-btn>
-            </v-container>
             <AssetBrowser :query="query" @select="select" :hideFilter="true"></AssetBrowser>
             <v-card-actions>
                 <v-btn text="Close" color="primary" @click="dialog = false"></v-btn>
@@ -15,8 +12,6 @@
 
 <script>
 
-import { InteractiveObjectTypes } from '../InteractiveObjects/InteractiveObject';
-
 export default {
     props:[
         'modelValue', 'type'
@@ -24,7 +19,6 @@ export default {
     emits:['select'],
     data(){
         return {
-            InteractiveObjectTypes,
             query: {
                 type: { $in: this.$p.objectTypes.filter(t=>!this.type || this.type.includes(t.type)).map(t=>t.value) }
             },

src/components/InteractiveObjects/ClassicPuzzle.js

@@ -1,7 +1,8 @@
-import { Color, Group, EventDispatcher, DoubleSide, RepeatWrapping } from "three"
+import { Color, Group, DoubleSide, RepeatWrapping } from "three"
+import { EventManager } from '@/lib/EventManager';
 import { centerOrigin } from "@/lib/MeshUtils";
 
-class ClassicPuzzle extends EventDispatcher  {
+class ClassicPuzzle extends EventManager {
     emits = ['finish']
     constructor(engine, data, objPrefix='Plane'){
         super();
@@ -55,6 +56,7 @@ class ClassicPuzzle extends EventDispatcher  {
             console.log(map )
             map.needsUpdate = true;
             defaultMaterial.emissiveIntensity=.05
+            defaultMaterial.lightMapIntensity=10;
             console.log(defaultMaterial);
             let doneMaterial = defaultMaterial.clone();
             doneMaterial.emissive = new Color(10,114,10);

src/components/InteractiveObjects/GenenricObject.js

@@ -1,7 +1,7 @@
 import { getBoundingBox, getBoundingBoxCenterPoint, getBoundingBoxMaxLength, centerOrigin } from "@/lib/MeshUtils";
-import { EventDispatcher, SphereGeometry, Mesh, MeshStandardMaterial, BackSide } from "three";
+import { EventManager } from '@/lib/EventManager';
 
-class GenericObject extends EventDispatcher{
+class GenericObject extends EventManager{
     emits = ['finish']
     constructor(engine, data){
         super();
@@ -11,7 +11,7 @@ class GenericObject extends EventDispatcher{
 
             if (!data.exclude){
                 engine.clickable.add(this.object, async e=>{
-                    this.object._active = !this.object._active;
+                    this.object.__onhud = !this.object.__onhud;
                     if (engine.dashboard){
                         if (data.hud){
                             if (this.object._hud ){
@@ -36,7 +36,7 @@ class GenericObject extends EventDispatcher{
                             }
                         }
                         if (data.description){
-                            engine.dashboard.updateText(this.object._active ? data.description : '', (d)=>{
+                            engine.dashboard.updateText(this.object.__onhud ? data.description : '', (d)=>{
                                 d && this.dispatchEvent({type:'finish'})
                             })
                         }

src/components/InteractiveObjects/GenericObject.vue

@@ -1,6 +1,11 @@
 <template>
     <div>
-        <v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
+        <asset-selector @select="assignGameObject" :type="['GameObject']">
+            <template v-slot:activator="props">
+                <v-btn v-bind="props" prepend-icon="mdi-panorama-outline" color="success" block>Choose game object</v-btn>
+            </template>
+        </asset-selector>
+        <v-textarea :label="l.description" v-model="modelValue.description" class="mt-3"></v-textarea>
         <v-checkbox density="compact" v-model="modelValue.hud" hide-details label="Observe in head-up display"></v-checkbox>
         <v-checkbox density="compact" v-model="modelValue.exclude" hide-details label="Disable interactions"></v-checkbox>
         <v-checkbox density="compact" v-model="modelValue.noPhysics" hide-details label="Disable collisions"></v-checkbox>
@@ -24,6 +29,17 @@ export default {
         modelValue: Object
     },
     methods:{
+        assignGameObject(e){
+            this.modelValue.go = e.id;
+            if (this.modelValue.id == this.modelValue.title){
+                this.modelValue.title = e.name
+            }
+            // if (e.type == 'InteractiveObject'){
+            //     this.modelValue.type = e.id;
+            // }else{
+            //     this.modelValue.type = 'GenericObject'
+            // }
+        }
     }
 }
 

src/components/InteractiveObjects/GltfObject.js

@@ -23,24 +23,6 @@ class GltfObject {
             }
             this.object = gltfObj;
             this.source = gltf;
-            
-            if (obj.distance) {
-                const o = this.object;
-                let dstm = obj.distance;
-                var oldBR = o.onBeforeRender;
-                o.visible = false;
-                engine.addEventListener('beforeRender', function () {
-                    oldBR && oldBR.apply(this, arguments);
-                    var v = new Vector3();
-                    o.getWorldPosition(v);
-                    var dst = engine.camera.position.distanceTo(v);
-                    if (dst <= dstm && !o.visible) {
-                        o.visible = true;
-                    }else if (dst > dstm && o.visible){
-                        o.visible = false;
-                    }
-                });
-            }
             resolve(this)
         })
     }

src/components/InteractiveObjects/ImageObject.js

@@ -27,25 +27,7 @@ class ImageObject {
                 }
             }
             this.object = new Mesh(geo, mp.metalness ? new MeshStandardMaterial(mp) : new MeshBasicMaterial(mp));
-            
+
-            if (obj.distance) {
-                const o = this.object;
-                let dstm = obj.distance;
-                var oldBR = o.onBeforeRender;
-                o.material.opacity = 0.01;
-                o.onBeforeRender = function (renderer, scene, camera) {
-                    oldBR && oldBR.apply(this, arguments);
-                    var v = new Vector3();
-                    o.getWorldPosition(v);
-                    var dst = camera.position.distanceTo(v);
-                    if (dst < dstm * 2 && dst > dstm * 1) {
-                        o.material.opacity = dstm * 1 - (dst - dstm * 1);
-                    }
-                    if (dst < .5 * dstm) {
-                        o.material.opacity = dstm * dst * 2;
-                    }
-                };
-            }
             resolve(this)
         })
     }

src/components/InteractiveObjects/PuzzleGame1.js

@@ -1,7 +1,8 @@
-import { BoxGeometry, Mesh, MeshStandardMaterial, Group, EventDispatcher } from 'three';
+import { BoxGeometry, Mesh, MeshStandardMaterial, Group } from 'three';
 import { centerOrigin } from '@/lib/MeshUtils';
+import { EventManager } from '@/lib/EventManager';
 
-class PuzzleGame1 extends EventDispatcher {
+class PuzzleGame1 extends EventManager {
     emits = ['finish']
     constructor(engine, data) {
         super();

src/components/InteractiveObjects/PuzzleGame2.js

@@ -1,7 +1,8 @@
-import { BoxGeometry, Mesh, MeshBasicMaterial, Group, EventDispatcher } from 'three';
+import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
 import { centerOrigin } from '@/lib/MeshUtils';
+import { EventManager } from '@/lib/EventManager';
 
-class PuzzleGame2 extends EventDispatcher {
+class PuzzleGame2 extends EventManager {
     emits = ['finish']
     constructor(engine, data) {
         super();

src/components/InteractiveObjects/TextObject.js

@@ -9,11 +9,11 @@ class TextObject {
         txt.text = obj.text;
         txt.fontSize = 0.033;
         txt.lineHeight = 1.1;
-        txt.maxWidth = obj.width;
+        //txt.maxWidth = obj.width;
         txt.textAlign = 'center';
         txt.font = obj.fontPath;
-        txt.anchorX = obj.anchorX || 'center';
+        txt.anchorX = 'center';
-        txt.anchorY = obj.anchorY ||  'bottom';
+        txt.anchorY = 'bottom';
         txt.curveRadius = 0;
         txt.outlineColor = 0xffffff;
         txt.outlineWidth = '15%';
@@ -27,26 +27,11 @@ class TextObject {
             side: DoubleSide
         });
         txt.material = m;
-        txt.sync();
+        txt.sync(()=>{
+            txt.material[1].opacity = 1;
+        });
         this.txt = txt;
         this.object = txt;
-        if (obj.distance) {
-            let dstm = obj.distance;
-            var oldBR = txt.onBeforeRender;
-            txt.material[1].opacity = 0.01;
-            txt.onBeforeRender = function (renderer, scene, camera) {
-                oldBR && oldBR.apply(this, arguments);
-                var v = new Vector3();
-                txt.getWorldPosition(v);
-                var dst = camera.position.distanceTo(v);
-                if (dst < dstm * 2 && dst > dstm * 1) {
-                    txt.material[1].opacity = dstm * 1 - (dst - dstm * 1);
-                }
-                if (dst < .5 * dstm) {
-                    txt.material[1].opacity = dstm * dst * 2;
-                }
-            };
-        }
     }
 }
 

src/components/InteractiveObjects/VideoPlayer.js

@@ -1,9 +1,10 @@
 import { 
     PlaneGeometry, MeshBasicMaterial, SRGBColorSpace, 
-    VideoTexture, DoubleSide, Mesh, EventDispatcher 
+    VideoTexture, DoubleSide, Mesh
 } from 'three';
 
-class VideoPlayer extends EventDispatcher {
+import { EventManager } from '@/lib/EventManager';
+class VideoPlayer extends EventManager {
     emits = ['finish']
     constructor(engine, data){
         super();

src/lib/Clickable.js

@@ -26,7 +26,7 @@ class Clickable {
             let forExecute = [];
             objects.filter(o=>{
                 do {
-                    if (o.__locked) return false;
+                    if (o.__active === false) return false;
                     o = o.parent;
                 } while (o);
                 return true;

src/lib/EventManager.js

@@ -0,0 +1,11 @@
+import { EventDispatcher } from "three";
+
+class EventManager extends EventDispatcher{
+    forwardEvents(object){
+        this.emits?.forEach(e=>{
+            this.addEventListener(e, object.dispatchEvent.bind(object))
+        })
+    }
+}
+
+export { EventManager }

src/lib/MeshUtils.js

@@ -2,7 +2,7 @@ import { TextureLoader, Box3, Vector3, Group } from "three";
 
 function assignParams(mesh, params){
     ['scale', 'rotation', 'position'].forEach(p=>params[p] && mesh[p].fromArray(params[p]));
-    ['visible', 'name', 'fontSize', 'color'].forEach(p=>{
+    ['visible', 'name', 'fontSize', 'color', 'lineHeight', 'maxWidth', 'anchorX', 'anchorY'].forEach(p=>{
         if (params[p]!==undefined) mesh[p] = params[p];
     });
 }