objects locking system

src/lib/Clickable.js

@@ -24,7 +24,13 @@ class Clickable {
         this.update = function (mouse, camera, event) {
             raycaster.setFromCamera(mouse, camera);
             let forExecute = [];
-            objects.forEach(o => {
+            objects.filter(o=>{
+                do {
+                    if (o.__locked) return false;
+                    o = o.parent;
+                } while (o);
+                return true;
+            }).forEach(o => {
                 o.getWorldPosition(v);
                 if (camera.position.distanceTo(v) <= o._clickable.distance && o.visible) {
                     const intersects = raycaster.intersectObject(o);

src/lib/Dashboard.js

@@ -5,6 +5,7 @@ import {
 
 import { Text } from "troika-three-text";
 class DashBoard {
+	#points = 0;
 	constructor(engine) {
 		let svg = p=>`<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
@@ -25,7 +26,6 @@ class DashBoard {
 		let updating = false;
 		let params = {}
 		let occupied = false;
-		let points = 0;
 		
 		img.addEventListener('load', function () {
 			ctx.drawImage(img, 0, 0, engine.w, engine.h); 
@@ -152,13 +152,13 @@ class DashBoard {
 		this.levelProgress = levelProgress;
 
 		this.addPoints = function(p){
-			points += p;
+			this.#points += p;
 			engine.motionQueue.add({
 				o: pointsText,
 				a: {rotation:{y: Math.PI}, scale:{x:1.5, y:1.5, z:1.5}},
 				t: 0.25,
 				f:()=>{
-					pointsText.text = points;
+					pointsText.text = this.#points;
 					pointsText.sync();
 					engine.motionQueue.add({
 						o: pointsText,
@@ -242,13 +242,11 @@ class DashBoard {
 			object._hud.parent?.attach(object);
 			hud.rotation.y = 0;
 			hud.visible = false;
-			if (!opts.skipTransition){
-				engine.motionQueue.add({
-					o: object,
-					a: object._hud.placement,
-					t: 1
-				});
-			}
+			engine.motionQueue.add({
+				o: object,
+				a: object._hud.placement,
+				t: opts.skipTransition ? 0 : 1
+			});
 			delete object._hud;
 			occupied = false;
 			hudAnimation = null;
@@ -268,6 +266,10 @@ class DashBoard {
 	set active(v){
 		this.group.visible = v;
 	}
+
+	get points(){
+		return this.#points;
+	}
 }
 
 class ProgressBar{

src/lib/GameEngine.js

@@ -16,6 +16,8 @@ import { Clickable } from './Clickable.js';
 import { DashBoard } from './Dashboard.js';
 import { MotionEngine } from './MotionEngine.js';
 
+THREE.Cache.enabled = true
+
 const assetPath = '/asset/default/';
 
 class GameEngine extends THREE.EventDispatcher{
@@ -161,7 +163,7 @@ class GameEngine extends THREE.EventDispatcher{
 
         domNode.appendChild(renderer.domElement);
 
-        let texture = await this.loadTexture('/static/textures/bck.webp', '');
+        let texture = await GameEngine.loadTexture('/static/textures/bck.webp', '');
         // let bck = await this.loadTexture('/static/textures/bck.webp');
         // bck.premultiplyAlpha = true;
         texture.mapping = THREE.EquirectangularReflectionMapping;
@@ -415,18 +417,8 @@ class GameEngine extends THREE.EventDispatcher{
         })
     }
 
-    async loadTexture(url, path = assetPath, progress) {
-        return new Promise((resolve, reject) => {
-            new THREE.TextureLoader().load(`${path}${url}`, texture => {
-                //texture.encoding = THREE.sRGBEncoding;
-                texture.colorSpace = THREE.SRGBColorSpace;
-                resolve(texture)
-            }, progress, reject)
-        })
-    }
-
     async loadPanorama(url, path = assetPath) {
-        let t = await this.loadTexture(url, path);
+        let t = await GameEngine.loadTexture(url, path);
         t.mapping = THREE.EquirectangularReflectionMapping;
         this.scene.background = t;
         this.scene.environment = t;
@@ -567,6 +559,21 @@ class GameEngine extends THREE.EventDispatcher{
         this.clickable.removeAll();
         this.motionQueue.clearAll();
     }
+
+    static textureLoader = new THREE.TextureLoader();
+    static async loadTexture(url, path = assetPath, progress, assignTo) {
+        return new Promise((resolve, reject) => {
+            GameEngine.textureLoader.load(`${path}${url}`, texture => {
+                texture.colorSpace = THREE.SRGBColorSpace;
+                if (assignTo){
+                    assignTo[0][assignTo[1]] = texture;
+                }
+                resolve(texture)
+            }, progress, reject)
+        })
+    }
+
+    loadTexture = GameEngine.loadTexture
 }
 
 export { GameEngine }

src/lib/MeshUtils.js

@@ -55,16 +55,24 @@ function autoScale(object, mk = 1) {
     object.scale.multiplyScalar(mk / k);
 }
 
+function wrapInGroup(object){
+    if (object.isWrapper) return object;
+    let group = new Group();
+    group.userData.bbox = getBoundingBox(object);
+    group.add(object);
+    group.userData.object = object;
+    group.isWrapper = true;
+    return group;
+}
+
 function centerOrigin(object){
-    let result = new Group();
-    result.userData.bbox = getBoundingBox(object);
-    let position = getBoundingBoxCenterPoint(result.userData.bbox, object.position).negate();
+    let group = wrapInGroup(object);
+    let position = getBoundingBoxCenterPoint(group.userData.bbox, object.position).negate();
     object.position.copy(position)
-    result.add(object);
-    return result;
+    return group;
 }
 
 export { 
-    assignParams, assignMaterial, autoScale, centerOrigin,
+    assignParams, assignMaterial, autoScale, centerOrigin, wrapInGroup,
     getBoundingBox, getBoundingBoxSize, getBoundingBoxMaxLength, getBoundingBoxCenterPoint 
 }