#80

src/components/InteractiveObjects/GenericObject/GenericObject.js

@@ -35,8 +35,10 @@ class GenericObject extends EventManager{
                             }
                         }
                         if (data.description){
-                            engine.dashboard.updateText(this.object.__onhud ? data.description : '', false, (d)=>{
-                                d && this.dispatchEvent({type:'finish'})
+                            engine.dashboard.updateText(this.object.__onhud ? data.description : '', {
+                                textScrolledCallback: (d)=>{
+                                    d && this.dispatchEvent({type:'finish'})
+                                }
                             })
                         }
                     }

src/components/InteractiveObjects/ImageObject/ImageObject.js

@@ -1,7 +1,9 @@
+import { EventManager } from "@/lib/EventManager";
 import { MeshStandardMaterial, MeshBasicMaterial, PlaneGeometry, Mesh, DoubleSide, Vector3 } from "three";
 
-class ImageObject {
+class ImageObject extends EventManager{
     constructor(engine, obj) {
+        super();
         return new Promise(async(resolve, reject)=>{
             if (obj.$go){
                 obj.path = engine.assetPath;
@@ -32,6 +34,12 @@ class ImageObject {
             }
             this.object = new Mesh(geo, mp.metalness ? new MeshStandardMaterial(mp) : new MeshBasicMaterial(mp));
 
+            if (obj.description) {
+                engine.clickable.add(this.object, ()=>{
+                    engine.dashboard.updateText(obj.description, {hideOnFinish: true})
+                })
+            }
+
             resolve(this)
         })
     }

src/components/InteractiveObjects/ImageObject/ImageObject.vue

@@ -2,6 +2,7 @@
     <div v-if="modelValue.go">
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
+        <v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
     </div>
     <asset-selector @select="assignTexture" :type="['Texture']">
         <template v-slot:activator="props">

src/components/InteractiveObjects/InteractiveObject.js

@@ -68,7 +68,7 @@ class InteractiveObject extends EventManager{
                         //process first interaction
                         this.io.once('interaction', ()=>{
                             if (obj.introText){
-                                engine.dashboard.updateText(obj.introText, true)
+                                engine.dashboard.updateText(obj.introText, {hideOnFinish: true});
                             }
                         })
                         this.io.addEventListener('interaction', ()=>{

src/components/InteractiveObjects/VideoPlayer/VideoPlayer.js

@@ -46,6 +46,13 @@ class VideoPlayer extends EventManager {
                     if (data.immersive || 1){
                         engine.immersive(true);
                     }
+                    if (data.description) {
+                        engine.dashboard.updateText(data.description, {
+                            hideOnFinish: true,
+                            startFrom: vi.currentTime / vi.duration,
+                            duration: vi.duration
+                        })
+                    }
                 }
 
                 const onPause = ()=>{
@@ -57,6 +64,9 @@ class VideoPlayer extends EventManager {
                     if (data.immersive || 1){
                         engine.immersive(false);
                     }
+                    if (data.description) {
+                        engine.dashboard.updateText('')
+                    }
                 }
 
                 vi.addEventListener('play', onPlay);

src/components/InteractiveObjects/VideoPlayer/VideoPlayer.vue

@@ -3,6 +3,7 @@
         <v-img :src="`/asset/thumb/${modelValue.go}.webp`" />
         <div class="text-caption text-center">{{ modelValue.title }}</div>
         <v-checkbox density="compact" v-model="modelValue.playInHud" hide-details :label="l.viewInHUD"></v-checkbox>
+        <v-textarea :label="l.description" v-model="modelValue.description"></v-textarea>
     </div>
     <asset-selector @select="assignVideoObject" :type="['Video']">
         <template v-slot:activator="props">

src/lib/Dashboard.js

@@ -121,39 +121,57 @@ class DashBoard extends EventManager {
 			sceneHeader.init(scene, startBtnCallback);
 		}
 
-		this.updateText = function(t, hideOnFinish = false, textScrolledCallback){
+		this.updateText = function(t, params = {}){
 			if (!textPlane) return;
 			textPlane.visible = !!t;
 			engine.motionQueue.clear(text);
 			text.text = t;
 			text.anchorY = 0.03 * dashHeight;
 			text.sync(async()=>{
+				//console.log(text.clipRect);
 				let dMax = text.textRenderInfo.blockBounds[3] - text.textRenderInfo.blockBounds[1];
 				let dh = dMax + text.clipRect[1];
+				if (params.startFrom){
+					text.anchorY = text.anchorY + (-dh -text.anchorY) * params.startFrom;
+				}
 				if (dh > 0){
-					let updateFn = ()=>{
-						//text.sync();
-						if (text.textRenderInfo.blockBounds[1]> text.clipRect[1] * 1.33 ){
-							textScrolledCallback?.(true);
-							textScrolledCallback = null;
-							if (hideOnFinish){
-								this.updateText('')
-							}
-						}
-					}
+					// let updateFn = ()=>{
+					// 	//text.sync();
+					// 	//console.log(text.clipRect, text.textRenderInfo.blockBounds)
+					// 	if (text.textRenderInfo.blockBounds[1] > text.clipRect[1] ){
+					// 		params.textScrolledCallback?.(true);
+					// 		params.textScrolledCallback = null;
+					// 		if (params.hideOnFinish){
+					// 			this.updateText('')
+					// 		}
+					// 	}
+					// }
 					engine.motionQueue.add({
 						o: text,
-						a: { anchorY: - dMax },
-						t: dMax*99 / dashHeight,
-						u: updateFn
+						a: { anchorY: -dh },
+						t: params.duration ? (params.duration * (1-params.startFrom||0)) : (dMax*77 / dashHeight),
+						f: ()=>{
+							params.textScrolledCallback?.(true);
+							params.textScrolledCallback = null;
+							if (params.hideOnFinish){
+								this.updateText('')
+							}else{
+								engine.motionQueue.add({
+									o: text,
+									a: { anchorY: -dMax },
+									t: 4,
+									f: params.textFinishCallback
+								})
+							}
+						}
 					})
 				}else{
-					if (hideOnFinish){
+					if (params.hideOnFinish){
 						await Utils.wait(10000);
 						if (text.text == t) this.updateText('')
-						textScrolledCallback?.(false)
+						params.textScrolledCallback?.(false)
 					}else{
-						textScrolledCallback?.(false)
+						params.textScrolledCallback?.(false)
 					}
 				}
 			})