@needle-tools/engine 3.5.9-beta.2 → 3.5.10-beta

package/src/engine/engine_element_loading.ts

@@ -73,14 +73,15 @@ export class EngineLoadingView implements ILoadingViewHandler {
     }
 
     onLoadingBegin(message?: string) {
+        const _element = this._element.shadowRoot || this._element;
         if (debug) console.warn("Begin Loading")
         if (!this._loadingElement) {
-            for (let i = 0; i < this._element.children.length; i++) {
-                const el = this._element.children[i] as HTMLElement;
+            for (let i = 0; i < _element.children.length; i++) {
+                const el = _element.children[i] as HTMLElement;
                 if (el.classList.contains(EngineLoadingView.LoadingContainerClassName)) {
                     if (!this._allowCustomLoadingElement) {
                         if (debug) console.warn("Remove custom loading container")
-                        this._element.removeChild(el);
+                        _element.removeChild(el);
                         continue;
                     }
                     this._loadingElement = this.createLoadingElement(el);
@@ -92,7 +93,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._progress = 0;
         this.loadingProgress = 0;
         this._loadingElement.style.display = "flex";
-        this._element.appendChild(this._loadingElement);
+        _element.appendChild(this._loadingElement);
         this.smoothProgressLoop();
         this.setMessage(message ?? "");
     }
@@ -141,7 +142,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if (typeof debugRendering === "number") dt *= debugRendering;
         }
         this._progressLoop = setInterval(() => {
-            // increate loading speed when almost done
+            // increase loading speed when almost done
             if (this.loadingProgress >= .95 && !debugRendering) dt = .9;
             this._progress = Mathf.lerp(this._progress, this.loadingProgress, dt * this.loadingProgress);
             this.updateDisplay();
@@ -229,15 +230,12 @@ export class EngineLoadingView implements ILoadingViewHandler {
         else
             loadingBarContainer.style.backgroundColor = "rgba(255,255,255,.2)"
         // loadingBarContainer.style.alignItems = "center";
-        this._loadingElement.appendChild(loadingBarContainer);
 
         const logo = document.createElement("img");
         const logoSize = 64;
         logo.style.width = `${logoSize}px`;
         logo.style.height = `${logoSize}px`;
-        logo.style.position = "absolute";
-        logo.style.left = "50%";
-        logo.style.transform = `translate(-${logoSize * .5}px, -${logoSize + 32}px)`;
+        logo.style.marginBottom = "20px";
         logo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
         logo.style.cursor = "pointer";
         logo.style.userSelect = "none";
@@ -250,7 +248,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
                 logo.src = customLogo;
             }
         }
-        loadingBarContainer.appendChild(logo);
+        this._loadingElement.appendChild(logo); 
+        this._loadingElement.appendChild(loadingBarContainer);
 
 
         this._loadingBar = document.createElement("div");

package/src/engine/engine_license.ts

@@ -64,9 +64,10 @@ function insertNonCommercialUseHint(ctx: IContext) {
 
     const interval = setInterval(() => {
         if (!licenseElement) return;
-        if (licenseElement.parentElement !== ctx.domElement) {
-            ctx.domElement.appendChild(licenseElement);
-            if (style) ctx.domElement.appendChild(style);
+        const parent = ctx.domElement.shadowRoot || ctx.domElement;
+        if (licenseElement.parentNode !== parent) {
+            parent.appendChild(licenseElement);
+            if (style) parent.appendChild(style);
         }
     }, 100);
 
@@ -121,7 +122,7 @@ async function logNonCommercialUse(_logo?: string) {
 function createLicenseElement() {
     const licenseElement = document.createElement("div");
     licenseElement.setAttribute(licenseElementIdentifier, "");
-    licenseElement.style.position = "fixed";
+    licenseElement.style.position = "absolute";
     licenseElement.style.bottom = "12px";
     licenseElement.style.right = "15px";
 

package/src/engine/engine_physics_rapier.ts

@@ -21,6 +21,7 @@ import { Gizmos } from './engine_gizmos';
 import { Mathf } from './engine_math';
 import { SphereOverlapResult } from './engine_types';
 import { ContextEvent, ContextRegistry } from './engine_context_registry';
+import { isDevEnvironment } from './debug/debug';
 
 const debugPhysics = getParam("debugphysics");
 const debugColliderPlacement = getParam("debugphysicscolliders");
@@ -61,48 +62,49 @@ declare type PhysicsBody = {
 export class RapierPhysics implements IPhysicsEngine {
 
     removeBody(obj: IComponent) {
+        if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
         obj[$bodyKey] = null;
         if (body && this.world) {
             const index = this.objects.findIndex(o => o === obj);
             if (index >= 0) {
-                const body = this.bodies[index];
+                const rapierBody = this.bodies[index];
+                // Remove references
                 this.bodies.splice(index, 1);
                 this.objects.splice(index, 1);
 
-                if (body instanceof Collider) {
-                    const collider = body as Collider;
-                    this.world?.removeCollider(collider, true);
+                // Remove the collider from the physics world
+                if (rapierBody instanceof Collider) {
+                    const rapierCollider = rapierBody as Collider;
+                    this.world?.removeCollider(rapierCollider, true);
 
-                    // remove the rigidbody if it doesnt have colliders anymore
-                    const rb = collider.parent();
-                    if (rb && rb.numColliders() <= 0) {
-                        this.world?.removeRigidBody(rb);
+                    // also remove the rigidbody if it doesnt have colliders anymore
+                    const rapierRigidbody: RigidBody | null = rapierCollider.parent();
+                    if (rapierRigidbody && rapierRigidbody.numColliders() <= 0) {
+                        const rigidbody = rapierRigidbody[$componentKey] as IRigidbody;
+                        this.removeBody(rigidbody);
                     }
                 }
-                else if (body instanceof RigidBody) {
-                    // TODO: running this code below causes a crash in rapier
-                    // const rb = body as RigidBody;
-                    // console.log("colliders", rb.numColliders())
-                    // for (let i = 0; i < rb.numColliders(); i++) {
-                    //     const col = rb.collider(i);
-                    //     this.world?.removeCollider(col, true);
-                    // }
-                    // console.log("colliders", rb.numColliders(), rb)
-                    // console.log(rb.handle, rb.userData);
-                    // if (rb.userData === undefined)
-                    //     this.world?.removeRigidBody(rb);
-                }
+                // Remove the rigidbody from the physics world
+                else if (rapierBody instanceof RigidBody) {
+                    if (rapierBody.numColliders() <= 0) {
+                        this.world?.removeRigidBody(rapierBody);
+                    }
+                    else {
+                        if (isDevEnvironment()) {
+                            if (!rapierBody["did_log_removing"]) {
+                                setTimeout(() => {
+                                    if (rapierBody.numColliders() > 0) {
+                                        rapierBody["did_log_removing"] = true;
+                                        console.warn("RapierPhysics: removing rigidbody with colliders from the physics world is not possible right now, please remove the colliders first");
+                                    }
+                                }, 1);
 
-                // check if we need to remove the rigidbody too
-                // const col = obj as ICollider;
-                // if (col.isCollider && col.attachedRigidbody) {
-                //     const rb = col.attachedRigidbody[$bodyKey] as RigidBody;
-                //     if (rb && rb.numColliders() <= 0) {
-                //         // this.world?.removeRigidBody(rb);
-                //     }
-                // }
+                            }
+                        }
+                    }
+                }
             }
         }
     }
@@ -128,7 +130,7 @@ export class RapierPhysics implements IPhysicsEngine {
 
     updateProperties(rigidbody: IRigidbody) {
         this.validate();
-        const physicsBody = rigidbody[$bodyKey];
+        const physicsBody = this.internal_getRigidbody(rigidbody);
         if (physicsBody) {
             this.internalUpdateProperties(rigidbody, physicsBody);
         }
@@ -206,7 +208,7 @@ export class RapierPhysics implements IPhysicsEngine {
 
     private async internalInitialization() {
         // NEEDLE_PHYSICS_INIT_START
-        // use .env file with VITE_NEEDLE_USE_RAPIER=false to treeshape rapier
+        // use .env file with VITE_NEEDLE_USE_RAPIER=false to treeshake rapier
         // @ts-ignore
         if ("env" in import.meta && import.meta.env.VITE_NEEDLE_USE_RAPIER === "false") {
             return false;

package/src/engine-components/CameraUtils.ts

@@ -16,14 +16,15 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     scene.add(cameraObject);
 
     const camInstance = new Camera();
-    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera
+    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera;
     cam.sourceId = srcId;
     cam.clearFlags = 2;
     cam.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
 
-    cameraObject.position.x = -2;
-    cameraObject.position.y = 2;
+    cameraObject.position.x = 0;
+    cameraObject.position.y = 1;
     cameraObject.position.z = 2;
+
     return cam;
 });
 
@@ -46,6 +47,9 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreated, (evt) => {
         if (cameraObject) {
             const orbit = addNewComponent(cameraObject, new OrbitControls(), false) as OrbitControls;
             orbit.sourceId = "unknown";
+            setTimeout(() => {
+                orbit.fitCameraToObjects(evt.context.scene.children, 1);
+            }, 100);
         }
         else {
             console.warn("Missing camera object, can not add orbit controls")

package/src/engine-components/Component.ts

@@ -185,7 +185,7 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
      * @param go component to move the component to
      * @param instance component to move to the GO
      */
-    public static addComponent(go: IGameObject, instance: Component): void {
+    public static addComponent(go: IGameObject | Object3D, instance: Component): void {
         return this.moveComponent(go, instance);
     }
 
@@ -194,7 +194,7 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
      * @param go component to move the component to
      * @param instance component to move to the GO
      */
-    public static moveComponent(go: IGameObject, instance: Component): void {
+    public static moveComponent(go: IGameObject | Object3D, instance: Component): void {
         moveComponentInstance(go, instance as any);
     }
 

package/src/engine-components/OrbitControls.ts

@@ -87,7 +87,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
             if (camGo && !this.setFromTargetPosition()) {
                 if (this.debugLog)
                     console.log("NO TARGET");
-                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                const forward = new Vector3(0, 0, -10).applyMatrix4(camGo.cam.matrixWorld);
                 this.setTarget(forward, true);
             }
         }

package/src/engine-components/SpriteRenderer.ts

@@ -161,6 +161,14 @@ export class SpriteRenderer extends Behaviour {
     private _spriteSheet?: SpriteData;
     private _currentSprite?: THREE.Mesh;
 
+    // additional data
+    @serializable()
+    transparent: boolean = true;
+    @serializable()
+    cutoutThreshold: number = 0;
+    @serializable()
+    castShadows: boolean = false;
+
     awake(): void {
         this._currentSprite = undefined;
         if(debug) {
@@ -221,6 +229,11 @@ export class SpriteRenderer extends Behaviour {
             this._currentSprite.layers.set(this.layer)
         }
 
+        if (this.sharedMaterial) {
+            this.sharedMaterial.alphaTest = this.cutoutThreshold;
+            this.sharedMaterial.transparent = this.transparent;
+        }
+        this._currentSprite.castShadow = this.castShadows;
         this._spriteSheet?.update();
     }
 }