@needle-tools/engine 4.9.3 → 4.10.0-beta.1

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

@@ -0,0 +1,199 @@
+import { Camera, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { registerType } from "../../engine/engine_typestore.js";
+import { getTempVector } from "../../engine/engine_three_utils.js";
+import { Behaviour } from "../Component.js";
+import { isDevEnvironment } from "../../engine/debug/debug.js";
+import { getParam } from "../../engine/engine_utils.js";
+
+const debugParam = getParam("debugviewbox");
+
+@registerType
+export class ViewBox extends Behaviour {
+
+    static instances: ViewBox[] = [];
+
+    @serializable()
+    referenceFieldOfView: number = 60;
+
+    @serializable()
+    debug: boolean = false;
+
+    awake() {
+        // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
+        // setInterval(()=>{
+        //     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 {
+        const idx = ViewBox.instances.indexOf(this);
+        if (idx !== -1) ViewBox.instances.splice(idx, 1);
+    }
+
+    onBeforeRender() {
+        if (this.context.isInXR) return;
+        const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
+        if (!isActive) return;
+
+        // calculate box size to fit the camera frustrum size at the current position (just scale)
+        const camera = this.context.mainCamera;
+        if (!camera) return;
+        if (!(camera instanceof PerspectiveCamera)) {
+            // TODO: support orthographic camera
+            return;
+        }
+
+        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;
+        }
+
+        const domRect = this.context.domElement.getBoundingClientRect();
+        const domX = domRect.x;
+        const domY = domRect.y;
+        const domWidth = domRect.width;
+        const domHeight = domRect.height;
+
+        let rectPosX = 0;
+        let rectPosY = 0;
+        let rectWidth = domWidth;
+        let rectHeight = domHeight;
+        let diffWidth = 1;
+        let diffHeight = 1;
+        // use focus rect if available
+        const focusRectSize = this.context.focusRectSize;
+        if (focusRectSize) {
+            // console.log(focusRectSize)
+            rectPosX = focusRectSize.x;
+            rectPosY = focusRectSize.y;
+            rectWidth = focusRectSize.width;
+            rectHeight = focusRectSize.height;
+            diffWidth = domWidth / rectWidth;
+            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 fov = this.referenceFieldOfView
+        const distance = camera.worldPosition.distanceTo(boxPosition);
+        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 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
+        );
+        const vec = getTempVector(boxPosition);
+        vec.project(camera);
+        this.context.focusRectSettings.offsetX = vec.x;
+        this.context.focusRectSettings.offsetY = vec.y;
+        this.context.focusRectSettings.zoom = scale;
+        // 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);
+
+        // Reset values
+        camera.view = view;
+        camera.zoom = zoom;
+        camera.aspect = aspect;
+        camera.fov = fov;
+        // camera.updateProjectionMatrix();
+
+
+        // BACKLOG: some code for box scale of an object (different component)
+        // this.gameObject.worldScale = getTempVector(width, height, worldscale.z);
+        // this.gameObject.scale.multiplyScalar(.98)
+        // const minscale = Math.min(width, height);
+        // console.log(width, height);
+        // this.gameObject.worldScale = getTempVector(scale, scale, scale);
+    }
+
+
+    /**
+     * Cover fit
+     */
+    private fit(width1: number, height1: number, width2: number, height2: number) {
+        const scaleX = width2 / width1;
+        const scaleY = height2 / height1;
+        return Math.min(scaleX, scaleY);
+    }
+
+
+
+    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, diff: number) {
+
+        const factor = .5 * diff;
+
+        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),
+        ];
+        let minX = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (let i = 0; i < corners.length; i++) {
+            const c = corners[i];
+            c.add(position);
+            c.project(camera);
+            if (c.x < minX) minX = c.x;
+            if (c.x > maxX) maxX = c.x;
+            if (c.y < minY) minY = c.y;
+            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";
+
+
+        return { minX, maxX, minY, maxY };
+
+    }
+    private _projectedBoxElement: HTMLElement | null = null;
+
+
+
+
+}

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

@@ -1,3 +1,5 @@
 export * from "./Clickthrough.js";
 export * from "./CursorFollow.js";
-export * from "./ScrollFollow.js";
+export * from "./HoverAnimation.js";
+export * from "./ScrollFollow.js";
+export * from "./ViewBox.js";