@needle-tools/engine 4.10.0-beta.5 → 4.10.0-beta.9

package/CHANGELOG.md

@@ -4,15 +4,20 @@ All notable changes to this package will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [4.10.0-beta] - 2025-09-18
+## [4.10.0] - 2025-09-29
+- **NEW**: [**Scrollytelling Bike Example**](<https://scrollytelling-bike-z23hmxb2gnu5a.needle.run/>) - [Github Project](https://github.com/needle-engine/needle-engine-bike-scrollytelling)
 - **NEW**: HoverAnimation component. Use this component to get a scale hover animation of an object when the cursor is hovering over the object or one of it's children.
+- **NEW**: ViewBox component. Use this component to automatically perfectly fit your 3D scene into the camera view.
 - Add: `fitCamera` function
 - Add: `<needle-engine poster>` attribute. It works with an URL to an image that should be shown as a poster image. If no URL is assigned then the poster that is automatically generated during the first frame will be used
+- Add: `<needle-engine focus-rect="<html_selector">` attribute. Assign a HTML selector to the attribute to use a specific HTML element on screen offset the 3D camera center to the center of the HTML element. (The same can be done programmatically using `ctx.setCameraFocusRect(<html_element|DOMRect>)`)
+- Add: Timeline ScrollMarker for Unity and Blender timeline animations to control timing based on HTML visibility.  
 - Fix: Renderer `material` accessing error when component was not yet initialized 
 - Fix: Poster screenshot glitch during the first frame (development only)
 - Change: Loading display does not show Needle logo anymore by default
 - Change: Use fallback raycast method for lowpoly meshes while BVH is being generated
 
+
 ## [4.9.3] - 2025-09-15
 - Fix: SpriteRenderer index issue when animated where animation precision issue was causing the wrong sprite to be selected ([issue](<https://forum.needle.tools/t/switching-sprite-images-via-timeline-causes-ghosting-glitches-when-exported/2709>))
 - Fix: Scaling scene in AR with multitouch causing camera projection issue for a frame ([issue](<https://forum.needle.tools/t/3d-assets-warping-on-rotation-in-ar>))

package/README.md

@@ -63,7 +63,8 @@ npm install @needle-tools/engine
 | [![](https://cdn.needle.tools/static/images/changelog/4.8.8-focus-thumbnail.jpg)](https://responsive-layout-z23hmxb22no6t.needle.run/) | [Camera Focus DIV 1](https://responsive-layout-z23hmxb22no6t.needle.run/) | Responsive layout with camera focus | [Code on Stackblitz](https://stackblitz.com/edit/needle-engine-camera-focus-rect?file=src%2Fsidebar.ts,index.html,src%2Fmain.ts) |
 | [![](https://cdn.needle.tools/static/images/changelog/4.8.8-focus-2-thumbnail.jpg)](https://responsive-layout-click-example-z23hmxbzuyk6y.needle.run/) | [Camera Focus DIV 2](https://responsive-layout-click-example-z23hmxbzuyk6y.needle.run/) | Click-to-move camera focus example | [Code on Stackblitz](https://stackblitz.com/edit/needle-engine-camera-focus-rect-click-to-move?file=index.html,src%2Fmain.ts) |
 | [![](https://cdn.needle.tools/static/images/changelog/fasthdr-thumbnail.jpg?1)](https://fasthdr-needle-engine-zubcks1li2iy.needle.run/) | [FastHDR Loading](https://fasthdr-needle-engine-zubcks1li2iy.needle.run/) | 10x faster than EXR, non-blocking, 95% less GPU memory | [Code on Stackblitz](https://stackblitz.com/edit/needle-fast-hdri-needle-engine) • [Learn more](https://cloud.needle.tools/hdris) |
-| [![](https://cdn.needle.tools/static/images/changelog/scrollytelling-2-thumbnail.jpg)](https://scrollytelling-2-z23hmxby7c6x.needle.run/) | [Scrollytelling Example](https://scrollytelling-2-z23hmxby7c6x.needle.run/) | No-Code example for using browser scroll and cursor to create playful and stunning 3D backgrounds | [Included in Samples Package](https://samples.needle.tools) |
+| [![](https://cdn.needle.tools/static/images/changelog/scrollytelling-2-thumbnail.jpg)](https://scrollytelling-2-z23hmxby7c6x.needle.run/) | [Scrollytelling Example](https://scrollytelling-2-z23hmxby7c6x.needle.run/) | Scroll, physics and cursor interaction: a playful 3D interactive scrollytelling website | [Included in Samples Package](https://samples.needle.tools) |
+| [![](https://cdn.needle.tools/static/images/changelog/scrollytelling-bike-thumbnail.jpg)](https://scrollytelling-bike-z23hmxb2gnu5a.needle.run/) | [Scrollytelling Bike Example](https://scrollytelling-bike-z23hmxb2gnu5a.needle.run/) | Timeline Animation using ScrollFollow, ViewBox and FocusRect | [Project on Github](https://github.com/needle-engine/needle-engine-bike-scrollytelling) |
 | | [AR Restaurant](https://ar-restaurant-example-zubcks1t14le.needle.run/) | Interactive AR restaurant experience | [Code on Github](https://github.com/needle-engine/ar-restaurant-example) |
 | | [Custom Loading Overlay](https://lods-loading-overlay-z23hmxbz29h8vr.needle.run/) | Wait for LODs with custom loading states | [Code on Stackblitz](https://stackblitz.com/edit/needle-engine-wait-for-lods) |
 | | [React Shopping Cart](https://reactshoppingcart-z23hmxbzcfkmf.needle.run/) | E-commerce integration with React | [Code on Stackblitz](https://stackblitz.com/edit/needle-react-shopping-cart-2) |

package/dist/{needle-engine.bundle-DcvMQ1Nq.js → needle-engine.bundle-B_wUQWD9.js}

@@ -1,7 +1,7 @@
 import { Vector2 as J, Vector3 as _, Vector4 as fe, Quaternion as U, PlaneGeometry as Gn, WebGLRenderer as xr, PerspectiveCamera as le, OrthographicCamera as Qd, Scene as wi, Mesh as G, Texture as Te, Uniform$1 as Wi, Color as se, ShaderMaterial as zn, Box3 as bi, ShadowMaterial as Db, Euler as ot, MeshStandardMaterial as ut, Box3Helper as Sx, GridHelper as Mm, Object3D as M, Material as _e, Matrix3 as jb, Matrix4 as ee, Layers as po, Ray as mo, MathUtils as ws, AxesHelper as vi, MeshBasicMaterial as we, DoubleSide as xi, BufferGeometry as dn, Group as lo, CylinderGeometry as Bb, SphereGeometry as Yd, BoxGeometry as wa, SpriteMaterial as Cx, Sprite as Px, Shape as Ox, ExtrudeGeometry as kx, Fog as Fb, DirectionalLight as Sp, PointLight as Rm, EdgesGeometry as Mx, LineSegments as zb, LineBasicMaterial as Tm, Line as xa, BufferAttribute as ft, Raycaster as Kd, Sphere as Zd, ArrayCamera as Rx, Plane as ur, SkinnedMesh as co, InterleavedBufferAttribute as Ub, Skeleton as Tx, Bone as Ex, WebGLCubeRenderTarget as Ax, CubeCamera as Ix, AnimationClip as Gi, FileLoader as Em, TextureLoader as pc, PropertyBinding as Sa, KeyframeTrack as Lx, LinearSRGBColorSpace as Os, ShaderChunk as Ht, UniformsLib as Dx, DataTexture as Am, RGBAFormat as Jd, EquirectangularReflectionMapping as xs, SRGBColorSpace as ks, Clock as jx, NeutralToneMapping as Ca, AgXToneMapping as eu, ACESFilmicToneMapping as tu, NoToneMapping as dd, PCFSoftShadowMap$1 as Bx, BasicNodeLibrary as Fx, WebGLRenderTarget as Un, DepthTexture as Nb, NearestFilter as ud, LoopRepeat as zx, LoopOnce as Cp, AnimationMixer as Im, CompressedTexture as Ux, FrontSide as go, Camera as Nx, Frustum as _y, AudioListener as $x, PositionalAudio as Wx, AudioLoader as Pp, EventDispatcher as Lm, BackSide as iu, MeshDepthMaterial as Vx, CustomBlending as Hx, MaxEquation as Gx, AmbientLight as qx, HemisphereLight as Xx, AlwaysStencilFunc as Qx, GreaterEqualStencilFunc as Yx, NotEqualStencilFunc as Kx, GreaterStencilFunc as Zx, LessEqualStencilFunc as Jx, EqualStencilFunc as eS, LessStencilFunc as tS, NeverStencilFunc as by, InvertStencilOp as iS, DecrementWrapStencilOp as nS, IncrementWrapStencilOp as sS, DecrementStencilOp as oS, IncrementStencilOp as rS, ReplaceStencilOp as aS, ZeroStencilOp as lS, KeepStencilOp as cS, RawShaderMaterial as $b, GLSL3 as hS, AlwaysDepth as dS, GreaterEqualDepth as uS, GreaterDepth as fS, LessEqualDepth as pS, LessDepth as mS, NotEqualDepth as gS, EqualDepth as yS, BatchedMesh as vy, MeshPhysicalMaterial as Op, LinearFilter as fd, UnsignedByteType as _S, RingGeometry as bS, Line3 as vS, AdditiveBlending as Wb, BoxHelper as wS, SpotLight as xS, DirectionalLightHelper as SS, CameraHelper as CS, LOD as PS, Triangle as OS, NormalBlending as kS, ReinhardToneMapping as Dm, LinearToneMapping as jm, HalfFloatType as hf, VideoTexture as MS, CubeUVReflectionMapping as Vb, CubeTexture as RS, CompressedCubeTexture as TS, EquirectangularRefractionMapping as ES, CatmullRomCurve3 as AS, VectorKeyframeTrack as IS, QuaternionKeyframeTrack as LS, Audio as DS, ShaderLib as pd, UniformsUtils as Hb, MirroredRepeatWrapping as wy, MeshNormalMaterial as jS, AudioContext as BS, PMREMGenerator$1 as FS } from "./three-CJSAehtG.js";
 import { createLoaders as Bm, getRaycastMesh as Gb, LODsManager as zo, NEEDLE_progressive as Ve, addDracoAndKTX2Loaders as zS, configureLoader as US, setKTX2TranscoderLocation as NS, setDracoDecoderLocation as $S } from "./gltf-progressive-DUR9TuAH.js";
 import { GroundedSkybox as Pa, Font as WS, TextGeometry as VS, FontLoader as HS, GLTFLoader as Ms, TransformControlsGizmo as qb, EXRLoader as Fm, RGBELoader as Xb, Stats as GS, nodeFrame as qS, OrbitControls as Qb, PositionalAudioHelper as XS, HorizontalBlurShader as QS, VerticalBlurShader as YS, GLTFExporter as Yb, strToU8 as Kb, zipSync as KS, XRControllerModelFactory as ZS, XRHandMeshModel as JS, Line2 as e1, LineGeometry as t1, LineMaterial as i1, TransformControls as n1, InteractiveGroup as s1, HTMLMesh as o1, VertexNormalsHelper as r1, OBJLoader as zm, FBXLoader as Zb, mergeVertices as a1 } from "./three-examples-Doq0rvFU.js";
-import { fetchProfile as l1, MotionController as c1, $70d766613f57b014$export$2e2bcd8739ae039 as xy, ByteBuffer as h1, v5 as Sy, md5 as Cy, SIZE_PREFIX_LENGTH as Jb, Builder as Um, createNoise4D as d1, Matrix4 as df, BatchedParticleRenderer as u1, ParticleSystem as f1, RenderMode as us, ConstantColor as p1, Vector4 as m1, ConstantValue as g1, TrailParticle as Py, WorkerBase as y1, MeshBVH as _1 } from "./vendor-DU8tJyl_.js";
+import { fetchProfile as l1, MotionController as c1, $70d766613f57b014$export$2e2bcd8739ae039 as xy, ByteBuffer as h1, v5 as Sy, md5 as Cy, SIZE_PREFIX_LENGTH as Jb, Builder as Um, createNoise4D as d1, Matrix4 as df, BatchedParticleRenderer as u1, ParticleSystem as f1, RenderMode as us, ConstantColor as p1, Vector4 as m1, ConstantValue as g1, TrailParticle as Py, WorkerBase as y1, MeshBVH as _1 } from "./vendor-MBoqSyFm.js";
 import { __webpack_exports__default as Ce, __webpack_exports__Text as e0, __webpack_exports__Block as t0, __webpack_exports__update as b1, SimpleStateBehavior as v1, __webpack_exports__Inline as uf, __webpack_exports__FontLibrary as Oy, ThreeMeshUI as ky } from "./three-mesh-ui-CktOi6oI.js";
 import { EffectAttribute as w1 } from "./postprocessing-DQ2pynXW.js";
 const ff = /* @__PURE__ */ new Map();
@@ -1775,11 +1775,11 @@ bo('if(!globalThis["NEEDLE_ENGINE_VERSION"]) globalThis["NEEDLE_ENGINE_VERSION"]
 bo('if(!globalThis["NEEDLE_ENGINE_GENERATOR"]) globalThis["NEEDLE_ENGINE_GENERATOR"] = "unknown";');
 bo('if(!globalThis["NEEDLE_PROJECT_BUILD_TIME"]) globalThis["NEEDLE_PROJECT_BUILD_TIME"] = "unknown";');
 bo('if(!globalThis["NEEDLE_PUBLIC_KEY"]) globalThis["NEEDLE_PUBLIC_KEY"] = "unknown";');
-bo('globalThis["__NEEDLE_ENGINE_VERSION__"] = "4.10.0-beta.5";');
+bo('globalThis["__NEEDLE_ENGINE_VERSION__"] = "4.10.0-beta.9";');
 bo('globalThis["__NEEDLE_ENGINE_GENERATOR__"] = "undefined";');
-bo('globalThis["__NEEDLE_PROJECT_BUILD_TIME__"] = "Thu Sep 25 2025 09:17:47 GMT+0000 (Coordinated Universal Time)";');
+bo('globalThis["__NEEDLE_PROJECT_BUILD_TIME__"] = "Mon Sep 29 2025 12:36:40 GMT+0000 (Coordinated Universal Time)";');
 bo('globalThis["__NEEDLE_PUBLIC_KEY__"] = "' + NEEDLE_PUBLIC_KEY + '";');
-const jn = "4.10.0-beta.5", Gm = "undefined", x0 = "Thu Sep 25 2025 09:17:47 GMT+0000 (Coordinated Universal Time)";
+const jn = "4.10.0-beta.9", Gm = "undefined", x0 = "Mon Sep 29 2025 12:36:40 GMT+0000 (Coordinated Universal Time)";
 w0 && console.log(`Engine version: ${jn} (generator: ${Gm})
 Project built at ${x0}`);
 const Dl = NEEDLE_PUBLIC_KEY, uo = "needle_isActiveInHierarchy", Qr = "builtin_components", qh = "needle_editor_guid";
@@ -3494,7 +3494,7 @@ function YC(s, e) {
   }, s ? new xy(s, e) : new xy(e);
 }
 async function Zy() {
-  const s = await import("./vendor-DU8tJyl_.js").then((e) => e.bundler);
+  const s = await import("./vendor-MBoqSyFm.js").then((e) => e.bundler);
   return console.log(s), s.default === void 0 ? s : s.default;
 }
 class KC {
@@ -3907,7 +3907,7 @@ class iP {
       }
       console.debug(`⊡ Connecting to networking backend on
 ` + Ai);
-      const o = await import("./vendor-DU8tJyl_.js").then((c) => c.index), r = o.default?.WebsocketBuilder ?? o.WebsocketBuilder, a = o.default?.ExponentialBackoff ?? o.ExponentialBackoff, l = new r(Ai).withMaxRetries(10).withBackoff(new a(2e3, 4)).onOpen(() => {
+      const o = await import("./vendor-MBoqSyFm.js").then((c) => c.index), r = o.default?.WebsocketBuilder ?? o.WebsocketBuilder, a = o.default?.ExponentialBackoff ?? o.ExponentialBackoff, l = new r(Ai).withMaxRetries(10).withBackoff(new a(2e3, 4)).onOpen(() => {
         this._connectingToWebsocketPromise = null, this._ws = l, this.connected = !0, L() || ci ? console.log(`⊞ Connected to networking backend
 ` + Ai) : console.debug("⊞ Connected to networking backend", Ai), n(!0), this.onSendQueued(On.OnConnection);
       }).onClose((c) => {
@@ -6108,7 +6108,7 @@ var vd;
   s.runMeshBVHRaycast = e;
   let t = !1, i = null, n = null, o = null, r = null;
   function a() {
-    t || (t = !0, import("./vendor-DU8tJyl_.js").then((v) => v.index$1).then((v) => {
+    t || (t = !0, import("./vendor-MBoqSyFm.js").then((v) => v.index$1).then((v) => {
       i = v.acceleratedRaycast, n = v.MeshBVH, o = v.StaticGeometryGenerator, r = v.computeBoundsTree;
     }).catch((v) => {
       (Vt || L()) && console.error("Failed to load BVH library...", v.message);
@@ -11807,7 +11807,8 @@ async function ik(s) {
 }
 async function nk(s) {
   if (window.crossOriginIsolated) return;
-  if (Fn === "pro") {
+  const e = Fn;
+  if (e === "pro" || e === "enterprise") {
     const t = s?.domElement?.getAttribute("no-telemetry");
     if (t === "" || t === "true" || t === "1") {
       mi && console.debug("Telemetry is disabled");
@@ -21243,7 +21244,7 @@ function Nv(s) {
 }
 const JM = w("debugextensions");
 let jd;
-const eR = import("./vendor-DU8tJyl_.js").then((s) => s.index$2).then(async (s) => (jd = s.GLTFAnimationPointerExtension, jd)).catch((s) => {
+const eR = import("./vendor-MBoqSyFm.js").then((s) => s.index$2).then(async (s) => (jd = s.GLTFAnimationPointerExtension, jd)).catch((s) => {
   console.warn("Failed to import GLTFLoaderAnimationPointer. Please use @needle-tools/three-animationpointer for full KHR_animation support", s);
 }), mr = new Array();
 function i2(s) {
@@ -37285,14 +37286,14 @@ class Vd extends ih {
           if (!n) {
             const f = t.tracks[0].name.substring(0, l) + ".quaternion";
             Dn && console.warn("Create quaternion track", h, d);
-            const p = d.quaternion, g = new LS(f, [0, t.duration], [p.x, p.y, p.z, p.w, p.x, p.y, p.z, p.w]);
-            t.tracks.push(g), this.createRotationInterpolant(t, e, g);
+            const p = new LS(f, [0, t.duration], [0, 0, 0, 1, 0, 0, 0, 1]);
+            t.tracks.push(p), this.createRotationInterpolant(t, e, p);
           }
         } else {
           const f = c + ".position";
           Dn && console.warn("Create position track", h, d);
-          const p = d.position, g = new IS(f, [0, t.duration], [p.x, p.y, p.z, p.x, p.y, p.z]);
-          t.tracks.push(g), this.createPositionInterpolant(t, e, g);
+          const p = new IS(f, [0, t.duration], [0, 0, 0, 0, 0, 0]);
+          t.tracks.push(p), this.createPositionInterpolant(t, e, p);
         }
     }
   }
@@ -39352,7 +39353,7 @@ let $i = class extends R {
       (this.debug || Go) && console.warn("[ViewBox] Moving camera out of bounds", m, "<", v);
       const I = z(b);
       I.y *= 1e-8, I.normalize();
-      const $ = (v - m) * 10, V = y.add(I.multiplyScalar($));
+      const $ = v - m, V = y.add(I.multiplyScalar($));
       e.worldPosition = V.lerp(y, 1 - this.context.time.deltaTime);
     }
     const x = z(p);
@@ -40582,7 +40583,7 @@ P.add("ClickThrough", py);
 P.add("CursorFollow", rf);
 P.add("HoverAnimation", Es);
 P.add("ScrollFollow", Lo);
-P.add("ResponsiveBox", $i);
+P.add("ViewBox", $i);
 P.add("Avatar", _r);
 P.add("XRControllerFollow", Do);
 P.add("XRControllerModel", _o);
@@ -43000,9 +43001,6 @@ const m2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   RemoteSkybox: iy,
   Renderer: Ki,
   RendererLightmap: rm,
-  get ResponsiveBox() {
-    return $i;
-  },
   Rigidbody: rt,
   RotationBySpeedModule: _n,
   RotationOverLifetimeModule: Kn,
@@ -43066,6 +43064,9 @@ const m2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   VelocityOverLifetimeModule: He,
   VerticalLayoutGroup: vw,
   VideoPlayer: mt,
+  get ViewBox() {
+    return $i;
+  },
   Vignette: ol,
   VisibilityAction: Tu,
   Voip: Mr,