@needle-tools/engine 4.10.5-next.a5d5bf4 → 4.11.0-beta

package/src/engine-components/ui/RaycastUtils.ts

@@ -11,9 +11,8 @@ export class UIRaycastUtils {
     /** returns the real object when dealing with shadow UI */
     static getObject(obj: Object3D): Object3D {
         const shadowOwner = obj[$shadowDomOwner];
-        if(shadowOwner) 
-        {
-            if((shadowOwner as IComponent).isComponent === true) obj = (shadowOwner as IComponent).gameObject;
+        if (shadowOwner) {
+            if ((shadowOwner as IComponent).isComponent === true) obj = (shadowOwner as IComponent).gameObject;
             else obj = shadowOwner;
         }
         return obj;
@@ -29,8 +28,8 @@ export class UIRaycastUtils {
 
         obj = this.getObject(obj);
 
-        if(!obj.visible) return false;
-        
+        if (!obj.visible) return false;
+
         const canvasGroup = this.tryFindCanvasGroup(obj);
         if (canvasGroup?.isCanvasGroup === true) {
             if (out) out.canvasGroup = canvasGroup as ICanvasGroup;
@@ -38,7 +37,7 @@ export class UIRaycastUtils {
             if (canvasGroup.interactable === false) return false;
         }
         // handle Graphic Raycast target
-        const graphic : IGraphic | undefined = foreachComponent(obj, c => {
+        const graphic: IGraphic | undefined = foreachComponent(obj, c => {
             if ((c as unknown as IGraphic).isGraphic === true) return c;
             return undefined;
         }, false);
@@ -58,8 +57,10 @@ export class UIRaycastUtils {
         if (!obj) return null;
         // test for canvas groups
         const res = foreachComponent(obj, c => {
-            const gr = c as unknown as ICanvasGroup;
-            if (gr.blocksRaycasts !== undefined && gr.interactable !== undefined) return gr;
+            if (c.activeAndEnabled) {
+                const gr = c as unknown as ICanvasGroup;
+                if (gr.blocksRaycasts !== undefined && gr.interactable !== undefined) return gr;
+            }
             return undefined;
         }, false);
         if (res !== undefined) return res;

package/src/engine-components/utils/LookAt.ts

@@ -45,7 +45,10 @@ export class LookAt extends Behaviour implements UsdzBehaviour {
         let target: Object3D | null | undefined = this.target;
         if (!target) {
             target = this.context.mainCamera;
-            if (isDevEnvironment()) console.warn(`[LookAt] No target set on ${this.name}, using main camera as target.`);
+            if (isDevEnvironment() && !this["__did_warn"]) {
+                this["__did_warn"] = true;
+                console.debug(`[LookAt] No target set on ${this.name}, using main camera as target.`);
+            }
         }
         if (!target) return;
 

package/src/engine-components/web/Clickthrough.ts

@@ -29,7 +29,8 @@ onStart(ctx => {
  * - Add the ClickThrough component to any GameObject in your scene.
  * - Alternatively, add the `clickthrough` attribute to the `<needle-engine>` HTML element (e.g. `<needle-engine clickthrough></needle-engine>`).
  * 
- * @link Example https://stackblitz.com/~/github.com/needle-engine/sample-3d-over-html
+ * - Example https://stackblitz.com/~/github.com/needle-engine/sample-3d-over-html
+ * 
  * @category Web
  * @group Components
  * @component

package/src/engine-components/web/CursorFollow.ts

@@ -1,7 +1,14 @@
+import { Ray } from "three";
+
+import { Gizmos } from "../../engine/engine_gizmos.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../../engine/engine_three_utils.js";
+import { getParam } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
 
+
+const debug = getParam("debugcursor");
+
 /**
  * The CursorFollow component makes the object follow the cursor (or touch) position on screen.  
  * 
@@ -34,9 +41,15 @@ export class CursorFollow extends Behaviour {
     @serializable()
     keepDistance: boolean = true;
 
-    
+    /**
+     * If true, the object will attempt to snap to the surface of other objects in the scene using a raycast.
+     */
+    @serializable()
+    snapToSurface: boolean = false;
+
+
     private _distance: number = -1;
-    updateDistance(force:boolean = false) {
+    updateDistance(force: boolean = false) {
         if (!force && (this.keepDistance && this._distance !== -1)) {
             return;
         }
@@ -48,10 +61,12 @@ export class CursorFollow extends Behaviour {
         this._distance = -1;
     }
 
+    /** @internal */
     onEnable(): void {
         this._distance = -1;
         window.addEventListener('pointermove', this._onPointerMove);
     }
+    /** @internal */
     onDisable(): void {
         window.removeEventListener('pointermove', this._onPointerMove);
     }
@@ -59,8 +74,8 @@ export class CursorFollow extends Behaviour {
     private _ndc_x = 0;
     private _ndc_y = 0;
 
-    private _onPointerMove = (e:PointerEvent) => {
-        if(!this.useFullPage) return;
+    private _onPointerMove = (e: PointerEvent) => {
+        if (!this.useFullPage) return;
         const x = e.clientX;
         const y = e.clientY;
         const domx = this.context.domX;
@@ -73,7 +88,7 @@ export class CursorFollow extends Behaviour {
 
 
     /** @internal */
-    update() {
+    lateUpdate() {
         // continuously update distance in case camera or object moves
         this.updateDistance();
 
@@ -89,16 +104,42 @@ export class CursorFollow extends Behaviour {
         rayDirection.sub(cameraPosition).normalize();
 
         // position object at initial distance along the ray
-        const newPosition = rayDirection.multiplyScalar(this._distance).add(cameraPosition);
+        const newPosition = getTempVector(rayDirection).multiplyScalar(this._distance).add(cameraPosition);
+        let _position = newPosition;
+
+
         if (this.damping > 0) {
             const pos = this.gameObject.worldPosition;
             pos.lerp(newPosition, this.context.time.deltaTime / this.damping);
             this.gameObject.worldPosition = pos;
+            _position = pos;
         }
         else {
             this.gameObject.worldPosition = newPosition;
         }
 
+
+        if (this.snapToSurface) {
+            ray.origin = _position;
+            ray.direction = rayDirection.multiplyScalar(-1);
+            const hits = this.context.physics.raycastFromRay(ray);
+            if (hits?.length) {
+                const hit = hits[0];
+                if (this.damping > 0) {
+                    this.gameObject.worldPosition = _position.lerp(hit.point, this.context.time.deltaTime / this.damping);
+                }
+                else {
+                    this.gameObject.worldPosition = hit.point;
+                }
+
+                if(debug) {
+                    Gizmos.DrawLine(hit.point, hit.normal!.add(hit.point), 0x00FF00);
+                }
+            }
+        }
+
     }
 
-}
+}
+
+const ray = new Ray();