@needle-tools/engine 4.10.0-beta.3 → 4.10.0-beta.4

package/src/engine-components/web/ViewBox.ts

@@ -1,19 +1,22 @@
-import { Camera, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { Camera, PerspectiveCamera, Quaternion, Vector2, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
-import { getTempQuaternion, getTempVector } from "../../engine/engine_three_utils.js";
+import { getTempVector } from "../../engine/engine_three_utils.js";
 import { registerType } from "../../engine/engine_typestore.js";
 import { getParam } from "../../engine/engine_utils.js";
+import { RGBAColor } from "../../engine/js-extensions/RGBAColor.js";
 import { Behaviour } from "../Component.js";
 
+
 const debugParam = getParam("debugviewbox");
+const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
 
 @registerType
-export class ViewBox extends Behaviour {
+export class ResponsiveBox extends Behaviour {
 
-    static instances: ViewBox[] = [];
+    static instances: ResponsiveBox[] = [];
 
     @serializable()
     referenceFieldOfView: number = 60;
@@ -31,24 +34,31 @@ export class ViewBox extends Behaviour {
     
     onEnable(): void {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
-        ViewBox.instances.push(this);
+        ResponsiveBox.instances.push(this);
+        // this.context.pre_render_callbacks.push(this.internalUpdate);
     }
 
     onDisable(): void {
         if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
-        const idx = ViewBox.instances.indexOf(this);
-        if (idx !== -1) ViewBox.instances.splice(idx, 1);
+        const idx = ResponsiveBox.instances.indexOf(this);
+        if (idx !== -1) ResponsiveBox.instances.splice(idx, 1);
         this._projectedBoxElement?.remove();
+        
+        // const cb_idx = this.context.pre_render_callbacks.indexOf(this.internalUpdate);
+        // if (cb_idx !== -1) this.context.pre_render_callbacks.splice(cb_idx, 1);
     }
 
-    onBeforeRender() {
+    onBeforeRender(): void {
         if (this.context.isInXR) return;
-        const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
+        if(this.destroyed) return;
+        const isActive = ResponsiveBox.instances[ResponsiveBox.instances.length - 1] === this;
         if (!isActive) {
-            if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0x333333);
+            if (debugParam || this.debug) {
+                Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, disabledGizmoColor);
+            }
             return;
         }
-        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0xdddd00);
+        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0xdddd00, 0, true, this.gameObject.worldQuaternion);
 
         // calculate box size to fit the camera frustrum size at the current position (just scale)
         const camera = this.context.mainCamera;
@@ -94,6 +104,7 @@ export class ViewBox extends Behaviour {
         camera.fov = this.referenceFieldOfView;
         camera.updateProjectionMatrix();
 
+
         const boxPosition = this.gameObject.worldPosition;
         const boxScale = this.gameObject.worldScale;
 
@@ -138,7 +149,7 @@ export class ViewBox extends Behaviour {
         const height = 2 * Math.tan(vFOV / 2) * distance; // visible height
         const width = height * camera.aspect; // visible width
 
-        const projectedBox = this.projectBoxIntoCamera(boxPosition, boxScale, camera, 1);
+        const projectedBox = this.projectBoxIntoCamera(camera, 1);
         // return
         const boxWidth = (projectedBox.maxX - projectedBox.minX);
         const boxHeight = (projectedBox.maxY - projectedBox.minY);
@@ -189,18 +200,18 @@ export class ViewBox extends Behaviour {
 
 
 
-    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, _factor: number) {
+    private projectBoxIntoCamera(camera: Camera, _factor: number) {
         const factor = .5 * _factor;
 
         const corners = [
-            getTempVector(-scale.x * factor, -scale.y * factor, -scale.z * factor),
-            getTempVector(scale.x * factor, -scale.y * factor, -scale.z * factor),
-            getTempVector(-scale.x * factor, scale.y * factor, -scale.z * factor),
-            getTempVector(scale.x * factor, scale.y * factor, -scale.z * factor),
-            getTempVector(-scale.x * factor, -scale.y * factor, scale.z * factor),
-            getTempVector(scale.x * factor, -scale.y * factor, scale.z * factor),
-            getTempVector(-scale.x * factor, scale.y * factor, scale.z * factor),
-            getTempVector(scale.x * factor, scale.y * factor, scale.z * factor),
+            getTempVector(-factor, -factor, -factor),
+            getTempVector(factor, -factor, -factor),
+            getTempVector(-factor, factor, -factor),
+            getTempVector(factor, factor, -factor),
+            getTempVector(-factor, -factor, factor),
+            getTempVector(factor, -factor, factor),
+            getTempVector(-factor, factor, factor),
+            getTempVector(factor, factor, factor),
         ];
         let minX = Number.POSITIVE_INFINITY;
         let maxX = Number.NEGATIVE_INFINITY;
@@ -208,7 +219,7 @@ export class ViewBox extends Behaviour {
         let maxY = Number.NEGATIVE_INFINITY;
         for (let i = 0; i < corners.length; i++) {
             const c = corners[i];
-            c.add(position);
+            c.applyMatrix4(this.gameObject.matrixWorld);
             c.project(camera);
             if (c.x < minX) minX = c.x;
             if (c.x > maxX) maxX = c.x;
@@ -223,7 +234,8 @@ export class ViewBox extends Behaviour {
             if (this._projectedBoxElement.parentElement !== this.context.domElement)
                 this.context.domElement.appendChild(this._projectedBoxElement);
             this._projectedBoxElement.style.position = "fixed";
-            this._projectedBoxElement.style.outline = "5px dotted red";
+            // dotted but with larger gaps
+            this._projectedBoxElement.style.outline = "2px dashed rgba(255,0,0,.5)";
             this._projectedBoxElement.style.left = ((minX * .5 + .5) * this.context.domWidth) + "px";
             this._projectedBoxElement.style.top = ((-maxY * .5 + .5) * this.context.domHeight) + "px";
             this._projectedBoxElement.style.width = ((maxX - minX) * .5 * this.context.domWidth) + "px";

package/src/engine-components-experimental/Presentation.ts

@@ -1,6 +1,7 @@
 import type { KeyCode } from "../engine/engine_input.js";
 import { Behaviour } from "../engine-components/Component.js";
 
+/** @internal */
 export class PresentationMode extends Behaviour {
 
     toggleKey: KeyCode = "KeyP";