@needle-tools/engine 2.25.1-pre → 2.26.1-pre

package/src/engine-components/AvatarLoader.ts

@@ -31,26 +31,13 @@ export class AvatarModel {
         // this.leftHand?.traverse(h => h.layers.set(2));
         // this.rigthHand?.traverse(h => h.layers.set(2));
     }
-
-    // createNewInstance(): AvatarModel {
-    //     const head = GameObject.instantiate(this.head);
-    //     const lh = GameObject.instantiate(this.leftHand);
-    //     const rh = GameObject.instantiate(this.rigthHand);
-    //     const model = new AvatarModel(this.root, head, lh, rh);
-    //     this.assignRandomColors();
-    //     return model;
-    // }
-
-    assignRandomColors() {
-        AvatarLoader.assignRandomPlayerColors(this);
-    }
 }
 
 export class AvatarLoader {
 
     private readonly avatarRegistryUrl: string | null = null;// = "https://needle-storage-castle-demo.glitch.me";//"https://smol-worlds.glitch.me/files/";
     // private loader: GLTFLoader | null;
-    private avatarModelCache: Map<string, AvatarModel | null> = new Map<string, AvatarModel | null>();
+    // private avatarModelCache: Map<string, AvatarModel | null> = new Map<string, AvatarModel | null>();
 
     public async getOrCreateNewAvatarInstance(context: Context, avatarId: string | THREE.Object3D): Promise<AvatarModel | null> {
 
@@ -74,8 +61,7 @@ export class AvatarLoader {
             return null;
         }
         const model = this.findAvatar(root);
-        // console.log(model);
-        model.assignRandomColors();
+        // model.assignRandomColors();
         // this.cacheModel(avatarId, model);
 
         if (model.isValid) {
@@ -166,19 +152,19 @@ export class AvatarLoader {
         // some GLTFs have a "scene" root it seems, others don't, we skip the root here if there's only one child
         if (searchIn.children.length == 1)
             searchIn = obj.children[0];
-        let head = this.findAvatarPart(searchIn, "head");
+        let head = this.findAvatarPart(searchIn, ["head"]);
 
-        const leftHand = this.findAvatarPart(searchIn, "left");
-        const rightHand = this.findAvatarPart(searchIn, "right");
+        const leftHand = this.findAvatarPart(searchIn, ["left", "hand"]);
+        const rightHand = this.findAvatarPart(searchIn, ["right", "hand"]);
 
         if (!head) {
             // very last fallback, entire root is used as head
             head = root;
 
             // normalize size, if the object isn't properly setup the scale might be totally off
-            let boundsSize = new THREE.Vector3();
+            const boundsSize = new THREE.Vector3();
             new THREE.Box3().setFromObject(head).getSize(boundsSize);
-            let maxAxis = Math.max(boundsSize.x, boundsSize.y, boundsSize.z);
+            const maxAxis = Math.max(boundsSize.x, boundsSize.y, boundsSize.z);
             console.warn("[Custom Avatar] " + "Normalizing head scale, it's too big: " + maxAxis + " meters! Should be < 0.3m");
             if (maxAxis > 0.3) {
                 head.scale.multiplyScalar(1.0 / maxAxis * 0.3);
@@ -190,10 +176,22 @@ export class AvatarLoader {
     }
 
 
-    private findAvatarPart(obj: THREE.Object3D, searchString: string): THREE.Object3D | null {
-        for (let child of obj.children) {
-            if (child.name.toLowerCase().indexOf(searchString) > -1)
-                return child;
+    private findAvatarPart(obj: THREE.Object3D, searchString: string[]): THREE.Object3D | null {
+
+        const name = obj.name.toLowerCase();
+        let matchesAll = true;
+        for (const str of searchString) {
+            if (!matchesAll) break;
+            if (name.indexOf(str) === -1)
+                matchesAll = false;
+        }
+        if (matchesAll) return obj;
+
+        if (obj.children) {
+            for (const child of obj.children) {
+                const found = this.findAvatarPart(child, searchString);
+                if (found) return found;
+            }
         }
         return null;
     }
@@ -204,37 +202,4 @@ export class AvatarLoader {
         }
         return response;
     }
-
-    public static assignRandomPlayerColors(model: AvatarModel) {
-
-        const foundMaterials: Map<string, THREE.Material> = new Map<string, THREE.Material>();
-
-        function findPlayerColorMeshesAndAssignColors(o) {
-            // console.log(o);
-            if (o.type === "Mesh") {
-                const mesh = o as THREE.Mesh;
-                const mat: THREE.Material = mesh.material as THREE.Material;
-                if (mat && mat.name) {
-                    if (foundMaterials.has(mat.uuid)) {
-                        const found = foundMaterials.get(mat.uuid);
-                        if (found)
-                            mesh.material = found;
-                        return;
-                    }
-                    if (mat.name.endsWith("_playercolor") || mat.name.endsWith("_player_color2")) {
-                        const uuid = mat.uuid;
-                        mesh.material = mat.clone();
-                        mesh.material["color"] = new THREE.Color(Math.random(), Math.random(), Math.random());
-                        foundMaterials.set(uuid, mesh.material);
-                    }
-                }
-            }
-        }
-        if (model.head)
-            model.head.traverse(findPlayerColorMeshesAndAssignColors);
-        if (model.leftHand)
-            model.leftHand.traverse(findPlayerColorMeshesAndAssignColors);
-        if (model.rigthHand)
-            model.rigthHand.traverse(findPlayerColorMeshesAndAssignColors);
-    }
 }

package/src/engine-components/Camera.ts

@@ -16,8 +16,8 @@ const debug = getParam("debugcam");
 
 export class Camera extends Behaviour {
 
-    get aspect() : number { 
-        if(this._cam instanceof PerspectiveCamera) return this._cam.aspect;
+    get aspect(): number {
+        if (this._cam instanceof PerspectiveCamera) return this._cam.aspect;
         return (this.context.domWidth / this.context.domHeight);
     }
 
@@ -61,6 +61,7 @@ export class Camera extends Behaviour {
         return this._clearFlags;
     }
     public set clearFlags(val: ClearFlags) {
+        if (val === this._clearFlags) return;
         this._clearFlags = val;
         this.applyClearFlagsIfIsActiveCamera();
     }
@@ -155,30 +156,6 @@ export class Camera extends Behaviour {
         if (this.tag == "MainCamera") {
             this.context.setCurrentCamera(this);
         }
-        // if (!cameraAlreadyCreated)
-        //     this.gameObject.add(cam);
-
-        // if (!cameraAlreadyCreated) {
-        //     const notInGltf = this["__notInGltf"];
-        //     if ((notInGltf !== undefined)) {
-        //         this.gameObject.getWorldPosition(cam.position);
-        //         this.gameObject.getWorldQuaternion(cam.quaternion);
-        //         const t = new THREE.Euler();
-        //         t.setFromQuaternion(cam.quaternion);
-        //         t.y += Math.PI;
-        //         t.z *= -1;
-        //         cam.rotation.copy(t);
-        //     }
-        //     else {
-        //         cam.position.copy(this.gameObject.position);
-        //         cam.rotation.copy(this.gameObject.rotation);
-        //     }
-
-        //     // cam.rotateX(Math.PI / -2);
-
-        //     this.gameObject.position.set(0, 0, 0);
-        //     this.gameObject.rotation.set(0, 0, 0);
-        // }
     }
 
     applyClearFlagsIfIsActiveCamera() {
@@ -186,7 +163,7 @@ export class Camera extends Behaviour {
         if (this._cam && this.context.mainCameraComponent === this) {
             switch (this._clearFlags) {
                 case ClearFlags.Skybox:
-                    if (this.context.isInXR) {
+                    if (this.environmentIsTransparent()) {
                         if (!this.ARBackgroundAlpha || this.ARBackgroundAlpha < 0.001) {
                             this.context.scene.background = null;
                             this.context.renderer.setClearColor(0x000000, 0);
@@ -196,14 +173,14 @@ export class Camera extends Behaviour {
                     this.enableSkybox();
                     break;
                 case ClearFlags.SolidColor:
-                    if (this.backgroundColor) {
-                        let alpha = this.backgroundColor.alpha;
+                    if (this._backgroundColor) {
+                        let alpha = this._backgroundColor.alpha;
                         // when in WebXR use ar background alpha override or set to 0
-                        if (this.context.isInXR) {
+                        if (this.environmentIsTransparent()) {
                             alpha = this.ARBackgroundAlpha ?? 0;
                         }
                         this.context.scene.background = null;
-                        this.context.renderer.setClearColor(this.backgroundColor, alpha);
+                        this.context.renderer.setClearColor(this._backgroundColor, alpha);
                     }
                     break;
                 case ClearFlags.Uninitialized:
@@ -214,6 +191,14 @@ export class Camera extends Behaviour {
         }
     }
 
+    private environmentIsTransparent(): boolean {
+        const session = this.context.renderer.xr?.getSession()
+        if (!session) return false;
+        const environmentBlendMode = session.environmentBlendMode;
+        const transparent = environmentBlendMode === 'additive' || environmentBlendMode === 'alpha-blend';
+        return transparent;
+    }
+
     private enableSkybox() {
         if (!this._skybox)
             this._skybox = new CameraSkybox(this);

package/src/engine-components/Collider.ts

@@ -69,4 +69,13 @@ export class BoxCollider extends Collider {
     //     //     this.context.physics.removeShape(this.gameObject, this._shape);
     //     // }
     // }
-}
+}
+
+
+// export class MeshCollider extends Collider {
+
+//     onEnable() {
+//         if (this.enabled)
+//             this.context.physics.addMeshCollider(this.gameObject);
+//     }
+// }

package/src/engine-components/Component.ts

@@ -680,6 +680,17 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D {
 }
 
 
+// this is a fix to allow gameObject active animation be applied to a three object
+Object.defineProperty(THREE.Object3D.prototype, "activeSelf", {
+    get: function () {
+        return this.visible;
+    },
+    set: function (val: boolean | number) {
+        const state = typeof val === "number" ? val > 0.5 : val;
+        this.visible = state;
+    }
+});
+
 
 THREE.Object3D.prototype["addNewComponent"] = function <T extends Behaviour>(type: ConstructorConcrete<T>) {
     return GameObject.addNewComponent(this, type);
@@ -981,7 +992,7 @@ class Component implements EventTarget {
     }
 
 
-    
+
     // EventTarget implementation:
 
     private _eventListeners = new Map<string, EventListener[]>();
@@ -1021,12 +1032,12 @@ class Behaviour extends Component {
         // when called from animationclip we receive numbers
         // due to interpolation they can be anything between 0 and 1
         if (typeof val === "number") {
-            if(val >= 0.5) val = true;
+            if (val >= 0.5) val = true;
             else val = false;
         }
 
         if (val === this.__isEnabled) return;
-        
+
         this.__isEnabled = val;
         // console.log(val);
         // need to check here because codegen is calling this before everything is setup

package/src/engine-components/OffsetConstraint.ts

@@ -1,30 +1,58 @@
 import { Behaviour, GameObject } from "./Component";
 import * as utils from "./../engine/engine_three_utils";
-import * as THREE from "three";
+import { Quaternion, Euler, Vector3, Plane } from "three";
+import { serializeable } from "../engine/engine_serialization_decorator";
 
 export class OffsetConstraint extends Behaviour {
 
-    private from!: GameObject;
-    private affectPosition!: boolean;
-    private affectRotation!: boolean;
-    private alignLookDirection!: boolean;
-    private levelLookDirection!: boolean;
-    private positionOffset!: THREE.Vector3;
-    private rotationOffset!: THREE.Vector3;
+    @serializeable(GameObject)
+    private referenceSpace: GameObject | undefined;
+
+    @serializeable(GameObject)
+    private from: GameObject | undefined;
+
+    private affectPosition: boolean = false;
+    private affectRotation: boolean = false;
+    private alignLookDirection: boolean = false;
+    private levelLookDirection: boolean = false;
+    private levelPosition: boolean = false;
+    
+    @serializeable(Vector3)
+    private positionOffset: Vector3 = new Vector3(0,0,0);
+    @serializeable(Vector3)
+    private rotationOffset: Vector3 = new Vector3(0,0,0); 
+
+    private offset: Vector3 = new Vector3(0,0,0);
 
     update() {
         if (!this.from) return;
 
         var pos = utils.getWorldPosition(this.from);
-        var rot: THREE.Quaternion = utils.getWorldQuaternion(this.from);
+        var rot: Quaternion = utils.getWorldQuaternion(this.from);
         
-        if(this.affectPosition) utils.setWorldPosition(this.gameObject, pos.add(this.positionOffset));
+        this.offset.copy(this.positionOffset);
+        const l = this.offset.length();
+        if (this.referenceSpace)
+            this.offset.transformDirection(this.referenceSpace.matrixWorld).multiplyScalar(l);
+        
+        pos.add(this.offset);
+
+        if (this.levelPosition && this.referenceSpace) {
+            const plane = new Plane(this.gameObject.up, 0);
+            const refSpacePoint = utils.getWorldPosition(this.referenceSpace);
+            plane.setFromNormalAndCoplanarPoint(this.gameObject.up, refSpacePoint);
+            const v2 = new Vector3(0,0,0);
+            plane.projectPoint(pos, v2);
+            pos.copy(v2);
+        }
+
+        if (this.affectPosition) utils.setWorldPosition(this.gameObject, pos);
         
-        const euler = new THREE.Euler(this.rotationOffset.x, this.rotationOffset.y, this.rotationOffset.z);
-        const quat = new THREE.Quaternion().setFromEuler(euler);
+        const euler = new Euler(this.rotationOffset.x, this.rotationOffset.y, this.rotationOffset.z);
+        const quat = new Quaternion().setFromEuler(euler);
         if(this.affectRotation) utils.setWorldQuaternion(this.gameObject, rot.multiply(quat));
 
-        let lookDirection = new THREE.Vector3();
+        let lookDirection = new Vector3();
         this.from.getWorldDirection(lookDirection).multiplyScalar(50);
         if (this.levelLookDirection) lookDirection.y = 0;
         if (this.alignLookDirection) this.gameObject.lookAt(lookDirection);

package/src/engine-components/Renderer.ts

@@ -171,17 +171,6 @@ export class Renderer extends Behaviour {
         return lm !== null && lm !== undefined;
     }
 
-
-    get activeSelf(): boolean {
-        return this.enabled;
-    }
-
-    set activeSelf(val: boolean | number) {
-        const target = typeof val === "number" ? val > 0.5 : val;
-        this.enabled = target;
-        if (target) this.gameObject.visible = true;
-    }
-
     awake() {
         const type = this.gameObject.type;
         if (type === "Group") {

package/src/engine-components/SmoothFollow.ts

@@ -45,7 +45,7 @@ export class SmoothFollow extends Behaviour {
         if (this.rotateFactor > 0) {
             const wr = utils.getWorldQuaternion(this.target);
             if(this.flipForward){
-                wr.multiply(SmoothFollow._invertForward);
+                wr.premultiply(SmoothFollow._invertForward);
             }
             const frot = this._firstUpdate || hard ? 1 : Mathf.clamp01(this.context.time.deltaTime * this.rotateFactor);
             this.worldQuaternion = this.worldQuaternion.slerp(wr, frot);

package/src/engine-components/SpectatorCamera.ts

@@ -4,21 +4,22 @@ import * as THREE from "three";
 import { OrbitControls } from "./OrbitControls";
 import { WebXR, WebXREvent } from "./WebXR";
 import { AvatarMarker } from "./WebXRAvatar";
-import { XRFlag, XRStateFlag } from "./XRFlag";
+import { XRStateFlag } from "./XRFlag";
 import { SmoothFollow } from "./SmoothFollow";
-import { setWorldPosition, setWorldQuaternion, getWorldPosition, getWorldQuaternion } from "../engine/engine_three_utils";
+import { setWorldPosition, setWorldQuaternion, getWorldPosition, getWorldQuaternion, lookAtInverse } from "../engine/engine_three_utils";
+import { ArrayCamera } from "three";
+import { KeyCode } from "../engine/engine_input";
 
 export class SpectatorCamera extends Behaviour {
 
     cam: Camera | null = null;
 
-    private _firstPersonMode: boolean | undefined = false;
+    private _firstPersonMode: boolean | undefined = true;
     get firstPersonMode(): boolean {
-        return true;
         return this._firstPersonMode ?? false;
     }
-    set firstPersonMode(_val: boolean) {
-        // this._firstPersonMode = val;
+    set firstPersonMode(val: boolean) {
+        this._firstPersonMode = val;
         // if (this._firstPersonMode) this.enableFirstPersonMode();
         // else this.enableThirdPersonMode();
     }
@@ -62,7 +63,6 @@ export class SpectatorCamera extends Behaviour {
     private orbit: OrbitControls | null = null;
     private firstPersonFollow: SmoothFollow | null = null;
     private spectatorUIDomElement: HTMLElement | null = null;
-    private _avatar: AvatarMarker | null = null;
 
     private eventSub_WebXRRequestStartEvent: Function | null = null;
     private eventSub_WebXRStartEvent: Function | null = null;
@@ -72,14 +72,6 @@ export class SpectatorCamera extends Behaviour {
 
         GameObject.setActive(this.gameObject, false);
 
-        const uiQuery = "#spectator-camera-ui";
-        this.spectatorUIDomElement = this.context.domElement.querySelector(uiQuery);
-        if (!this.spectatorUIDomElement) {
-            console.warn("Could not find spectator camera UI element", uiQuery);
-        }
-        this.spectatorUIDomElement?.classList.add("hidden");
-
-
         if (!this.isSupportedPlatform()) {
             console.log("Disable spectator cam", window.navigator.userAgent, this);
             return;
@@ -93,6 +85,22 @@ export class SpectatorCamera extends Behaviour {
             // this.cam = GameObject.addNewComponent(this.gameObject, Camera) as Camera;
         }
 
+        const uiQuery = "#spectator-camera-ui";
+        this.spectatorUIDomElement = this.context.domElement.querySelector(uiQuery);
+        if (!this.spectatorUIDomElement) {
+            console.warn("Could not find spectator camera UI element", uiQuery);
+            // this.spectatorUIDomElement = document.createElement("div");
+            // this.spectatorUIDomElement.id = "spectator-camera-ui";
+            // this.spectatorUIDomElement.classList.add("desktop");
+            // this.context.domElement.appendChild(this.spectatorUIDomElement);
+            
+            // const toggle = document.createElement("button");
+            // toggle.id = "toggle-spectator-view";
+            // this.spectatorUIDomElement.appendChild(toggle);
+        }
+        this.spectatorUIDomElement?.classList.add("hidden");
+
+
         if (this.cam) {
             this.cam.enabled = true;
             this._orbitStartPos.copy(getWorldPosition(this.cam.cam));
@@ -189,53 +197,37 @@ export class SpectatorCamera extends Behaviour {
     private onXRSessionStart(_evt) {
         this._sessionHasStarted = true;
         this.updateUI();
+
+        if (this.context.mainCamera) {
+            const cam = this.context.renderer.xr.getCamera(this.context.mainCamera) as ArrayCamera;
+            this.setupFollowMode(cam);
+        }
     }
 
     private onXRSessionEnded(_evt) {
         this._sessionHasStarted = false;
+        this._firstPersonIsSetup = false;
         this.spectatorUIDomElement?.classList.add("hidden");
         GameObject.setActive(this.gameObject, false);
     }
 
     private _sessionHasStarted: boolean = false;
-    private _isFirstStart = true;
     private _firstPersonIsSetup: boolean = false;
     private _orbitStartPos: THREE.Vector3 = new THREE.Vector3();
     private _orbitStartRot: THREE.Quaternion = new THREE.Quaternion();
     private _orbitStartPos2: THREE.Vector3 = new THREE.Vector3();
     private _orbitStartRot2: THREE.Quaternion = new THREE.Quaternion();
 
-
     // TODO: only show Spectator cam for DesktopVR;
     // don't show for AR, don't show on Quest
     // TODO: properly align cameras on enter/exit VR, seems currently spectator cam breaks alignment
     onAfterRender(): void {
         if (!this.cam) return;
 
-        // if (this.context.time.frameCount % 120 === 0) {
-        //     this.firstPersonMode = !this.firstPersonMode;
-        // }
-
-        if (this.firstPersonMode) {
-            if (!this._firstPersonIsSetup) {
-                if (!this._avatar || this._avatar?.destroyed) {
-                    for (const av of AvatarMarker.instances) {
-                        if (av.avatar && "isLocalAvatar" in av.avatar && av.avatar?.isLocalAvatar) {
-                            this._avatar = av;
-                            const head = av.avatar.head;
-                            if (!head) continue;
-                            this.setupFollowMode(head);
-                        }
-                    }
-                }
-                // else {
-                //     if (this.context.mainCamera) {
-                //         this.setupFollowMode(this.context.mainCamera, true);
-                //     }
-                // }
-            }
-        }
-
+        if(this.context.input.isKeyDown(KeyCode.KEY_S))
+            this.firstPersonMode = !this.firstPersonMode;
+        
+        this.updateFollowSettings();
 
         const renderer = this.context.renderer;
         const xrWasEnabled = renderer.xr.enabled;
@@ -295,20 +287,22 @@ export class SpectatorCamera extends Behaviour {
         this.resetAvatarFlags();
     }
 
-    private setupFollowMode(object: THREE.Object3D, flipForward: boolean = true) {
+    private setupFollowMode(object: THREE.Object3D) {
         if (!object) return;
         if (!this.cam) return;
         if (this._firstPersonIsSetup) return;
         this._firstPersonIsSetup = true;
 
-        const target = object.add(new THREE.Object3D());
-        target.add(new THREE.AxesHelper());
+
         this.firstPersonFollow = GameObject.addNewComponent(this.cam.gameObject, SmoothFollow);
+
+        const target = new THREE.Object3D();
+        object.add(target);
+        target.add(new THREE.AxesHelper(.2))
         this.firstPersonFollow.target = target;
-        this.firstPersonFollow.followFactor = 12;
-        this.firstPersonFollow.rotateFactor = 5;
-        // TODO: figure out why this needs flipping when we use the spectator cam without an Avatar
-        if (flipForward) this.firstPersonFollow.flipForward = true;
+
+        this.updateFollowSettings();
+
         const perspectiveCamera = this.context.mainCamera as THREE.PerspectiveCamera;
         if (perspectiveCamera) {
             this.cam.cam.near = perspectiveCamera.near;
@@ -318,6 +312,26 @@ export class SpectatorCamera extends Behaviour {
         if (this.orbit) this.orbit.enabled = false;
     }
 
+    private updateFollowSettings() {
+        const target = this.firstPersonFollow?.target;
+        if (!target || !this.firstPersonFollow) return;
+        if (this.firstPersonMode === false) {
+            this.firstPersonFollow.followFactor = 3;
+            this.firstPersonFollow.rotateFactor = 2;
+            this.firstPersonFollow.flipForward = false;
+            target.position.set(0, .5, 1.5);
+            target.quaternion.identity();
+            // lookAtInverse(target, new THREE.Vector3(0, 0, 0));
+        }
+        else {
+            target.position.set(0, 0, 0);
+            target.quaternion.identity();
+            this.firstPersonFollow.followFactor = 12;
+            this.firstPersonFollow.rotateFactor = 5;
+            this.firstPersonFollow.flipForward = false;
+        }
+    }
+
     private setAvatarFlagsBeforeRender() {
         for (const av of AvatarMarker.instances) {
             if (av.avatar && "isLocalAvatar" in av.avatar) {

package/src/engine-components/WebXR.ts

@@ -149,6 +149,9 @@ export class WebXR extends Behaviour {
         return this._vrButton;
     }
 
+    public get IsInVR() { return this._isInVR; }
+    public get IsInAR() { return this._isInAR; }
+
     private rig!: THREE.Object3D;
     private isInit: boolean = false;
 

package/src/engine-components/WebXRController.ts

@@ -249,6 +249,7 @@ export class WebXRController extends Behaviour {
         this.webXR.Rig?.add(this.controller);
         this.webXR.Rig?.add(this.raycastLine);
         this.raycastLine?.add(this._raycastHitPoint);
+        this._raycastHitPoint.visible = false;
         this.hand.add(this.handPointerModel);
         console.log("ADDED TO RIG", this.webXR.Rig);
 

package/src/engine-components/avatar/Avatar_MouthShapes.ts

@@ -19,8 +19,10 @@ export class Avatar_MouthShapes extends Behaviour {
     private mouthChangeLength = 0;
 
     awake(): void {
-        this.voip = GameObject.findObjectOfType(Voip, this.context);
-        console.log(this);
+        setTimeout(()=>{
+            this.voip = GameObject.findObjectOfType(Voip, this.context);
+            if (!this.marker) this.marker = GameObject.getComponentInParent(this.gameObject, AvatarMarker);
+        }, 3000)
     }
 
     update(): void {
@@ -29,16 +31,16 @@ export class Avatar_MouthShapes extends Behaviour {
         let id = this.marker?.connectionId ?? null;
         if (!id) {
             if (debug) id = null;
+            return;
         }
-        const freq = this.voip.getFrequency(id);
-        if (freq == null) return;
+        const freq = this.voip.getFrequency(id) ?? 0;
         this.updateLips(freq);
     }
 
     private updateLips(frequency: number) {
         if (this.context.time.time - this.lastMouthChangeTime > this.mouthChangeLength) {
             this.mouthChangeLength = .05 + Math.random() * .1;
-            if (this.talking && this.talking.length > 0 && frequency > 50) {
+            if (this.talking && this.talking.length > 0 && frequency > 30) {
                 this.lastMouthChangeTime = this.context.time.time;
                 const index = Math.floor(Math.random() * this.talking.length);
                 this.setMouthShapeActive(this.talking, index);
@@ -55,14 +57,13 @@ export class Avatar_MouthShapes extends Behaviour {
         if (!arr) return;
 
         // hide other
-        if(arr != this.idle) this.idle.map(i => i.visible = false);
+        if (arr != this.idle) this.idle.map(i => i.visible = false);
         else this.talking.map(i => i.visible = false);
 
         for (let i = 0; i < arr.length; i++) {
             const shape = arr[i];
             if (shape) {
                 shape.visible = i === index;
-                shape.scale.set(1,1,1);
             }
         }
     }

package/src/engine-components/codegen/exports.ts

@@ -39,7 +39,6 @@ export { Light } from "../Light";
 export { LODModel } from "../LODGroup";
 export { LODGroup } from "../LODGroup";
 export { LookAtConstraint } from "../LookAtConstraint";
-export { MeshCollider } from "../MeshCollider";
 export { NavMesh } from "../NavMesh";
 export { NavMeshAgent } from "../NavMesh";
 export { NestedGltf } from "../NestedGltf";

package/src/engine-components/js-extensions/RGBAColor.ts

@@ -4,6 +4,8 @@ import { Color } from "three";
 export class RGBAColor extends Color {
     alpha: number = 1;
 
+    get isRGBAColor() { return true; }
+
     constructor(r: number, g: number, b: number, a: number) {
         super(r, g, b);
         this.alpha = a;
@@ -17,8 +19,10 @@ export class RGBAColor extends Color {
 
     copy(col : RGBAColor | Color){
         super.copy(col);
-        if("alpha" in col && typeof col.alpha === "number") this.alpha = col.alpha;
-        if(typeof col["a"] === "number") this.alpha = col["a"];
+        if("alpha" in col && typeof col.alpha === "number") {
+            this.alpha = col.alpha;
+        }
+        else if(typeof col["a"] === "number") this.alpha = col["a"];
         return this;
     }