@needle-tools/engine 2.54.2-pre → 2.55.1-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.54.2-pre",
+    "version": "2.55.1-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.js",
     "module": "src/needle-engine.ts",

package/src/engine/codegen/register_types.js

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore"
-
+
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.ts";
 import { AlignmentConstraint } from "../../engine-components/AlignmentConstraint.ts";
@@ -172,7 +172,7 @@ import { XRGrabModel } from "../../engine-components/WebXRGrabRendering.ts";
 import { XRGrabRendering } from "../../engine-components/WebXRGrabRendering.ts";
 import { XRRig } from "../../engine-components/WebXRRig.ts";
 import { XRState } from "../../engine-components/XRFlag.ts";
-
+
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("AlignmentConstraint", AlignmentConstraint);

package/src/engine/engine_lightdata.ts

@@ -33,7 +33,7 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     registerTexture(sourceId: SourceIdentifier, type: LightmapType, tex: Texture, index: number) {
-        if (debugLightmap) console.log("Registering lightmap", sourceId, LightmapType[type], tex);
+        if (debugLightmap) console.log("Registering ", LightmapType[type], tex, sourceId);
         if (!this._lightmaps.has(sourceId))
             this._lightmaps.set(sourceId, new Map());
         const map = this._lightmaps.get(sourceId);

package/src/engine/engine_mainloop_utils.ts

@@ -68,6 +68,12 @@ export function processNewScripts(context: Context) {
                 new_scripts_buffer.splice(i, 1);
                 i--; continue;
             }
+            if (script.registering) {
+                try {
+                    script.registering();
+                }
+                catch (err) { console.error(err); }
+            }
             // console.log(script, script.gameObject)
             // TODO: we should not call awake on components with inactive gameobjects
             if (script.__internalAwake !== undefined) {

package/src/engine/engine_physics.ts

@@ -15,9 +15,10 @@ import {
 import { InstancingUtil } from './engine_instancing';
 import { foreachComponent } from './engine_gameobject';
 
-import RAPIER, { ActiveEvents, Collider, ColliderDesc, EventQueue, JointData, RigidBody, RigidBodyType, World } from '@dimforge/rapier3d-compat';
-import { CollisionDetectionMode } from '../engine/engine_physics.types';
+import RAPIER, { ActiveEvents, CoefficientCombineRule, Collider, ColliderDesc, EventQueue, JointData, RigidBody, RigidBodyType, World } from '@dimforge/rapier3d-compat';
+import { CollisionDetectionMode, PhysicsMaterialCombine } from '../engine/engine_physics.types';
 import { Gizmos } from './engine_gizmos';
+import { Mathf } from './engine_math';
 export type Rapier = typeof RAPIER;
 
 
@@ -354,7 +355,7 @@ export class Physics {
         this.createCollider(collider, desc, center);
     }
 
-    addMeshCollider(collider: ICollider, mesh: Mesh, convex: boolean, scale:Vector3) {
+    addMeshCollider(collider: ICollider, mesh: Mesh, convex: boolean, scale: Vector3) {
         const geo = mesh.geometry;
         if (!geo) {
             if (debugPhysics) console.warn("Missing mesh geometry", mesh.name);
@@ -405,7 +406,7 @@ export class Physics {
         matrix.decompose(this._tempPosition, this._tempQuaternion, this._tempScale);
         getWorldScale(collider.gameObject, this._tempScale);
         if (center) {
-            center.multiply( this._tempScale);
+            center.multiply(this._tempScale);
             this._tempPosition.x -= center.x;
             this._tempPosition.y += center.y;
             this._tempPosition.z += center.z;
@@ -414,6 +415,42 @@ export class Physics {
         desc.setRotation(this._tempQuaternion);
         desc.setSensor(collider.isTrigger);
 
+        // TODO: we might want to update this if the material changes
+        const physicsMaterial = collider.sharedMaterial;
+        if (physicsMaterial) {
+            CoefficientCombineRule
+            desc.setRestitution(physicsMaterial.bounciness);
+            switch (physicsMaterial.bounceCombine) {
+                case PhysicsMaterialCombine.Average:
+                    desc.setRestitutionCombineRule(CoefficientCombineRule.Average);
+                    break;
+                case PhysicsMaterialCombine.Maximum:
+                    desc.setRestitutionCombineRule(CoefficientCombineRule.Max);
+                    break;
+                case PhysicsMaterialCombine.Minimum:
+                    desc.setRestitutionCombineRule(CoefficientCombineRule.Min);
+                    break;
+                case PhysicsMaterialCombine.Multiply:
+                    desc.setRestitutionCombineRule(CoefficientCombineRule.Multiply);
+                    break;
+            }
+            desc.setFriction(physicsMaterial.dynamicFriction);
+            switch (physicsMaterial.frictionCombine) {
+                case PhysicsMaterialCombine.Average:
+                    desc.setFrictionCombineRule(CoefficientCombineRule.Average);
+                    break;
+                case PhysicsMaterialCombine.Maximum:
+                    desc.setFrictionCombineRule(CoefficientCombineRule.Max);
+                    break;
+                case PhysicsMaterialCombine.Minimum:
+                    desc.setFrictionCombineRule(CoefficientCombineRule.Min);
+                    break;
+                case PhysicsMaterialCombine.Multiply:
+                    desc.setFrictionCombineRule(CoefficientCombineRule.Multiply);
+                    break;
+            }
+        }
+
         // if we want to use explicit mass properties, we need to set the collider density to 0
         // otherwise rapier will compute the mass properties based on the collider shape and density
         // https://rapier.rs/docs/user_guides/javascript/rigid_bodies#mass-properties
@@ -583,12 +620,17 @@ export class Physics {
     // private _lastStepTime: number | undefined = 0;
     private lines?: LineSegments;
 
-    public step(_deltaTime?: number) {
+    public step(dt?: number) {
         if (!this.world) return;
         this._isUpdatingPhysicsWorld = true;
         if (!this.eventQueue) {
             this.eventQueue = new EventQueue(false);
         }
+        if (dt) {
+            // if we make to sudden changes to the timestep the physics can get unstable
+            // https://rapier.rs/docs/user_guides/javascript/integration_parameters/#dt
+            this.world.timestep = Mathf.lerp(this.world.timestep, dt, 0.8);
+        }
         this.world.step(this.eventQueue);
         this._isUpdatingPhysicsWorld = false;
         this.updateDebugRendering(this.world);

package/src/engine/engine_physics.types.ts

@@ -1,5 +1,22 @@
 
 
+
+export enum PhysicsMaterialCombine
+{
+  Average = 0,
+  Multiply = 1,
+  Minimum = 2,
+  Maximum = 3,
+}
+
+export type PhysicsMaterial = {
+  bounceCombine: PhysicsMaterialCombine;
+  bounciness: number;
+  frictionCombine: PhysicsMaterialCombine;
+  dynamicFriction: number;
+  staticFriction: number;
+}
+
 export enum CollisionDetectionMode {
   Discrete = 0,
   Continuous = 1,

package/src/engine/engine_serialization_core.ts

@@ -5,7 +5,7 @@ import { Context } from "./engine_setup";
 import { isPersistentAsset } from "./extensions/NEEDLE_persistent_assets";
 import { IComponent, SourceIdentifier } from "./engine_types";
 import { debugExtension } from "../engine/engine_default_parameters";
-import { LogType, showBalloonMessage } from "./debug/debug";
+import { LogType, showBalloonMessage, showBalloonWarning } from "./debug/debug";
 import { isLocalNetwork } from "./engine_networking_utils";
 import { $BuiltInTypeFlag } from "./engine_typestore";
 
@@ -357,7 +357,7 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
 const blockChecks = getParam("noerrors");
 function checkObjectAssignments(obj: any, serializedData: any, implementationInformation?: ImplementationInformation) {
     if (blockChecks) return;
-    if(!serializedData) return;
+    if (!serializedData) return;
     if (isLocalNetwork() === false) return;
     if (!obj) return;
 
@@ -371,7 +371,17 @@ function checkObjectAssignments(obj: any, serializedData: any, implementationInf
         if (key === "sourceId") continue;
         const value = obj[key];
         const serialized = serializedData[key];
+        // check if the field is defined in the class
         if (implementationInformation?.getDefinedKey(typeName, key) === false) {
+            
+            // if the field is defined but the defined key is uppercase we need to show a warning
+            // because all fields are serialized in lowercase
+            const firstCharUppercase = key.charAt(0).toUpperCase() + key.slice(1);
+            if (implementationInformation.getDefinedKey(typeName, firstCharUppercase)) {
+                showBalloonWarning("<strong>Please rename</strong> \"" + firstCharUppercase + "\" to \"" + key + "\" in " + typeName);
+                console.warn("Please use lowercase for field: \"" + firstCharUppercase + "\" in " + typeName, serialized, obj);
+            }
+
             continue;
         }
         if (serialized === undefined || serialized === null) continue;
@@ -385,14 +395,16 @@ function checkObjectAssignments(obj: any, serializedData: any, implementationInf
                     if (!hasOtherKeys) {
                         showBalloonMessage(`<strong>Missing serialization for object reference!</strong>\n\nPlease change to: \n@serializable(Object3D)\n${key}? : Object3D;\n\nin script ${typeName}.ts\n<a href="https://docs.needle.tools/serializable" target="_blank">documentation</a>`, LogType.Warn);
                         console.warn(typeName, key, obj[key], obj);
+                        continue;
                     }
                 }
             }
         }
-        else if (typeof value === "string") {
+        if (typeof value === "string") {
             if (serialized.endsWith(".gltf") || serialized.endsWith(".glb")) {
                 showBalloonMessage(`<strong>Missing serialization for object reference!</strong>\n\nPlease change to: \n@serializable(AssetReference)\n${key}? : AssetReference;\n\nin script ${typeName}.ts\n<a href="https://docs.needle.tools/serializable" target="_blank">documentation</a>`, LogType.Warn);
                 console.warn(typeName, key, obj[key], obj);
+                continue;
             }
         }
     }
@@ -421,16 +433,16 @@ function implictlyAssignPrimitiveTypes(obj: any, serializedData: any) {
             }
         }
     }
+}
 
-    function isPrimitiveType(val): boolean {
-        switch (typeof val) {
-            case "number":
-            case "string":
-            case "boolean":
-                return true;
-        }
-        return false;
+function isPrimitiveType(val): boolean {
+    switch (typeof val) {
+        case "number":
+        case "string":
+        case "boolean":
+            return true;
     }
+    return false;
 }
 
 // this is a wrapper for the cached serializer
@@ -459,7 +471,7 @@ function deserializeObjectWithType(data: any, typeOrConstructor: Constructor<any
         }
     }
     context.type = type;
-    
+
     // e.g. when @serializable(Texture) and the texture is already resolved via json pointer from gltf
     // then we dont need to do anything else
     if (!typeIsFunction && currentValue instanceof type) return currentValue;
@@ -531,7 +543,7 @@ function deserializeObjectWithType(data: any, typeOrConstructor: Constructor<any
     }
     else {
         // happens when exporting e.g. Animation component with only clip assigned (clips array is marked as serialized but it might be undefined if no clips are assigned in e.g. blender)
-        if(data === undefined) return undefined;
+        if (data === undefined) return undefined;
         // the fallback - this assumes that the type has a constructor that accepts the serialized arguments
         // made originally with THREE.Vector3 in mind but SHOULD actually not be used/called anymore
         instance = new type(...setBuffer(data));

package/src/engine/engine_setup.ts

@@ -315,8 +315,8 @@ export class Context {
 			this.renderer.domElement.style.width = "100%";
 			this.renderer.domElement.style.height = "100%";
 			if (this.composer) {
-				this.composer.setSize(width, height);
-				this.composer.setPixelRatio(window.devicePixelRatio);
+				this.composer.setSize?.call(this.composer, width, height);
+				this.composer.setPixelRatio?.call(this.composer, window.devicePixelRatio);
 			}
 		}
 	}

package/src/engine/engine_time.ts

@@ -1,10 +1,15 @@
-
 import { Clock } from 'three'
+import { getParam } from './engine_utils';
+
+const debug = getParam("debugtime");
+let timeScale = 1;
+if(typeof debug === "number") timeScale = debug;
 
 export class Time {
 
     deltaTime = 0;
     time = 0;
+    timeScale = 1;
 
     /** same as frameCount */
     frame = 0;
@@ -27,6 +32,7 @@ export class Time {
         this.deltaTime = this.clock.getDelta();
         // clamp delta time because if tab is not active clock.getDelta can get pretty big
         this.deltaTime = Math.min(.1, this.deltaTime);
+        this.deltaTime *= timeScale * this.timeScale;
         if(this.deltaTime <= 0) this.deltaTime = 0.000000000001;
         this.frame += 1;
         this.time += this.deltaTime;

package/src/engine/engine_types.ts

@@ -1,6 +1,6 @@
 import { Camera, Color, Material, Object3D, Vector3, Quaternion, Ray } from "three";
 import { RGBAColor } from "../engine-components/js-extensions/RGBAColor";
-import { CollisionDetectionMode, RigidbodyConstraints } from "./engine_physics.types";
+import { CollisionDetectionMode, PhysicsMaterial, RigidbodyConstraints } from "./engine_physics.types";
 import { getWorldPosition } from "./engine_three_utils";
 import { CircularBuffer } from "./engine_utils";
 
@@ -67,6 +67,8 @@ export interface IComponent {
     __internalDestroy();
     resolveGuids?(guidsMap: GuidsMap): void;
 
+    /** experimental, called when the script is registered for the first time, this is called even if the component is not enabled. */
+    registering?();
     awake();
     onEnable();
     onDisable();
@@ -78,7 +80,7 @@ export interface IComponent {
     /** called when this.context.isPaused changes or when rendering loop changes due to changing DOM element visibility
      * e.g. when the DOM element becomes hidden or out ot view
      */
-    onPausedChanged?(isPaused:boolean, wasPaused:boolean);
+    onPausedChanged?(isPaused: boolean, wasPaused: boolean);
 
     start?(): void;
     earlyUpdate?(): void;
@@ -138,6 +140,7 @@ export declare interface ICollider extends IComponent {
     get isCollider();
     attachedRigidbody: IRigidbody | null;
     isTrigger: boolean;
+    sharedMaterial?: PhysicsMaterial;
 }
 
 export declare interface IRigidbody extends IComponent {

package/src/engine/engine_utils.ts

@@ -385,4 +385,8 @@ export function isiOS() {
 
 export function isSafari() {
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
+export function isQuest() {
+    return navigator.userAgent.includes("OculusBrowser");
 }

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -1,5 +1,5 @@
 import { ILightDataRegistry } from "../engine_lightdata";
-import { FloatType, HalfFloatType, sRGBEncoding, Texture } from "three";
+import { FloatType, HalfFloatType, LinearEncoding, sRGBEncoding, Texture } from "three";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
 import { SourceIdentifier } from "../engine_types";
 import { resolveReferences } from "./extension_utils";
@@ -70,6 +70,8 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                                         // TODO this is most likely wrong for floating point textures
                                         if (entry.type !== LightmapType.Lightmap)
                                             tex.encoding = sRGBEncoding;
+                                        else 
+                                            tex.encoding = LinearEncoding;
 
                                         // not sure why, but seems EXR-loaded float textures need to be flipped
                                         if (entry.type === LightmapType.Skybox) {

package/src/engine-components/Camera.ts

@@ -1,16 +1,15 @@
-import { Behaviour, GameObject } from "./Component";
-import * as THREE from "three";
-// import { OrbitControls } from "./OrbitControls";
+import { Behaviour } from "./Component";
 import { getParam } from "../engine/engine_utils";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { RGBAColor } from "./js-extensions/RGBAColor";
-import { PerspectiveCamera, Ray } from "three";
 import { XRSessionMode } from "../engine/engine_setup";
 import { ICamera } from "../engine/engine_types"
 import { showBalloonMessage } from "../engine/debug/debug";
 import { getWorldPosition } from "../engine/engine_three_utils";
 import { Gizmos } from "../engine/engine_gizmos";
 
+import { EquirectangularReflectionMapping, OrthographicCamera, PerspectiveCamera, Ray, sRGBEncoding, Vector3 } from "three";
+
 export enum ClearFlags {
     Skybox = 1,
     SolidColor = 2,
@@ -37,7 +36,7 @@ export class Camera extends Behaviour implements ICamera {
         const changed = this._fov != val;
         this._fov = val;
         if (changed && this._cam) {
-            if (this._cam instanceof THREE.PerspectiveCamera) {
+            if (this._cam instanceof PerspectiveCamera) {
                 this._cam.fov = this._fov;
                 this._cam.updateProjectionMatrix();
             }
@@ -148,16 +147,14 @@ export class Camera extends Behaviour implements ICamera {
     private _clearFlags: ClearFlags = ClearFlags.SolidColor;
     private _skybox?: CameraSkybox;
 
-
     public get cam(): THREE.PerspectiveCamera | THREE.OrthographicCamera {
         if (this.activeAndEnabled)
             this.buildCamera();
         return this._cam!;
     }
 
-
-    private static _origin: THREE.Vector3 = new THREE.Vector3();
-    private static _direction: THREE.Vector3 = new THREE.Vector3();
+    private static _origin: THREE.Vector3 = new Vector3();
+    private static _direction: THREE.Vector3 = new Vector3();
     public screenPointToRay(x: number, y: number, ray?: Ray): Ray {
         let cam = this.cam;
         const origin = Camera._origin;
@@ -231,12 +228,12 @@ export class Camera extends Behaviour implements ICamera {
             }
         }
         else if (!this.orthographic) {
-            cam = new THREE.PerspectiveCamera(this.fieldOfView, window.innerWidth / window.innerHeight, this._nearClipPlane, this._farClipPlane);
+            cam = new PerspectiveCamera(this.fieldOfView, window.innerWidth / window.innerHeight, this._nearClipPlane, this._farClipPlane);
             cam.fov = this.fieldOfView;
         }
         else {
             const factor = this.orthographicSize * 100;
-            cam = new THREE.OrthographicCamera(window.innerWidth / -factor, window.innerWidth / factor, window.innerHeight / factor, window.innerHeight / -factor, this._nearClipPlane, this._farClipPlane);
+            cam = new OrthographicCamera(window.innerWidth / -factor, window.innerWidth / factor, window.innerHeight / factor, window.innerHeight / -factor, this._nearClipPlane, this._farClipPlane);
         }
         this._cam = cam;
 
@@ -312,7 +309,6 @@ export class Camera extends Behaviour implements ICamera {
         return transparent;
     }
 
-
     private enableSkybox() {
         if (!this._skybox)
             this._skybox = new CameraSkybox(this);
@@ -340,10 +336,9 @@ class CameraSkybox {
         else if(this.context.scene.background !== this._skybox) {
             if (debug)
                 console.log("Set skybox", this._camera, this._skybox);
-            this._skybox.encoding = THREE.sRGBEncoding;
-            this._skybox.mapping = THREE.EquirectangularReflectionMapping;
+            this._skybox.encoding = sRGBEncoding;
+            this._skybox.mapping = EquirectangularReflectionMapping;
             this.context.scene.background = this._skybox;
         }
     }
-
 }

package/src/engine-components/Collider.ts

@@ -5,6 +5,7 @@ import { Event, Mesh, Object3D, Vector3 } from "three"
 // import { IColliderProvider, registerColliderProvider } from "../engine/engine_physics";
 import { ICollider } from "../engine/engine_types";
 import { getWorldScale } from "../engine/engine_three_utils";
+import { PhysicsMaterial } from "../engine/engine_physics.types";
 
 
 export class Collider extends Behaviour implements ICollider {
@@ -18,6 +19,8 @@ export class Collider extends Behaviour implements ICollider {
     @serializable()
     isTrigger: boolean = false;
 
+    @serializable()
+    sharedMaterial?: PhysicsMaterial;
 
     awake() {
         super.awake();

package/src/engine-components/LODGroup.ts

@@ -108,6 +108,7 @@ export class LODGroup extends Behaviour {
                 this.gameObject.add(handler);
             }
             const empty = new THREE.Object3D();
+            empty.name = "Cull " + this.name;
             if (debug)
                 console.log(renderers);
             for (let i = 0; i < renderers.length; i++) {
@@ -132,6 +133,10 @@ export class LODGroup extends Behaviour {
                     const dist = lod.model.distance;
                     lodDistanceDiff = dist - maxDistance;
                     maxDistance = Math.max(dist, maxDistance);
+                    if (object.type === "Group") {
+                        console.warn("LODGroup: Group is not supported as LOD object", obj.name, object);
+                        continue;
+                    }
                     this.onAddLodLevel(handler, object, dist);
                 }
                 const cullDistance = maxDistance + lodDistanceDiff;
@@ -155,6 +160,10 @@ export class LODGroup extends Behaviour {
     }
 
     private onAddLodLevel(lod: THREE.LOD, obj: THREE.Object3D, dist: number) {
+        if(obj === this.gameObject) {
+            console.warn("LODGroup component must be on parent object and not mesh directly at the moment", obj.name, obj)
+            return;
+        }
         lod.addLevel(obj, dist * this._distanceFactor);
         const setting = { lod: lod, levelIndex: lod.levels.length - 1, distance: dist };
         this._settings.push(setting)

package/src/engine-components/OrbitControls.ts

@@ -1,14 +1,14 @@
 import { Behaviour, GameObject } from "./Component";
-// import { Camera } from "./Camera";
-import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { Camera } from "./Camera";
 import { LookAtConstraint } from "./LookAtConstraint";
-import * as THREE from "three";
-import { getWorldPosition, setWorldPosition, slerp } from "../engine/engine_three_utils";
+import { getWorldPosition, slerp } from "../engine/engine_three_utils";
 import { RaycastOptions } from "../engine/engine_physics";
 import { serializable } from "../engine/engine_serialization_decorator";
-import { Camera } from "./Camera";
 import { getParam, isMobileDevice } from "../engine/engine_utils";
 
+import { Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
 const freeCam = getParam("freecam");
 
 const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
@@ -19,7 +19,7 @@ export class OrbitControls extends Behaviour {
         return this._controls;
     }
 
-    public get controllerObject(): THREE.Object3D | null {
+    public get controllerObject(): Object3D | null {
         return this._cameraObject;
     }
 
@@ -45,29 +45,27 @@ export class OrbitControls extends Behaviour {
     // remove once slerp works correctly
     useSlerp: boolean = true;
 
-
     debugLog: boolean = false;
     targetLerpSpeed = 5;
 
-    private _lookTargetPosition!: THREE.Vector3;
+    private _lookTargetPosition!: Vector3;
     private _controls: ThreeOrbitControls | null = null;
-    private _cameraObject: THREE.Object3D | null = null;
+    private _cameraObject: Object3D | null = null;
 
     private _lerpToTargetPosition: boolean = false;
     private _lerpCameraToTarget: boolean = false;
-    private _cameraTargetPosition: THREE.Vector3 | null = null;
+    private _cameraTargetPosition: Vector3 | null = null;
 
     private _inputs: number = 0;
     private _enableTime: number = 0; // use to disable double click when double clicking on UI
     private _startedListeningToKeyEvents: boolean = false;
 
     awake(): void {
-        this._lookTargetPosition = new THREE.Vector3();
+        this._lookTargetPosition = new Vector3();
         this._startedListeningToKeyEvents = false;
     }
 
     onEnable() {
-
         this._enableTime = this.context.time.time;
         const camGo = GameObject.getComponent(this.gameObject, Camera);
         const cam = camGo?.cam;
@@ -119,7 +117,6 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-
     onDisable() {
         if (this._controls) {
             this._controls.enabled = false;
@@ -138,7 +135,7 @@ export class OrbitControls extends Behaviour {
             if (camGo && !this.setFromTargetPosition()) {
                 if (this.debugLog)
                     console.log("NO TARGET");
-                const forward = new THREE.Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
                 this.setTarget(forward, true);
             }
         }
@@ -151,7 +148,7 @@ export class OrbitControls extends Behaviour {
         if (!this.setFromTargetPosition()) {
             const opts = new RaycastOptions();
             // center of the screen:
-            opts.screenPoint = new THREE.Vector2(0, 0);
+            opts.screenPoint = new Vector2(0, 0);
             opts.lineThreshold = 0.1;
             const hits = this.context.physics.raycast(opts);
             if (hits.length > 0) {
@@ -229,7 +226,7 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-    public setCameraTarget(position?: THREE.Vector3 | null, immediate: boolean = false) {
+    public setCameraTarget(position?: Vector3 | null, immediate: boolean = false) {
         if (!position) this._lerpCameraToTarget = false;
         else {
             this._lerpCameraToTarget = true;
@@ -254,7 +251,7 @@ export class OrbitControls extends Behaviour {
         return false;
     }
 
-    public setTarget(position: THREE.Vector3 | null = null, immediate: boolean = false) {
+    public setTarget(position: Vector3 | null = null, immediate: boolean = false) {
         if (!this._controls) return;
         if (position !== null) this._lookTargetPosition.copy(position);
         if (immediate)
@@ -262,12 +259,12 @@ export class OrbitControls extends Behaviour {
         else this._lerpToTargetPosition = true;
     }
 
-    public lerpTarget(position: THREE.Vector3, delta: number) {
+    public lerpTarget(position: Vector3, delta: number) {
         if (!this._controls) return;
         this._controls.target.lerp(position, delta);
     }
 
-    public distanceToTarget(position: THREE.Vector3): number {
+    public distanceToTarget(position: Vector3): number {
         if (!this._controls) return -1;
         return this._controls.target.distanceTo(position);
     }
@@ -296,6 +293,48 @@ export class OrbitControls extends Behaviour {
         }
     }
 
+    // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
+    // Slower but better implementation that takes bones and exact vertex positions into account: https://github.com/google/model-viewer/blob/04e900c5027de8c5306fe1fe9627707f42811b05/packages/model-viewer/src/three-components/ModelScene.ts#L321
+    fitCameraToObjects(objects: Array<Object3D>, fitOffset: number = 1.5) {
+        const camera = this._cameraObject as PerspectiveCamera;
+        const controls = this._controls as ThreeOrbitControls | null;
+
+        if (!camera || !controls) return;
+
+        const size = new Vector3();
+        const center = new Vector3();
+        const box = new Box3();
+
+        box.makeEmpty();
+        for (const object of objects)
+            box.expandByObject(object);
+
+        box.getSize( size );
+        box.getCenter( center );
+
+        const maxSize = Math.max(size.x, size.y, size.z);
+        const fitHeightDistance = maxSize / (2 * Math.atan( Math.PI * camera.fov / 360 ));
+        const fitWidthDistance = fitHeightDistance / camera.aspect;
+        const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance);
+
+        const direction = controls.target.clone()
+            .sub(camera.position)
+            .normalize()
+            .multiplyScalar(distance);
+
+        controls.maxDistance = distance * 10;
+        controls.minDistance = distance * 0.01;
+        controls.target.copy(center);
+
+        camera.near = distance / 100;
+        camera.far = distance * 100;
+        camera.updateProjectionMatrix();
+
+        camera.position.copy(controls.target).sub(direction);
+
+        controls.update();
+    }
+
     // private onPositionDrag(){
 
     // }