@needle-tools/engine 4.10.0-next.55c0bf9 → 4.10.0-next.f5ce0ae

package/lib/engine-components/web/ViewBox.js

@@ -0,0 +1,242 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ViewBox_1;
+import { PerspectiveCamera } 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 { 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);
+/**
+ * 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
+ */
+let ViewBox = ViewBox_1 = class ViewBox extends Behaviour {
+    static instances = [];
+    /**
+     * 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)
+     */
+    referenceFieldOfView = undefined;
+    /**
+     * Enable debug logs and rendering for this component instance
+     */
+    debug = false;
+    onEnable() {
+        if (debugParam || this.debug || isDevEnvironment())
+            console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
+        // register instance
+        ViewBox_1.instances.push(this);
+    }
+    onDisable() {
+        if (debugParam || this.debug)
+            console.debug("[ViewBox] Disabled");
+        // unregister instance
+        const idx = ViewBox_1.instances.indexOf(this);
+        if (idx !== -1)
+            ViewBox_1.instances.splice(idx, 1);
+        this._projectedBoxElement?.remove();
+    }
+    onBeforeRender() {
+        if (this.context.isInXR)
+            return;
+        if (this.destroyed)
+            return;
+        const isActive = ViewBox_1.instances[ViewBox_1.instances.length - 1] === this;
+        if (!isActive) {
+            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, 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;
+        if (!camera)
+            return;
+        if (!(camera instanceof PerspectiveCamera)) {
+            // TODO: support orthographic camera
+            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;
+        }
+        const domWidth = this.context.domWidth;
+        const domHeight = this.context.domHeight;
+        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 zoom = camera.zoom;
+        const aspect = camera.aspect;
+        const fov = camera.fov;
+        camera.view = null;
+        camera.zoom = 1;
+        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);
+            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();
+        // #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(camera, 1);
+        // return
+        const boxWidth = (projectedBox.maxX - projectedBox.minX);
+        const boxHeight = (projectedBox.maxY - projectedBox.minY);
+        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 / (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);
+        // 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
+     */
+    fit(width1, height1, width2, height2) {
+        const scaleX = width2 / width1;
+        const scaleY = height2 / height1;
+        return Math.min(scaleX, scaleY);
+    }
+    projectBoxIntoCamera(camera, _factor) {
+        const factor = .5 * _factor;
+        const corners = [
+            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;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (let i = 0; i < corners.length; i++) {
+            const c = corners[i];
+            c.applyMatrix4(this.gameObject.matrixWorld);
+            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 (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";
+            // 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";
+            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 };
+    }
+    _projectedBoxElement = null;
+};
+__decorate([
+    serializable()
+], ViewBox.prototype, "referenceFieldOfView", void 0);
+__decorate([
+    serializable()
+], ViewBox.prototype, "debug", void 0);
+ViewBox = ViewBox_1 = __decorate([
+    registerType
+], ViewBox);
+export { ViewBox };
+//# sourceMappingURL=ViewBox.js.map

package/lib/engine-components/web/ViewBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewBox.js","sourceRoot":"","sources":["../../../src/engine-components/web/ViewBox.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/web/index.d.ts

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

package/lib/engine-components/web/index.js

@@ -2,4 +2,5 @@ export * from "./Clickthrough.js";
 export * from "./CursorFollow.js";
 export * from "./HoverAnimation.js";
 export * from "./ScrollFollow.js";
+export * from "./ViewBox.js";
 //# sourceMappingURL=index.js.map

package/lib/engine-components/web/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/engine-components/web/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/engine-components/web/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}

package/lib/engine-components-experimental/Presentation.d.ts

@@ -1,5 +1,6 @@
 import type { KeyCode } from "../engine/engine_input.js";
 import { Behaviour } from "../engine-components/Component.js";
+/** @internal */
 export declare class PresentationMode extends Behaviour {
     toggleKey: KeyCode;
     update(): void;

package/lib/engine-components-experimental/Presentation.js

@@ -1,4 +1,5 @@
 import { Behaviour } from "../engine-components/Component.js";
+/** @internal */
 export class PresentationMode extends Behaviour {
     toggleKey = "KeyP";
     update() {

package/lib/engine-components-experimental/Presentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Presentation.js","sourceRoot":"","sources":["../../src/engine-components-experimental/Presentation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAE3C,SAAS,GAAY,MAAM,CAAC;IAE5B,MAAM;QACF,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;SACjE;IACL,CAAC;CACJ"}
+{"version":3,"file":"Presentation.js","sourceRoot":"","sources":["../../src/engine-components-experimental/Presentation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE9D,gBAAgB;AAChB,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAE3C,SAAS,GAAY,MAAM,CAAC;IAE5B,MAAM;QACF,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;SACjE;IACL,CAAC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.10.0-next.55c0bf9",
+  "version": "4.10.0-next.f5ce0ae",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {
@@ -101,6 +101,7 @@
     "n8ao": "^1.9.3",
     "peerjs": "1.4.7",
     "postprocessing": "^6.36.6",
+    "scroll-timeline-polyfill": "^1.1.0",
     "simplex-noise": "^4.0.1",
     "stats.js": "^0.17.0",
     "three": "npm:@needle-tools/three@0.169.10",

package/src/engine/codegen/register_types.ts

@@ -142,6 +142,7 @@ import { ClickThrough } from "../../engine-components/web/Clickthrough.js";
 import { CursorFollow } from "../../engine-components/web/CursorFollow.js";
 import { HoverAnimation } from "../../engine-components/web/HoverAnimation.js";
 import { ScrollFollow } from "../../engine-components/web/ScrollFollow.js";
+import { ViewBox } from "../../engine-components/web/ViewBox.js";
 import { Avatar } from "../../engine-components/webxr/Avatar.js";
 import { XRControllerFollow } from "../../engine-components/webxr/controllers/XRControllerFollow.js";
 import { XRControllerModel } from "../../engine-components/webxr/controllers/XRControllerModel.js";
@@ -300,6 +301,7 @@ TypeStore.add("ClickThrough", ClickThrough);
 TypeStore.add("CursorFollow", CursorFollow);
 TypeStore.add("HoverAnimation", HoverAnimation);
 TypeStore.add("ScrollFollow", ScrollFollow);
+TypeStore.add("ViewBox", ViewBox);
 TypeStore.add("Avatar", Avatar);
 TypeStore.add("XRControllerFollow", XRControllerFollow);
 TypeStore.add("XRControllerModel", XRControllerModel);

package/src/engine/engine_camera.fit.ts

@@ -87,7 +87,7 @@ export type FitCameraReturnType = {
 }
 
 
-export function fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | FitCameraOptions, options?: FitCameraOptions): null | FitCameraReturnType {
+export function fitCamera(options?: FitCameraOptions): null | FitCameraReturnType {
 
     if (NeedleXRSession.active) {
         // camera fitting in XR is not supported
@@ -102,37 +102,6 @@ export function fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | FitCam
     }
     const camera = options?.camera || context.mainCamera;
 
-    let objects: Object3D | Array<Object3D> | undefined = undefined;
-    // If the user passed in an array as first argument
-    if (Array.isArray(objectsOrOptions)) {
-        objects = objectsOrOptions;
-    }
-    // If the user passed in an object as first argument
-    else if (objectsOrOptions && "type" in objectsOrOptions) {
-        objects = objectsOrOptions;
-    }
-    // If the user passed in an object as first argument and options as second argument
-    else if (objectsOrOptions && typeof objectsOrOptions === "object") {
-        if (!(objectsOrOptions instanceof Object3D) && !Array.isArray(objectsOrOptions)) {
-            options = objectsOrOptions;
-            objects = options.objects;
-        }
-    }
-    // Ensure objects are setup correctly
-    if (objects && !Array.isArray(objects)) {
-        objects = [objects];
-    }
-    if (!Array.isArray(objects) || objects && objects.length <= 0) {
-        objects = context.scene.children;
-    }
-
-    // Make sure there's anything to fit to
-    if (!Array.isArray(objects) || objects.length <= 0) {
-        console.warn("No objects to fit camera to...");
-        return null;
-    }
-
-
     // const controls = this._controls as ThreeOrbitControls | null;
 
     if (!camera) {
@@ -155,6 +124,7 @@ export function fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | FitCam
     const size = new Vector3();
     const center = new Vector3();
     const aspect = camera instanceof PerspectiveCamera ? camera.aspect : 1;
+    const objects = options.objects || context.scene;
     // TODO would be much better to calculate the bounds in camera space instead of world space - 
     // we would get proper view-dependant fit.
     // Right now it's independent from where the camera is actually looking from,

package/src/engine/engine_camera.ts

@@ -2,6 +2,7 @@ import { Camera, HemisphereLightHelper, Object3D, PerspectiveCamera, Vector2, We
 
 import { Mathf } from "./engine_math.js";
 import type { ICameraController } from "./engine_types.js";
+import { getParam } from "./engine_utils.js";
 
 
 const $cameraController = "needle:cameraController";
@@ -52,17 +53,29 @@ export type FocusRectSettings = {
     /** Lower values will result in faster alignment with the rect (value ~= seconds to reach target) 
      * Minimum value is 0.
      */
-    damping: number
+    damping: number,
+
+    /** X offset in camera coordinates. Used by ViewBox component */
+    offsetX: number,
+    /** Y offset in camera coordinates. Used by ViewBox component */
+    offsetY: number,
+    /** Zoom factor. Used by ViewBox component */
+    zoom: number,
 }
 export type FocusRect = DOMRect | Element | { x: number, y: number, width: number, height: number };
 
 let rendererRect: DOMRect | undefined = undefined;
 const overlapRect = { x: 0, y: 0, width: 0, height: 0 };
+const _testTime = 1;
+const debug = getParam("debugfocusrect");
 
 /** Used internally by the Needle Engine context via 'setFocusRect(<rect>)'  */
-export function updateCameraFocusRect(focusRect: FocusRect, dt: number, camera: PerspectiveCamera, renderer: WebGLRenderer) {
+export function updateCameraFocusRect(focusRect: FocusRect, settings: FocusRectSettings, dt: number, camera: PerspectiveCamera, renderer: WebGLRenderer) {
 
     if (focusRect instanceof Element) {
+        if(debug && focusRect instanceof HTMLElement) {
+            focusRect.style.outline = "2px dashed rgba(255, 150, 0, .8)";
+        }
         focusRect = focusRect.getBoundingClientRect();
     }
     rendererRect = renderer.domElement.getBoundingClientRect();
@@ -76,16 +89,55 @@ export function updateCameraFocusRect(focusRect: FocusRect, dt: number, camera:
     rect.x -= rendererRect.x;
     rect.y -= rendererRect.y;
 
-    const targetX = rect.width / -2 - (rect.x - (rendererRect.width / 2));
-    const targetY = rect.height / -2 - (rect.y - (rendererRect.height / 2));
+    const sourceWidth = rendererRect.width;
+    const sourceHeight = rendererRect.height;
 
-    const view = camera.view;
+    const view = camera.view as PerspectiveCamera["view"];
 
+    // Apply zoom
+    const zoom = settings.zoom;
     let offsetX = view?.offsetX || 0;
     let offsetY = view?.offsetY || 0;
-    offsetX = Mathf.lerp(offsetX, targetX, dt);
-    offsetY = Mathf.lerp(offsetY, targetY, dt);
 
-    camera.setViewOffset(rendererRect.width, rendererRect.height, offsetX, offsetY, rendererRect.width, rendererRect.height);
+    let width = rendererRect.width;
+    let height = rendererRect.height;
+    width /= zoom;
+    height /= zoom;
+    offsetX = width * (zoom - 1) * .5;
+    offsetY = height * (zoom - 1) * .5;
+
+    const focusRectCenterX = rect.x + rect.width * .5;
+    const focusRectCenterY = rect.y + rect.height * .5;
+    const rendererCenterX = rendererRect.width * .5;
+    const rendererCenterY = rendererRect.height * .5;
+
+    const diffx = focusRectCenterX - rendererCenterX;
+    const diffy = focusRectCenterY - rendererCenterY;
+    offsetX -= diffx / zoom;
+    offsetY -= diffy / zoom;
+    if (settings.offsetX !== undefined) {
+        offsetX += settings.offsetX * (rendererRect.width * .5);
+    }
+    if (settings.offsetY !== undefined) {
+        offsetY -= settings.offsetY * (rendererRect.height * .5);
+    }
+
+
+    const currentOffsetX = view?.offsetX || offsetX;
+    const currentOffsetY = view?.offsetY || offsetY;
+    offsetX = Mathf.lerp(currentOffsetX, offsetX, dt);
+    offsetY = Mathf.lerp(currentOffsetY, offsetY, dt);
+    const currentWidth = view?.width || sourceWidth;
+    const currentHeight = view?.height || sourceHeight;
+    width = Mathf.lerp(currentWidth, width, dt);
+    height = Mathf.lerp(currentHeight, height, dt);
+
+    camera.setViewOffset(sourceWidth, sourceHeight, offsetX, offsetY, width, height);
     camera.updateProjectionMatrix();
-}
+
+    if (settings.damping > 0) {
+        settings.damping *= (1.0 - dt);
+        if (settings.damping < 0.01) settings.damping = 0;
+        settings.damping = Math.max(0, settings.damping);
+    }
+}

package/src/engine/engine_context.ts

@@ -1382,21 +1382,61 @@ export class Context implements IContext {
 	 * @param settings Optional settings for the focus rect. These will override the `focusRectSettings` property
 	 */
 	public setCameraFocusRect(rect: FocusRect | null, settings?: Partial<FocusRectSettings>) {
+		const oldRect = this._focusRect;
 		this._focusRect = rect;
 		if (settings) {
 			Object.assign(this.focusRectSettings, settings);
 		}
+		if (settings?.damping === undefined) {
+			// if the new rect is on screen then set damping
+			if (oldRect) {
+				let domRect = oldRect as DOMRect;
+				if (oldRect instanceof HTMLElement) {
+					domRect = oldRect.getBoundingClientRect();
+				}
+				if (domRect && "top" in domRect) {
+					const allowedDistance = 100;
+					const isVisible = domRect.bottom >= -allowedDistance && domRect.right >= -allowedDistance && domRect.top <= window.innerHeight + allowedDistance && domRect.left <= window.innerWidth + allowedDistance;
+					if (isVisible) this.focusRectSettings.damping = .2;
+				}
+			}
+		}
+
 	}
 	get focusRect() { return this._focusRect; }
+	get focusRectSize(): null | { x: number, y: number, width: number, height: number } {
+		const rect = this._focusRect;
+		if (rect && (rect instanceof DOMRect || ("width" in rect && "height" in rect && "x" in rect && "y" in rect))) {
+			return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+		}
+		else if (rect instanceof HTMLElement) {
+			const r = rect.getBoundingClientRect();
+			return { x: r.x, y: r.y, width: r.width, height: r.height };
+		}
+		return null;
+	}
 	/** Settings when a focus rect is set. Use `setCameraFocusRect(...)` to do so.  
 	 * This can be used to offset the renderer center e.g. to a specific DOM element.
 	 */
 	readonly focusRectSettings: FocusRectSettings = {
 		/** Controls how fast the rect is centered. Smaller values mean the rect is centered faster.   
 		 * A minimum value of 0 means the rect is centered instantly.
-		 * @default .05
+		 * @default 0
 		*/
-		damping: .05
+		damping: 0,
+
+		/**
+		 * Zoom factor when a focus rect is set.
+		 */
+		zoom: 1,
+		/**
+		 * Additional offset in pixels from the center of the rect
+		 */
+		offsetX: 0,
+		/**
+		 * Additional offset in pixels from the center of the rect
+		 */
+		offsetY: 0,
 	};
 	private _focusRect: FocusRect | null = null;
 
@@ -1528,14 +1568,6 @@ export class Context implements IContext {
 
 		if (this.isVisibleToUser || this.runInBackground) {
 
-			if (this._focusRect) {
-				if (this.mainCamera instanceof PerspectiveCamera) {
-					const settings = this.focusRectSettings;
-					const dt = settings.damping > 0 ? this.time.deltaTime / settings.damping : 1;
-					updateCameraFocusRect(this._focusRect, dt, this.mainCamera, this.renderer);
-				}
-			}
-
 			this._currentFrameEvent = FrameEvent.OnBeforeRender;
 
 			// should we move these callbacks in the regular three onBeforeRender events?
@@ -1552,6 +1584,14 @@ export class Context implements IContext {
 			this.executeCoroutines(FrameEvent.OnBeforeRender);
 			invokeLifecycleFunctions(this, FrameEvent.OnBeforeRender);
 
+			if (this._focusRect) {
+				if (this.mainCamera instanceof PerspectiveCamera) {
+					const settings = this.focusRectSettings;
+					const dt = settings.damping > 0 ? this.time.deltaTime / settings.damping : 1;
+					updateCameraFocusRect(this._focusRect, this.focusRectSettings, dt, this.mainCamera, this.renderer);
+				}
+			}
+
 			if (this._needsUpdateSize)
 				this.updateSize();