@needle-tools/engine 4.9.2 → 4.9.3-next.0facab6

package/src/engine-components/Renderer.ts

@@ -357,7 +357,7 @@ export class Renderer extends Behaviour implements IRenderer {
     get sharedMaterials(): SharedMaterialArray {
 
         // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
-        if(!this.__didAwake) return null;
+        if (!this.__didAwake) return null;
 
         if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
             if (!this._originalMaterials) this._originalMaterials = [];
@@ -674,7 +674,7 @@ export class Renderer extends Behaviour implements IRenderer {
             this.applySettings(this.gameObject);
         }
 
-        if (this.sharedMaterials.changed) {
+        if (this.sharedMaterials?.changed) {
             this.sharedMaterials.changed = false;
             this.applyLightmapping();
         }
@@ -718,12 +718,15 @@ export class Renderer extends Behaviour implements IRenderer {
         // since three 163 we need to set the envMap to the scene envMap if it is not set
         // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
         // internal issue: https://linear.app/needle/issue/NE-6363
-        for (const mat of this._sharedMaterials) {
-            // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
-            if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
-                mat.envMap = this.context.scene.environment;
+        if (this._sharedMaterials) {
+            for (const mat of this._sharedMaterials) {
+                // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
+                if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
+                    mat.envMap = this.context.scene.environment;
+                }
             }
         }
+        else if (debugRenderer) console.warn("[Renderer] sharedMaterials not initialized yet: " + this.name);
     }
 
     private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {

package/src/engine-components/SpriteRenderer.ts

@@ -329,7 +329,9 @@ export class SpriteRenderer extends Behaviour {
     set sprite(value: Sprite | SpriteData | undefined | number) {
         if (value === this._spriteSheet) return;
         if (typeof value === "number") {
-            const index = Math.floor(value);
+            // the value if interpolated is sometimes *slightly* off (e.g. 0.999999 or 1.000001) so we round it
+            const index = Math.round(value);
+            if (debug) console.log("[SpriteSheet] Set index to " + index + " (was " + this.spriteIndex + ")", value);
             this.spriteIndex = index;
         }
         else if (value instanceof Sprite) {

package/src/engine-components/api.ts

@@ -53,7 +53,6 @@ import "./AnimationUtilsAutoplay.js"
 
 export { DragMode } from "./DragControls.js";
 export type { DropListenerNetworkEventArguments, DropListenerOnDropArguments } from "./DropListener.js";
-export { type FitCameraOptions } from "./OrbitControls.js";
 export * from "./particlesystem/api.js"
 export * from "./splines/index.js";
 export * from "./web/index.js";

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

@@ -205,6 +205,7 @@ export { VideoPlayer } from "../VideoPlayer.js";
 export { Voip } from "../Voip.js";
 export { ClickThrough } from "../web/Clickthrough.js";
 export { CursorFollow } from "../web/CursorFollow.js";
+export { HoverAnimation } from "../web/HoverAnimation.js";
 export { ScrollFollow } from "../web/ScrollFollow.js";
 export { Avatar } from "../webxr/Avatar.js";
 export { XRControllerFollow } from "../webxr/controllers/XRControllerFollow.js";

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

@@ -21,6 +21,9 @@ onStart(ctx => {
  * - 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
+ * @category Web
+ * @group Components
+ * @component
  */
 export class ClickThrough extends Behaviour {
 

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

@@ -4,6 +4,9 @@ import { Behaviour } from "../Component.js";
 
 /**
  * The CursorFollow component makes the object follow the cursor (or touch) position on screen.
+ * @category Web
+ * @group Components
+ * @component
  */
 export class CursorFollow extends Behaviour {
 

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

@@ -0,0 +1,99 @@
+import { AnimationClip } from "three";
+
+import { ScaleClipType } from "../../engine/engine_animation.js";
+import { AnimationUtils } from "../../engine/engine_animation.js";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { registerType } from "../../engine/engine_typestore.js";
+import { Animation } from "../Animation.js";
+import { Behaviour } from "../Component.js";
+
+
+/**
+ * @category Web
+ * @group Components
+ * @component
+ */
+@registerType
+export class HoverAnimation extends Behaviour {
+
+    /**
+     * Default hover animation type if no custom clip is provided.  
+     * **Node**: This is only used if no custom hover animation clip is provided.  
+     * @default "linear"
+     */
+    @serializable()
+    type: ScaleClipType = "linear";
+
+    /**
+     * Duration of the hover animation in seconds.  
+     * **Node**: This is only used if no custom hover animation clip is provided.
+     * @default 0.1
+     */
+    @serializable()
+    duration: number = 0.1;
+
+    /**
+     * Scale factor to apply when hovering.  
+     * **Node**: This is only used if no custom hover animation clip is provided.
+     * @default 1.1
+     */
+    @serializable()
+    scaleFactor: number = 1.1;
+
+
+    /**
+     * Animation clip to play when hovering. If null, a default scale-up animation is used.
+     */
+    @serializable(AnimationClip)
+    hovered: AnimationClip | null = null;
+
+    /**
+     * Animation clip to play when not hovering. If null, an empty clip is used.
+     */
+    @serializable(AnimationClip)
+    idle: AnimationClip | null = null;
+
+    private animation: Animation | null = null;
+
+    start() {
+        if (!this.idle) this.idle = AnimationUtils.emptyClip();
+
+        if (!this.hovered) {
+            this.hovered = AnimationUtils.createScaleClip({
+                type: "linear",
+                duration: this.duration || 0.1,
+                scale: this.gameObject.scale,
+                scaleFactor: this.scaleFactor || 1.1,
+            });
+        }
+
+        this.animation ??= this.gameObject.addComponent(Animation);
+        this.animation.playAutomatically = false;
+        this.playIdle();
+    }
+
+    onEnable() {
+        if (this.animation) this.animation.enabled = true;
+        this.playIdle();
+    }
+    onDisable() {
+        if (this.animation) this.animation.enabled = false;
+        this.playIdle();
+    }
+
+    onPointerEnter() {
+        this.playHover();
+    }
+
+    onPointerExit() {
+        this.playIdle();
+    }
+
+    private playIdle() {
+        if (this.idle) this.animation?.play(this.idle, { exclusive: true, fadeDuration: .1, loop: true });
+    }
+    private playHover() {
+        if (this.hovered) this.animation?.play(this.hovered, { exclusive: true, fadeDuration: .1, loop: false, clampWhenFinished: true });
+    }
+
+}

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

@@ -44,6 +44,10 @@ type ScrollFollowEvent = {
  * 2. Add a ScrollFollow component to the same GameObject or another GameObject in the scene.
  * 3. Assign the PlayableDirector component to the ScrollFollow's target property.
  * 4. The timeline will now scrub based on the scroll position of the page.
+ * 
+ * @category Web
+ * @group Components
+ * @component
  */
 export class ScrollFollow extends Behaviour {
 

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

@@ -1,3 +1,4 @@
 export * from "./Clickthrough.js";
 export * from "./CursorFollow.js";
+export * from "./HoverAnimation.js";
 export * from "./ScrollFollow.js";