@needle-tools/engine 4.10.4-next.f6dc9f2 → 4.10.5-beta

package/src/engine-components/RendererLightmap.ts

@@ -3,6 +3,7 @@ import { Material, Mesh, MeshPhysicalMaterial, ShaderMaterial, Texture, Vector4,
 
 import type { Context } from "../engine/engine_setup.js";
 import { getParam } from "../engine/engine_utils.js";
+import { type Renderer } from "./Renderer.js";
 
 const debug = getParam("debuglightmaps");
 
@@ -31,15 +32,15 @@ export class RendererLightmap {
     private lightmapIndex: number = -1;
     private lightmapScaleOffset: Vector4 = new Vector4(1, 1, 0, 0);
 
-    private context: Context;
-    private gameObject: Mesh;
+    private readonly renderer: Renderer;
+    private get context(): Context { return this.renderer.context; }
+    private get gameObject() { return this.renderer.gameObject; }
     private lightmapTexture: Texture | null = null;
     private lightmapScaleOffsetUniform = { value: new Vector4(1, 1, 0, 0) };
     private lightmapUniform: { value: Texture | null } = { value: null };
 
-    constructor(gameObject: Mesh, context: Context) {
-        this.gameObject = gameObject;
-        this.context = context;
+    constructor(renderer: Renderer) {
+        this.renderer = renderer;
     }
 
     init(lightmapIndex: number, lightmapScaleOffset: Vector4, lightmapTexture: Texture) {
@@ -55,7 +56,7 @@ export class RendererLightmap {
             console.log("Lightmap:", this.gameObject.name, lightmapIndex, "\nScaleOffset:", lightmapScaleOffset, "\nTexture:", lightmapTexture)
             this.setLightmapDebugMaterial();
         }
-        else if(debug) console.log("Use debuglightmaps=show to render lightmaps only in the scene.")
+        else if (debug) console.log("Use debuglightmaps=show to render lightmaps only in the scene.")
         this.applyLightmap();
     }
 
@@ -88,32 +89,49 @@ export class RendererLightmap {
         console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
 
         const mesh = this.gameObject as unknown as Mesh;
-        if (!mesh.geometry.getAttribute("uv1"))
+        if (!mesh.geometry.getAttribute("uv1")) {
             mesh.geometry.setAttribute("uv1", mesh.geometry.getAttribute("uv"));
+        }
+
+        for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
 
-        if (Array.isArray(this.gameObject.material)) {
-            const mats: Material[] = this.gameObject.material;
-            for (let i = 0; i < mats.length; i++) {
-                mats[i] = this.ensureLightmapMaterial(mats[i]);
+            const mat = this.renderer.sharedMaterials[i];
+            if (!mat) continue;
+
+            const newMat = this.ensureLightmapMaterial(mat);
+            if (mat !== newMat) {
+                this.renderer.sharedMaterials[i] = newMat;
             }
-        }
-        else {
-            this.gameObject.material = this.ensureLightmapMaterial(this.gameObject.material);
+
         }
 
+        // if (Array.isArray(this.gameObject.material)) {
+        //     const mats: Material[] = this.gameObject.material;
+        //     for (let i = 0; i < mats.length; i++) {
+        //         mats[i] = this.ensureLightmapMaterial(mats[i]);
+        //     }
+        // }
+        // else {
+        //     this.gameObject.material = this.ensureLightmapMaterial(this.gameObject.material);
+        // }
+
         if (this.lightmapIndex >= 0 && this.lightmapTexture) {
             // always on channel 1 for now. We could optimize this by passing the correct lightmap index along
             this.lightmapTexture.channel = 1;
-            const mat = this.gameObject.material;
-            if (Array.isArray(mat)) {
-                for (const entry of mat) {
-                    this.assignLightmapTexture(entry as any);
-
-                }
-            }
-            else if (mat) {
-                this.assignLightmapTexture(mat);
+            for (const mat of this.renderer.sharedMaterials) {
+                if (mat) this.assignLightmapTexture(mat);
             }
+
+            // const mat = this.gameObject.material;
+            // if (Array.isArray(mat)) {
+            //     for (const entry of mat) {
+            //         this.assignLightmapTexture(entry as any);
+
+            //     }
+            // }
+            // else if (mat) {
+            //     this.assignLightmapTexture(mat);
+            // }
         }
     }
 
@@ -127,7 +145,7 @@ export class RendererLightmap {
             if (material["NEEDLE:lightmap-material-version"] == undefined) {
                 if (debug) console.warn("Cloning material for lightmap " + material.name);
                 const mat: Material = material.clone();
-                if(!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
+                if (!mat.name?.includes("(lightmap)")) mat.name = material.name + " (lightmap)";
                 material = mat;
                 material.onBeforeCompile = this.onBeforeCompile;
             }

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

@@ -3,7 +3,10 @@ import { getTempVector } from "../../engine/engine_three_utils.js";
 import { Behaviour } from "../Component.js";
 
 /**
- * The CursorFollow component makes the object follow the cursor (or touch) position on screen.
+ * The CursorFollow component makes the object follow the cursor (or touch) position on screen.  
+ * 
+ * - Example: [Look At Cursor sample](https://engine.needle.tools/samples/look-at-cursor-interactive-3d-header/). This sample combines the CursorFollow component with a LookAt component to create an interactive 3D header that looks at the cursor.
+ * 
  * @category Web
  * @group Components
  * @component
@@ -17,6 +20,13 @@ export class CursorFollow extends Behaviour {
     @serializable()
     damping: number = 0;
 
+    /**
+     * When enabled the object will follow the cursor even outside of the needle-engine canvas. This is useful for example for look at effects where you have a small needle-engine element on your page and you want the 3D object to keep looking at the cursor even when it's outside of the canvas.
+     * @default true
+     */
+    @serializable()
+    useFullPage: boolean = true;
+
     /**
      * If true, the initial distance to the camera is maintained when following the cursor.
      * @default true
@@ -24,31 +34,58 @@ export class CursorFollow extends Behaviour {
     @serializable()
     keepDistance: boolean = true;
 
+    
+    private _distance: number = -1;
+    updateDistance(force:boolean = false) {
+        if (!force && (this.keepDistance && this._distance !== -1)) {
+            return;
+        }
+        this._distance = this.gameObject.worldPosition.distanceTo(this.context.mainCamera.worldPosition);
+    }
+
+    /** @internal */
     awake() {
         this._distance = -1;
     }
 
-    private _distance: number = -1;
+    onEnable(): void {
+        this._distance = -1;
+        window.addEventListener('pointermove', this._onPointerMove);
+    }
+    onDisable(): void {
+        window.removeEventListener('pointermove', this._onPointerMove);
+    }
 
-    updateDistance() {
-        if (this.keepDistance && this._distance !== -1) {
-            return;
-        }
-        this._distance = this.gameObject.worldPosition.distanceTo(this.context.mainCamera.worldPosition);
+    private _ndc_x = 0;
+    private _ndc_y = 0;
+
+    private _onPointerMove = (e:PointerEvent) => {
+        if(!this.useFullPage) return;
+        const x = e.clientX;
+        const y = e.clientY;
+        const domx = this.context.domX;
+        const domy = this.context.domY;
+        const domw = this.context.domWidth;
+        const domh = this.context.domHeight;
+        this._ndc_x = (x - domx) / domw * 2 - 1;
+        this._ndc_y = - (y - domy) / domh * 2 + 1;
     }
 
+
     /** @internal */
     update() {
         // continuously update distance in case camera or object moves
         this.updateDistance();
 
+        const x = this.useFullPage ? this._ndc_x : this.context.input.mousePositionRC.x;
+        const y = this.useFullPage ? this._ndc_y : this.context.input.mousePositionRC.y;
+
         // follow cursor in screenspace but maintain initial distance from camera
-        const cursor = this.context.input.mousePositionRC;
         const camera = this.context.mainCamera;
         const cameraPosition = camera.worldPosition;
 
         // create ray from camera through cursor position
-        const rayDirection = getTempVector(cursor.x, cursor.y, 1).unproject(camera);
+        const rayDirection = getTempVector(x, y, 1).unproject(camera);
         rayDirection.sub(cameraPosition).normalize();
 
         // position object at initial distance along the ray