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

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

@@ -3,7 +3,7 @@ import { Camera, PerspectiveCamera, 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 { getTempVector } from "../../engine/engine_three_utils.js";
+import { getTempQuaternion, getTempVector } from "../../engine/engine_three_utils.js";
 import { registerType } from "../../engine/engine_typestore.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
@@ -21,20 +21,24 @@ export class ViewBox extends Behaviour {
     @serializable()
     debug: boolean = false;
 
-    awake() {
-        // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
-        // setInterval(()=>{
-        //     this.enabled = !this.enabled
-        // }, 1000)
-    }
+    // 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);
         ViewBox.instances.push(this);
     }
 
     onDisable(): void {
+        if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
         const idx = ViewBox.instances.indexOf(this);
         if (idx !== -1) ViewBox.instances.splice(idx, 1);
+        this._projectedBoxElement?.remove();
     }
 
     onBeforeRender() {
@@ -80,44 +84,80 @@ export class ViewBox extends Behaviour {
             diffHeight = domHeight / rectHeight;
         }
 
-        // const view = camera.view;
+
         const view = camera.view;
         const zoom = camera.zoom;
         const aspect = camera.aspect;
         const fov = camera.fov;
         camera.view = null;
         camera.zoom = 1;
-        // camera.aspect = rectWidth / rectHeight;
         camera.fov = this.referenceFieldOfView;
         camera.updateProjectionMatrix();
 
         const boxPosition = this.gameObject.worldPosition;
         const boxScale = this.gameObject.worldScale;
 
+        const cameraPosition = camera.worldPosition;
+        const distance = cameraPosition.distanceTo(boxPosition);
+
+
+        // #region camera fixes
+        // If the camera is inside the box, move it out
+        const boxSizeMax = Math.max(boxScale.x, boxScale.y, boxScale.z);
+        const direction = getTempVector(cameraPosition).sub(boxPosition);
+        if (distance < boxSizeMax) {
+            // move camera out of bounds
+            if (this.debug || debugParam) console.warn("[ViewBox] Moving camera out of bounds", distance, "<", boxSizeMax);
+            const positionDirection = getTempVector(direction);
+            positionDirection.y *= .00000001; // stay on horizontal plane mostly
+            positionDirection.normalize();
+            const lengthToMove = (boxSizeMax - distance) * 10; // move a bit more than needed
+            const newPosition = cameraPosition.add(positionDirection.multiplyScalar(lengthToMove));
+            camera.worldPosition = newPosition.lerp(cameraPosition, 1 - this.context.time.deltaTime);
+        }
+
+        // Ensure the camera looks at the ViewBox
+        // TOOD: smooth lookat over multiple frames if we have multiple viewboxes
+        // const dot = direction.normalize().dot(camera.worldForward);
+        // if (dot < .9) {
+        //     console.log(dot);
+        //     const targetRotation = direction;
+        //     const rotation = getTempQuaternion();
+        //     rotation.setFromUnitVectors(camera.worldForward.multiplyScalar(-1), targetRotation);
+        //     camera.worldQuaternion = rotation;
+        //     camera.updateMatrixWorld();
+        // }
+        const boxPositionInCameraSpace = getTempVector(boxPosition);
+        camera.worldToLocal(boxPositionInCameraSpace);
+        camera.lookAt(boxPosition);
+        camera.updateMatrixWorld();
 
 
-        // const fov = this.referenceFieldOfView
-        const distance = camera.worldPosition.distanceTo(boxPosition);
+        // #region calculate fit
         const vFOV = this.referenceFieldOfView * Math.PI / 180; // convert vertical fov to radians
         const height = 2 * Math.tan(vFOV / 2) * distance; // visible height
         const width = height * camera.aspect; // visible width
 
-        const projectedBox = this.projectBoxIntoCamera(boxPosition, boxScale, camera, height * .5);
+        const projectedBox = this.projectBoxIntoCamera(boxPosition, boxScale, camera, 1);
+        // return
         const boxWidth = (projectedBox.maxX - projectedBox.minX);
         const boxHeight = (projectedBox.maxY - projectedBox.minY);
 
-        // TODO: take the rect size different into account
         const scale = this.fit(
             boxWidth * camera.aspect,
             boxHeight,
             width / diffWidth,
             height / diffHeight
         );
+        // console.log({ scale, width, height, boxWidth: boxWidth * camera.aspect, boxHeight, diffWidth, diffHeight, aspect: camera.aspect, distance })
+        // this.context.focusRectSettings.zoom = 1.39;
+        // if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
+        // return
         const vec = getTempVector(boxPosition);
         vec.project(camera);
         this.context.focusRectSettings.offsetX = vec.x;
         this.context.focusRectSettings.offsetY = vec.y;
-        this.context.focusRectSettings.zoom = scale;
+        this.context.focusRectSettings.zoom = scale / (height * .5);
         // if we don't have a focus rect yet, set it to the dom element
         if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
 
@@ -149,9 +189,8 @@ export class ViewBox extends Behaviour {
 
 
 
-    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, diff: number) {
-
-        const factor = .5 * diff;
+    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, _factor: number) {
+        const factor = .5 * _factor;
 
         const corners = [
             getTempVector(-scale.x * factor, -scale.y * factor, -scale.z * factor),
@@ -177,18 +216,21 @@ export class ViewBox extends Behaviour {
             if (c.y > maxY) maxY = c.y;
         }
 
-        // if(!this._projectedBoxElement) {
-        //     this._projectedBoxElement = document.createElement("div");
-        // this.context.domElement.appendChild(this._projectedBoxElement);
-        // }
-        // this._projectedBoxElement.style.position = "fixed";
-        // this._projectedBoxElement.style.outline = "10px solid red";
-        // 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";
-        // this._projectedBoxElement.style.height = ((maxY - minY) * .5 * this.context.domHeight) + "px";
-        // this._projectedBoxElement.style.pointerEvents = "none";
-        // this._projectedBoxElement.style.zIndex = "1000";
+        if (debugParam) {
+            if (!this._projectedBoxElement) {
+                this._projectedBoxElement = document.createElement("div");
+            }
+            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";
+            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";
+            this._projectedBoxElement.style.height = ((maxY - minY) * .5 * this.context.domHeight) + "px";
+            this._projectedBoxElement.style.pointerEvents = "none";
+            this._projectedBoxElement.style.zIndex = "1000";
+        }
 
 
         return { minX, maxX, minY, maxY };