@needle-tools/engine 2.55.0-pre → 2.55.2-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.55.0-pre",
+    "version": "2.55.2-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/engine_gizmos.ts

@@ -1,10 +1,11 @@
 import * as THREE from 'three';
-import { BufferAttribute, Line, BoxGeometry, EdgesGeometry, Color, LineSegments, LineBasicMaterial, Object3D, Mesh, SphereGeometry, ColorRepresentation, Vector3, Box3, Quaternion } from 'three';
+import { BufferAttribute, Line, BoxGeometry, EdgesGeometry, Color, LineSegments, LineBasicMaterial, Object3D, Mesh, SphereGeometry, ColorRepresentation, Vector3, Box3, Quaternion, CylinderGeometry } from 'three';
 import { Context } from './engine_setup';
 import { setWorldPosition, setWorldPositionXYZ } from './engine_three_utils';
 import { Vec3, Vec4 } from './engine_types';
 
 const _tmp = new Vector3();
+const _tmp2 = new Vector3();
 const _quat = new Quaternion();
 
 const defaultColor: ColorRepresentation = 0x888888;
@@ -76,7 +77,7 @@ export class Gizmos {
         obj.material["wireframe"] = true;
     }
 
-    static DrawBox3(box:Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
         const obj = Internal.getBox(duration);
         obj.position.copy(box.getCenter(_tmp));
         obj.scale.copy(box.getSize(_tmp));
@@ -84,6 +85,20 @@ export class Gizmos {
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
     }
+
+    private static _up = new Vector3(0, 1, 0);
+    static DrawArrow(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, wireframe: boolean = false) {
+        const obj = Internal.getArrowHead(duration);
+        obj.position.set(pt1.x, pt1.y, pt1.z);
+        obj.quaternion.setFromUnitVectors(this._up.set(0, 1, 0), _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).normalize());
+        const dist = _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).length();
+        const scale = dist * 0.1;
+        obj.scale.set(scale, scale, scale);
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["wireframe"] = wireframe;
+        this.DrawLine(pt0, pt1, color, duration, depthTest);
+    }
 }
 
 const box: BoxGeometry = new BoxGeometry(1, 1, 1);
@@ -141,9 +156,19 @@ class Internal {
         return sphere;
     }
 
+    static getArrowHead(duration: number): Mesh {
+        let arrowHead = this.arrowHeadsCache.pop();
+        if (!arrowHead) {
+            arrowHead = new Mesh(new CylinderGeometry(0, .5, 1, 8));
+        }
+        this.registerTimedObject(Context.Current, arrowHead, duration, this.arrowHeadsCache);
+        return arrowHead;
+    }
+
     private static linesCache: Array<Line> = [];
     private static spheresCache: Mesh[] = [];
     private static boxesCache: Mesh[] = [];
+    private static arrowHeadsCache: Mesh[] = [];
 
     private static registerTimedObject(context: Context, object: Object3D, duration: number, cache: Array<Object3D>) {
         if (!this.contextPostRenderCallbacks.get(context)) {

package/src/engine/engine_physics.ts

@@ -386,10 +386,11 @@ export class Physics {
                 this._meshCache.set(key, scaledPositions);
             }
         }
-
         const desc = convex ? ColliderDesc.convexMesh(positions) : ColliderDesc.trimesh(positions, indices);
         if (desc) {
-            this.createCollider(collider, desc);
+            const col = this.createCollider(collider, desc);
+            col.setMassProperties(1, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0, w: 1 });
+            // rb?.setTranslation({ x: 0, y: 2, z: 0 });
             // col.setTranslationWrtParent(new Vector3(0,2,0));
 
         }
@@ -593,7 +594,7 @@ export class Physics {
         rigidbody.enableCcd(rb.collisionDetectionMode !== CollisionDetectionMode.Discrete);
         rigidbody.setLinearDamping(rb.drag);
         rigidbody.setAngularDamping(rb.angularDrag);
-        rigidbody.setGravityScale(rb.useGravity ? 1 : 0, true);
+        rigidbody.setGravityScale(rb.useGravity ? rb.gravityScale : 0, true);
 
         // https://rapier.rs/docs/user_guides/javascript/rigid_bodies#mass-properties
         // rigidbody.setAdditionalMass(rb.mass, true);
@@ -807,7 +808,7 @@ export class Physics {
     }
 
 
-
+    /** The joint prevents any relative movement between two rigid-bodies, except for relative rotations along one axis. This is typically used to simulate wheels, fans, etc. They are characterized by one local anchor as well as one local axis on each rigid-body. */
     addHingeJoint(body1: IRigidbody, body2: IRigidbody, anchor: { x: number, y: number, z: number }, axis: { x: number, y: number, z: number }) {
         if (!this.world) {
             console.error("Physics world not initialized");

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

@@ -26,6 +26,7 @@ import { PlayerViewManager } from './engine_playerview';
 
 import { ICamera, IComponent, ILight } from "./engine_types"
 import { destroy, foreachComponent } from './engine_gameobject';
+import { createCameraWithOrbitControl } from '../engine-components/CameraUtils';
 
 
 const debug = utils.getParam("debugSetup");
@@ -147,12 +148,12 @@ export class Context {
 
 	get domWidth(): number {
 		// for mozilla XR
-		if(this.isInAR) return window.innerWidth;
+		if (this.isInAR) return window.innerWidth;
 		return this.domElement.clientWidth;
 	}
 	get domHeight(): number {
 		// for mozilla XR
-		if(this.isInAR) return window.innerHeight;
+		if (this.isInAR) return window.innerHeight;
 		return this.domElement.clientHeight;
 	}
 	get domX(): number {
@@ -543,6 +544,8 @@ export class Context {
 			foreachComponent(this.scene, comp => {
 				const cam = comp as ICamera;
 				if (cam?.isCamera) {
+					looputils.updateActiveInHierarchyWithoutEventCall(cam.gameObject);
+					if (!cam.activeAndEnabled) return undefined;
 					if (cam.tag === "MainCamera") {
 						camera = cam;
 						return true;
@@ -554,8 +557,10 @@ export class Context {
 			if (camera) {
 				this.setCurrentCamera(camera);
 			}
-			else
+			else {
 				console.error("MISSING camera", this);
+				createCameraWithOrbitControl(this.scene, "unknown");
+			}
 		}
 
 		Context._current = this;
@@ -738,7 +743,7 @@ export class Context {
 	private onHandlePaused(): boolean {
 		const paused = this.evaluatePaused();
 		if (this._wasPaused !== paused) {
-			if(debugActive) console.log("Paused?", paused, "context:" + this.alias);
+			if (debugActive) console.log("Paused?", paused, "context:" + this.alias);
 			for (let i = 0; i < this.scripts_pausedChanged.length; i++) {
 				const script = this.scripts_pausedChanged[i];
 				if (!script.activeAndEnabled) continue;

package/src/engine/engine_time.ts

@@ -1,9 +1,9 @@
 import { Clock } from 'three'
 import { getParam } from './engine_utils';
 
-const debug = getParam("debugtime");
+const timescaleUrl = getParam("timescale");
 let timeScale = 1;
-if(typeof debug === "number") timeScale = debug;
+if(typeof timescaleUrl === "number") timeScale = timescaleUrl;
 
 export class Time {
 

package/src/engine/engine_types.ts

@@ -150,6 +150,7 @@ export declare interface IRigidbody extends IComponent {
     drag: number;
     angularDrag: number;
     useGravity: boolean;
+    gravityScale : number;
     collisionDetectionMode: CollisionDetectionMode;
 
     lockPositionX: boolean;

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,14 @@ 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;
+            this.gameObject.add(cam);
         }
         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.gameObject.add(cam);
         }
         this._cam = cam;
 
@@ -312,7 +311,6 @@ export class Camera extends Behaviour implements ICamera {
         return transparent;
     }
 
-
     private enableSkybox() {
         if (!this._skybox)
             this._skybox = new CameraSkybox(this);
@@ -340,10 +338,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/CameraUtils.ts

@@ -1,15 +1,25 @@
 import { OrbitControls } from "./OrbitControls";
 import { Camera } from "./Camera";
 import { addNewComponent } from "../engine/engine_components";
-import { Object3D, Scene } from "three";
+import { Color, Object3D, Scene, Vector3 } from "three";
+import { ICamera, SourceIdentifier } from "../engine/engine_types";
+import { lookAtInverse } from "../engine/engine_three_utils";
+import { RGBAColor } from "./js-extensions/RGBAColor";
 
-export function createCameraWithOrbitControl(scene: Scene): Camera {
-    const srcId = "created/implictly";
+export function createCameraWithOrbitControl(scene: Scene, source: SourceIdentifier): ICamera {
+    const srcId = source;
     const go = new Object3D();
     scene.add(go);
-    const cam = addNewComponent(go, new Camera(), false);
+    const camInstance = new Camera();
+    const cam = addNewComponent(go, camInstance, true) as ICamera
     cam.sourceId = srcId;
-    const orbit = addNewComponent(go, new OrbitControls(), false);
+    cam.clearFlags = 2;
+    cam.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
+    const orbit = addNewComponent(go, new OrbitControls(), false) as OrbitControls;
     orbit.sourceId = srcId;
+    go.position.x = -2;
+    go.position.y = 2;
+    go.position.z = 2;
+    lookAtInverse(go, new Vector3(0, 0, 0));
     return cam as Camera;
 }

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(){
 
     // }

package/src/engine-components/ParticleSystem.ts

@@ -153,6 +153,7 @@ class ParticleSystemEmissionOverTime extends BaseValueGenerator {
     }
 
     genValue(): number {
+        if (!this.system.emission.enabled) return 0;
         if (this.system.currentParticles >= this.system.maxParticles) return 0;
         // emission over time
         let emission = this.system.emission.rateOverTime.evaluate(this.system.time / this.system.duration, Math.random());
@@ -225,9 +226,15 @@ class TextureSheetAnimationBehaviour extends ParticleSystemBaseBehaviour {
 
 }
 
+const $particleRotation = Symbol("particleRotation")
+
 class RotationBehaviour extends ParticleSystemBaseBehaviour {
     type: string = "NeedleRotation"
 
+    initialize(particle: Particle) {
+        particle[$particleRotation] = Math.random();
+    }
+
     update(particle: Particle, delta: number) {
         if (particle.rotation === undefined) return;
 
@@ -235,7 +242,7 @@ class RotationBehaviour extends ParticleSystemBaseBehaviour {
 
         if (typeof particle.rotation === "number") {
             if (this.system.rotationOverLifetime.enabled) {
-                particle.rotation += this.system.rotationOverLifetime.evaluate(t) * delta;
+                particle.rotation += this.system.rotationOverLifetime.evaluate(t, particle[$particleRotation]) * delta;
             }
             else {
                 if (this.system.renderer.renderMode === ParticleSystemRenderMode.Billboard)
@@ -777,7 +784,7 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
         if (this._time > this.duration) this._time = 0;
     }
 
-    private onUpdate(){
+    private onUpdate() {
         if (this._bursts) {
             this.emission.bursts = this._bursts;
             delete this._bursts;

package/src/engine-components/ParticleSystemModules.ts

@@ -1117,10 +1117,10 @@ export class RotationOverLifetimeModule {
     @serializable()
     zMultiplier!: number;
 
-    evaluate(t01: number): number {
+    evaluate(t01: number, t:number): number {
         if (!this.enabled) return 0;
         if (!this.separateAxes) {
-            const rot = this.z.evaluate(t01) * -1;
+            const rot = this.z.evaluate(t01, t) * -1;
             return rot;
         }
         return 0;