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

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

@@ -1,4 +1,4 @@
-import { Camera, PerspectiveCamera, Quaternion, Vector2, Vector3 } from "three";
+import { Camera, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
@@ -13,45 +13,47 @@ import { Behaviour } from "../Component.js";
 const debugParam = getParam("debugviewbox");
 const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
 
+/**
+ * This component can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.  
+ * 
+ * Add the ViewBox to an object into your scene
+ */
 @registerType
-export class ResponsiveBox extends Behaviour {
+export class ViewBox extends Behaviour {
 
-    static instances: ResponsiveBox[] = [];
+    static readonly instances: ViewBox[] = [];
 
+    /**
+     * The reference field of view is used to calculate the box size. This should usually be the same as your camera's fov.
+     * @default undefined (meaning it will use the camera fov on the first frame)
+     */
     @serializable()
-    referenceFieldOfView: number = 60;
+    referenceFieldOfView: number | undefined = undefined;
 
+    /**
+     * Enable debug logs and rendering for this component instance
+     */
     @serializable()
     debug: boolean = false;
 
-    // awake() {
-    //     // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
-    //     setInterval(()=>{
-    //         if(Math.random() > .5)
-    //         this.enabled = !this.enabled
-    //     }, 1000)
-    // }
-    
     onEnable(): void {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
-        ResponsiveBox.instances.push(this);
-        // this.context.pre_render_callbacks.push(this.internalUpdate);
+        // register instance
+        ViewBox.instances.push(this);
     }
 
     onDisable(): void {
         if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
-        const idx = ResponsiveBox.instances.indexOf(this);
-        if (idx !== -1) ResponsiveBox.instances.splice(idx, 1);
+        // unregister instance
+        const idx = ViewBox.instances.indexOf(this);
+        if (idx !== -1) ViewBox.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(): void {
         if (this.context.isInXR) return;
-        if(this.destroyed) return;
-        const isActive = ResponsiveBox.instances[ResponsiveBox.instances.length - 1] === this;
+        if (this.destroyed) return;
+        const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
         if (!isActive) {
             if (debugParam || this.debug) {
                 Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, disabledGizmoColor);
@@ -68,6 +70,10 @@ export class ResponsiveBox extends Behaviour {
             return;
         }
 
+        if (this.referenceFieldOfView === undefined) {
+            this.referenceFieldOfView = camera.fov;
+        }
+
         if (this.referenceFieldOfView === undefined || this.referenceFieldOfView <= 0) {
             if (debugParam || this.debug) console.warn("[ViewBox] No valid referenceFieldOfView set, cannot adjust box size:", this.referenceFieldOfView);
             return;