@needle-tools/engine 2.37.0-pre → 2.38.0-pre

package/src/engine-components/Camera.ts

@@ -7,6 +7,7 @@ import { RGBAColor } from "./js-extensions/RGBAColor";
 import { PerspectiveCamera } from "three";
 import { XRSessionMode } from "../engine/engine_setup";
 import { ICamera } from "../engine/engine_types"
+import { showBalloonMessage } from "../engine/debug/debug";
 
 export enum ClearFlags {
     Skybox = 1,
@@ -127,6 +128,10 @@ export class Camera extends Behaviour implements ICamera {
         this.applyClearFlagsIfIsActiveCamera();
     }
 
+    onDisable() {
+        this.context.removeCamera(this);
+    }
+
     buildCamera() {
         if (this._cam) return;
 
@@ -168,6 +173,8 @@ export class Camera extends Behaviour implements ICamera {
     }
 
     applyClearFlagsIfIsActiveCamera() {
+        if (debug)
+            showBalloonMessage("apply Camera clear flags");
         if (this._cam && this.context.mainCameraComponent === this) {
             switch (this._clearFlags) {
                 case ClearFlags.Skybox:
@@ -203,12 +210,22 @@ export class Camera extends Behaviour implements ICamera {
         const session = this.context.renderer.xr?.getSession();
         if (!session) return false;
         const environmentBlendMode = session.environmentBlendMode;
+        if (debug)
+            showBalloonMessage("Environment blend mode: " + environmentBlendMode + " on " + navigator.userAgent);
         const transparent = environmentBlendMode === 'additive' || environmentBlendMode === 'alpha-blend';
-        // workaround for Quest 2 returning opaque when it should be alpha-blend
-        // check user agent if this is the Quest browser and return true if so
 
-        if (environmentBlendMode === "opaque" && navigator.userAgent?.includes("OculusBrowser")) {
-            if (this.context.xrSessionMode === XRSessionMode.ImmersiveAR) return true;
+        if (this.context.xrSessionMode === XRSessionMode.ImmersiveAR) {
+            if (environmentBlendMode === "opaque") {
+                // workaround for Quest 2 returning opaque when it should be alpha-blend
+                // check user agent if this is the Quest browser and return true if so
+                if (navigator.userAgent?.includes("OculusBrowser")) {
+                    return true;
+                }
+                // Mozilla WebXR Viewer
+                else if (navigator.userAgent?.includes("Mozilla") && navigator.userAgent?.includes("Mobile WebXRViewer/v2")) {
+                    return true;
+                }
+            }
         }
         return transparent;
     }

package/src/engine-components/CharacterController.ts

@@ -0,0 +1,171 @@
+import { Ray, Vector3 } from "three";
+import { Mathf } from "../engine/engine_math";
+import { serializeable } from "../engine/engine_serialization";
+import { Collision } from "../engine/engine_types";
+import { CapsuleCollider } from "./Collider";
+import { Behaviour, GameObject } from "./Component";
+import { Rigidbody } from "./RigidBody";
+import { Animator } from "./Animator"
+import { RaycastOptions } from "../engine/engine_physics";
+import { getWorldPosition } from "../engine/engine_three_utils";
+
+export class CharacterController extends Behaviour {
+
+    @serializeable(Vector3)
+    center: Vector3 = new Vector3(0, 0, 0);
+    @serializeable()
+    radius: number = .5;
+    @serializeable()
+    height: number = 2;
+
+    private _rigidbody: Rigidbody | null = null;
+    get rigidbody(): Rigidbody {
+        if (this._rigidbody) return this._rigidbody;
+        this._rigidbody = this.gameObject.getComponent(Rigidbody);
+        if (!this._rigidbody)
+            this._rigidbody = this.gameObject.addNewComponent(Rigidbody) as Rigidbody;
+        return this.rigidbody;
+    }
+
+    onEnable() {
+        let rb = this.rigidbody;
+        let collider = this.gameObject.getComponent(CapsuleCollider);
+        if (!collider)
+            collider = this.gameObject.addNewComponent(CapsuleCollider) as CapsuleCollider;
+        // rb.isKinematic = true;
+        collider.center.copy(this.center);
+        collider.radius = this.radius;
+        collider.height = this.height;
+        this.gameObject.rotation.x = 0;
+        this.gameObject.rotation.z = 0;
+        rb.lockRotationX = true;
+        rb.lockRotationY = true;
+        rb.lockRotationZ = true;
+
+        // TODO: this doesnt work yet
+        // setInterval(()=>{
+        //     this.rigidbody.isKinematic = !this.rigidbody.isKinematic;
+        //     console.log(this.rigidbody.isKinematic);
+        // }, 1000)
+    }
+
+    move(vec: Vector3) {
+        this.gameObject.position.add(vec);
+    }
+
+    private _activeGroundCollisions: Set<Collision> = new Set();
+
+    onCollisionEnter(col: Collision) {
+        for (const contact of col.contacts) {
+            // console.log(contact.normal);
+            if (contact.normal.y > .1) {
+                this._activeGroundCollisions.add(col);
+                break;
+            }
+        }
+    }
+
+    onCollisionExit(col: Collision) {
+        this._activeGroundCollisions.delete(col);
+    }
+
+    get isGrounded(): boolean { return this._activeGroundCollisions.size > 0; }
+}
+
+export class CharacterControllerInput extends Behaviour {
+
+    @serializeable(CharacterController)
+    controller?: CharacterController;
+
+    @serializeable()
+    movementSpeed: number = 2;
+
+    @serializeable()
+    rotationSpeed: number = 2;
+
+    @serializeable()
+    jumpForce: number = 1;
+
+    @serializeable(Animator)
+    animator?: Animator;
+
+    private _currentSpeed: Vector3 = new Vector3(0, 0, 0);
+    private _currentAngularSpeed: Vector3 = new Vector3(0, 0, 0);
+
+    private _temp: Vector3 = new Vector3(0, 0, 0);
+    private _jumpCount: number = 0;
+
+    update() {
+
+        if (this.controller?.isGrounded) {
+            this._jumpCount = 0;
+            this.animator?.SetBool("doubleJump", false);
+        }
+
+        const forward = this.context.input.isKeyPressed("w");
+        const backward = this.context.input.isKeyPressed("s");
+        const rotateLeft = this.context.input.isKeyPressed("a");
+        const rotateRight = this.context.input.isKeyPressed("d");
+        const jump = this.context.input.isKeyDown(" ");
+        // if (jumpDown) this._jumpDownTime = this.context.time.time;
+        // const jumpUp = this.context.input.isKeyUp(" ");
+
+        const step = forward ? 1 : 0 + backward ? -1 : 0;
+        this._currentSpeed.z += step * this.movementSpeed * this.context.time.deltaTime;
+
+        // if (!this.controller || this.controller.isGrounded)
+        this.animator?.SetBool("running", step != 0);
+        this.animator?.SetBool("jumping", this.controller?.isGrounded === true && jump);
+
+        this._temp.copy(this._currentSpeed);
+        this._temp.applyQuaternion(this.gameObject.quaternion);
+        if (this.controller) this.controller.move(this._temp);
+        else this.gameObject.position.add(this._temp);
+
+        const rotation = rotateLeft ? 1 : 0 + rotateRight ? -1 : 0;
+        this._currentAngularSpeed.y += Mathf.toRadians(rotation * this.rotationSpeed) * this.context.time.deltaTime;
+        this.gameObject.rotateY(this._currentAngularSpeed.y);
+
+
+        this._currentSpeed.multiplyScalar(1 - this.context.time.deltaTime * 10);
+        this._currentAngularSpeed.y *= 1 - this.context.time.deltaTime * 10;
+
+        if (this.controller && jump && this.jumpForce > 0) {
+            let canJump = this.controller?.isGrounded;
+            if (!this.controller?.isGrounded && this._jumpCount === 1) {
+                canJump = true;
+                this.animator?.SetBool("doubleJump", true);
+            }
+
+            if (canJump) {
+                this._jumpCount += 1;
+                // TODO: factor in mass
+                const rb = this.controller.rigidbody;
+                // const fullJumpHoldLength = .1;
+                const factor = this._jumpCount === 2 ? 2 : 1;// Mathf.clamp((this.context.time.time - this._jumpDownTime), 0, fullJumpHoldLength) / fullJumpHoldLength;
+                rb.applyImpulse(new Vector3(0, 1, 0).multiplyScalar(this.jumpForce * factor));
+            }
+        }
+
+        if (this.controller) {
+            // TODO: should probably raycast to the ground or check if we're still in the jump animation
+            const verticalSpeed = this.controller?.rigidbody.getVelocity().y;
+            if (verticalSpeed < -1) {
+                if (!this._raycastOptions.ray) this._raycastOptions.ray = new Ray();
+                this._raycastOptions.ray.origin.copy(getWorldPosition(this.gameObject));
+                this._raycastOptions.ray.direction.set(0, -1, 0);
+                const currentLayer = this.layer;
+                this.gameObject.layers.disableAll();
+                this.gameObject.layers.set(2);
+                const hits = this.context.physics.raycast(this._raycastOptions);
+                this.gameObject.layers.set(currentLayer);
+                if ((hits.length && hits[0].distance > 2 || verticalSpeed < -10)) {
+                    this.animator?.SetBool("falling", true);
+                }
+            }
+            else this.animator?.SetBool("falling", false);
+        }
+    }
+
+    private _raycastOptions = new RaycastOptions();
+}

package/src/engine-components/Collider.ts

@@ -2,16 +2,9 @@ import { Behaviour } from "./Component";
 import { Rigidbody } from "./RigidBody";
 import { serializeable } from "../engine/engine_serialization_decorator";
 import { Event, Mesh, Object3D, Vector3 } from "three"
-import { IColliderProvider, registerColliderProvider } from "../engine/engine_physics";
+// import { IColliderProvider, registerColliderProvider } from "../engine/engine_physics";
 import { ICollider } from "../engine/engine_types";
-import { getComponentInChildren } from "../engine/engine_components";
 
-class ColliderProvider implements IColliderProvider {
-    getCollider(obj: Object3D): ICollider {
-        return getComponentInChildren<Collider>(obj, Collider);
-    }
-}
-registerColliderProvider(new ColliderProvider());
 
 export class Collider extends Behaviour implements ICollider {
 
@@ -54,7 +47,7 @@ export class SphereCollider extends Collider {
     @serializeable()
     radius: number = .5;
     @serializeable(Vector3)
-    center: THREE.Vector3 = new Vector3(0, 0, 0);
+    center: Vector3 = new Vector3(0, 0, 0);
 
     onEnable() {
         super.onEnable();
@@ -65,9 +58,9 @@ export class SphereCollider extends Collider {
 export class BoxCollider extends Collider {
 
     @serializeable(Vector3)
-    size: THREE.Vector3 = new Vector3(1, 1, 1);
+    size: Vector3 = new Vector3(1, 1, 1);
     @serializeable(Vector3)
-    center: THREE.Vector3 = new Vector3(0, 0, 0);
+    center: Vector3 = new Vector3(0, 0, 0);
 
     onEnable() {
         super.onEnable();
@@ -83,7 +76,7 @@ export class MeshCollider extends Collider {
     @serializeable()
     convex: boolean = false;
 
-    awake(){
+    awake() {
         console.log(this);
     }
 
@@ -98,4 +91,21 @@ export class MeshCollider extends Collider {
         if (this.sharedMesh?.isMesh)
             this.context.physics.addMeshCollider(this, this.sharedMesh, this.convex);
     }
+}
+
+
+export class CapsuleCollider extends Collider {
+    @serializeable(Vector3)
+    center: Vector3 = new Vector3(0, 0, 0);
+
+    @serializeable()
+    radius: number = .5;
+    @serializeable()
+    height: number = 2;
+
+    onEnable() {
+        super.onEnable();
+        this.context.physics.addCapsuleCollider(this, this.center, this.height, this.radius);
+    }
+
 }

package/src/engine-components/Light.ts

@@ -130,6 +130,9 @@ export class Light extends Behaviour implements ILight {
     get shadowNormalBias(): number { return this._shadowNormalBias; }
     private _shadowNormalBias: number = 1;
 
+    /** when enabled this will remove the multiplication when setting the shadow bias settings initially */
+    private _overrideShadowBiasSettings: boolean = false;
+
     @serializeable()
     set shadows(val: LightShadows) {
         this._shadows = val;
@@ -338,7 +341,7 @@ export class Light extends Behaviour implements ILight {
 
         if (this.light !== undefined) {
             this._intensity = this.light.intensity;
-            
+
             if (this.shadows !== LightShadows.None) {
                 this.light.castShadow = true;
             }
@@ -353,8 +356,19 @@ export class Light extends Behaviour implements ILight {
                 this.light.shadow.mapSize.width = 2048;
                 this.light.shadow.mapSize.height = 2048;
             }
-            this.light.shadow.bias = this.shadowBias * 0.00001;
-            this.light.shadow.normalBias = this.shadowNormalBias * .0001;
+
+            if (debug)
+                console.log("Override shadow bias?", this._overrideShadowBiasSettings, this.shadowBias, this.shadowNormalBias);
+
+            // shadow bias settings
+            if (this._overrideShadowBiasSettings === true) {
+                this.light.shadow.bias = this.shadowBias;
+                this.light.shadow.normalBias = this.shadowNormalBias;
+            }
+            else {
+                this.light.shadow.bias = this.shadowBias * 0.00001;
+                this.light.shadow.normalBias = this.shadowNormalBias * .0001;
+            }
 
             // console.log(this.light.shadow, this);
             const cam = this.light.shadow.camera as THREE.OrthographicCamera;

package/src/engine-components/Renderer.ts

@@ -5,7 +5,7 @@ import { RendererLightmap } from "./RendererLightmap";
 import { Context } from "../engine/engine_setup";
 import { getParam } from "../engine/engine_utils";
 import { serializeable } from "../engine/engine_serialization_decorator";
-import { AxesHelper, Material, Mesh, Object3D, Texture, Vector4 } from "three";
+import { AxesHelper, Material, Mesh, Object3D, SkinnedMesh, Texture, Vector4 } from "three";
 import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects";
 import { NEEDLE_deferred_texture } from "../engine/extensions/NEEDLE_deferred_texture";
 import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
@@ -67,6 +67,7 @@ class SharedMaterialArray implements ISharedMaterials {
                 case "Group":
                     this._targets = [...go.children];
                     break;
+                case "SkinnedMesh":
                 case "Mesh":
                     this._targets.push(go);
                     break;
@@ -155,6 +156,9 @@ export class Renderer extends Behaviour implements IRenderer {
         if (this.gameObject.type === "Mesh") {
             return this.gameObject as unknown as Mesh
         }
+        else if (this.gameObject.type === "SkinnesMesh") {
+            return this.gameObject as unknown as SkinnedMesh;
+        }
         else if (this.gameObject.type === "Group") {
             return this.gameObject.children[0] as unknown as Mesh;
         }

package/src/engine-components/RigidBody.ts

@@ -7,7 +7,7 @@ import { Object3D, Vector3 } from "three";
 import { IRigidbody } from "../engine/engine_types";
 import { CollisionDetectionMode, RigidbodyConstraints } from "../engine/engine_physics.types";
 import { validate } from "../engine/engine_util_decorator";
-import { Context } from "../engine/engine_setup";
+import { Context, FrameEvent } from "../engine/engine_setup";
 
 class TransformWatch {
 
@@ -16,23 +16,48 @@ class TransformWatch {
     }
     positionChanged: boolean = false;
     rotationChanged: boolean = false;
-    position?: Vector3;
-    quaternion?: THREE.Quaternion;
 
-    reset() {
+    position?: { x?: number, y?: number, z?: number };
+    quaternion?: { _x?: number, _y?: number, _z?: number, _w?: number };
+
+    private _positionKeys: string[] = ["x", "y", "z"];
+    private _quaternionKeys: string[] = ["_x", "_y", "_z", "_w"];
+
+    reset(clearPreviousValues: boolean = false) {
         this.positionChanged = false;
         this.rotationChanged = false;
         this.mute = false;
+
+        if (clearPreviousValues) {
+            if (this.position)
+                for (const key of this._positionKeys)
+                    delete this.position[key];
+            if (this.quaternion)
+                for (const key of this._quaternionKeys)
+                    delete this.quaternion[key];
+        }
     }
 
     mute: boolean = false;
 
     applyValues() {
-        if (this.positionChanged) {
-            this.obj.position.copy(this.position!)
+        // only apply the values that actually changed
+        // since we want to still control all the other values via physics 
+        if (this.positionChanged && this.position) {
+            for (const key of this._positionKeys) {
+                const val = this.position[key];
+                if (val !== undefined)
+                    this.obj.position[key] = val;
+            }
         }
         if (this.rotationChanged) {
-            this.obj.quaternion.copy(this.quaternion!)
+            if (this.quaternion) {
+                for (const key of this._quaternionKeys) {
+                    const val = this.quaternion[key];
+                    if (val !== undefined)
+                        this.obj.quaternion[key] = val;
+                }
+            }
         }
     }
 
@@ -52,26 +77,28 @@ class TransformWatch {
             if (!this._positionWatch)
                 this._positionWatch = new Watch(this.obj.position, ["x", "y", "z"]);
             this._positionWatch.apply();
-            this.position = this.obj.position.clone();
+            this.position = {};
+            // this.position = this.obj.position.clone();
             this._positionWatch.subscribeWrite((val, prop) => {
                 if (this.context.physics.isUpdating || this.mute) return;
-                // if (this.position![prop] !== val) {
+                const prev = this.position![prop];
+                if (Math.abs(prev - val) < .00001) return;
                 this.position![prop] = val;
                 this.positionChanged = true;
-                // }
             })
         }
         if (rotation) {
             if (!this._rotationWatch)
                 this._rotationWatch = new Watch(this.obj.quaternion, ["_x", "_y", "_z", "_w"]);
             this._rotationWatch.apply();
-            this.quaternion = this.obj.quaternion.clone();
+            this.quaternion = {};
+            // this.quaternion = this.obj.quaternion.clone();
             this._rotationWatch.subscribeWrite((val, prop) => {
                 if (this.context.physics.isUpdating || this.mute) return;
-                // if (this.quaternion![prop] !== val) {
+                const prev = this.quaternion![prop];
+                if (Math.abs(prev - val) < .00001) return;
                 this.quaternion![prop] = val;
                 this.rotationChanged = true;
-                // }
             })
         }
     }
@@ -188,6 +215,7 @@ export class Rigidbody extends Behaviour implements IRigidbody {
             this._watch = new TransformWatch(this.gameObject, this.context);
         }
         this._watch.start(true, true);
+        this.startCoroutine(this.beforePhysics(), FrameEvent.LateUpdate);
     }
 
     onDisable() {
@@ -203,29 +231,35 @@ export class Rigidbody extends Behaviour implements IRigidbody {
         this._propertiesChanged = true;
     }
 
-    earlyUpdate() {
-        if (this._propertiesChanged) {
-            this._propertiesChanged = false;
-            this.context.physics.updateProperties(this);
+    // need to do this right before updating physics to prevent rendered object glitching through physical bodies
+    *beforePhysics() {
+        while (true) {
+            if (this._propertiesChanged) {
+                this._propertiesChanged = false;
+                this.context.physics.updateProperties(this);
+            }
+            if (this._watch?.isDirty) {
+                this._watch.mute = true;
+                this._watch.applyValues();
+                this.context.physics.updateBody(this, this._watch.positionChanged, this._watch.rotationChanged);
+                this._watch.reset();
+            }
+            this.captureVelocity();
+            yield;
         }
-        if (this._watch?.isDirty) {
-            this._watch.mute = true;
-            this._watch.applyValues();
-            this.context.physics.updateBody(this, this._watch.positionChanged, this._watch.rotationChanged);
-            this._watch.reset();
-        }
-
-        this.captureVelocity();
     }
 
     private get body() {
         return this.context.physics.internal_getRigidbody(this);
     }
 
-    // TODO: we need to differentiate between setting a physics body to a new position and moving it where we also want to affect the velocity
-    // public teleport(){
-    //     this.context.physics.updateBody(this);
-    // }
+    public teleport(pt: { x: number, y: number, z: number }, localspace:boolean = true) {
+        this._watch?.reset(true);
+        if(localspace) this.gameObject.position.set(pt.x, pt.y, pt.z);
+        else this.setWorldPosition(pt.x, pt.y, pt.z);
+        this.resetForcesAndTorques();
+        this.resetVelocities();
+    }
 
     public resetForces() {
         this.body?.resetForces(true);

package/src/engine-components/SmoothFollow.ts

@@ -1,53 +1,56 @@
 import { Camera } from "./Camera";
 import { Behaviour, GameObject } from "./Component";
-import * as utils from "../engine/engine_three_utils";
 import * as THREE from "three";
 import { Mathf } from "../engine/engine_math";
 import { serializeable } from "../engine/engine_serialization_decorator";
 import { Object3D } from "three";
+import { getWorldPosition, getWorldQuaternion } from "../engine/engine_three_utils";
+import { Axes } from "../engine/engine_physics.types";
 
 export class SmoothFollow extends Behaviour {
 
     @serializeable(Object3D)
     target: THREE.Object3D | null = null;
 
+    @serializeable()
     followFactor = .1;
+    @serializeable()
     rotateFactor = .1;
 
-    flipForward:boolean = false;
+    @serializeable()
+    positionAxes : Axes = Axes.All;
 
-    private static _invertForward : THREE.Quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
-    private _firstUpdate = true;
+    // @serializeable()
+    // rotationAxes : Axes = Axes.All;
 
+    flipForward: boolean = false;
+
+    private static _invertForward: THREE.Quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI);
+    private _firstUpdate = true;
 
-    onEnable(): void {
-        const cam = GameObject.getComponentInChildren(this.gameObject, Camera) as Camera;
-        if (cam && cam.cam) {
-            cam.gameObject.position.set(0, 0, 0);
-            cam.cam.position.set(0, 0, 0);
-            cam.gameObject.quaternion.identity();
-            cam.cam.quaternion.setFromEuler(new THREE.Euler(0, Math.PI, 0));
-        }
-    }
 
     onBeforeRender(): void {
-        if (this.followFactor <= 0) return;
         this.updateNow(false);
     }
 
     updateNow(hard: boolean) {
         if (!this.target || this.target === this.gameObject) return;
         if (this.followFactor > 0) {
-            const wp = utils.getWorldPosition(this.target);
+            const wp = getWorldPosition(this.target);
             const fpos = this._firstUpdate || hard ? 1 : Mathf.clamp01(this.context.time.deltaTime * this.followFactor);
-            this.worldPosition = this.worldPosition.lerp(wp, fpos);
+            const currentPosition = this.worldPosition;
+            if(this.positionAxes & Axes.X) currentPosition.x = Mathf.lerp(currentPosition.x, wp.x, fpos);
+            if(this.positionAxes & Axes.Y) currentPosition.y = Mathf.lerp(currentPosition.y, wp.y, fpos);
+            if(this.positionAxes & Axes.Z) currentPosition.z = Mathf.lerp(currentPosition.z, wp.z, fpos);
+            this.worldPosition = currentPosition;
         }
         if (this.rotateFactor > 0) {
-            const wr = utils.getWorldQuaternion(this.target);
-            if(this.flipForward){
+            const wr = getWorldQuaternion(this.target);
+            if (this.flipForward) {
                 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);
         }
         this._firstUpdate = false;

package/src/engine-components/WebXR.ts

@@ -505,6 +505,7 @@ export class WebAR {
         const context = this.webxr.context;
         this.reticleActive = true;
         this.didPlaceARSessionRoot = false;
+        this.getAROverlayContainer();
 
         const deviceType = navigator.userAgent?.includes("OculusBrowser") ? ControllerType.PhysicalDevice : ControllerType.Touch;
         const controllerCount = deviceType === ControllerType.Touch ? 4 : 2;
@@ -563,10 +564,8 @@ export class WebAR {
         }
         else console.warn("No WebARSessionRoot found in scene")
 
-        if (this.arDomOverlay && this.arOverlayElement) {
-            const el = this.arOverlayElement as INeedleEngineComponent;
-            el.onEnterAR?.call(el, session, this.arOverlayElement);
-        }
+        const eng = this.context.domElement as INeedleEngineComponent;
+        eng?.onEnterAR?.call(eng, session, this.arOverlayElement!);
 
         this.context.mainCameraComponent?.applyClearFlagsIfIsActiveCamera();
     }

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

@@ -13,10 +13,13 @@ export { AxesHelper } from "../AxesHelper";
 export { BasicIKConstraint } from "../BasicIKConstraint";
 export { BoxHelperComponent } from "../BoxHelperComponent";
 export { Camera } from "../Camera";
+export { CharacterController } from "../CharacterController";
+export { CharacterControllerInput } from "../CharacterController";
 export { Collider } from "../Collider";
 export { SphereCollider } from "../Collider";
 export { BoxCollider } from "../Collider";
 export { MeshCollider } from "../Collider";
+export { CapsuleCollider } from "../Collider";
 export { DeleteBox } from "../DeleteBox";
 export { Deletable } from "../DeleteBox";
 export { DeviceFlag } from "../DeviceFlag";