Needle Engine

Needle Engine is a web engine for high quality 3D applications with performance in mind.

Built on three.js and the glTF standard, Needle Engine delivers flexible, extensible web experiences with built-in collaboration and XR support.

🏓 Changelog • 📑 Documentation • 🧠 Sample Scenes • 💎 Showcase

🎮 Development Experience

  • Component system with easy custom component creation
  • Unity and Blender integrations for familiar workflows
  • Multi-scene support with dynamic content loading

🌐 Web & XR Ready

  • WebXR support for immersive experiences
  • iOS QuickLook support for interactive AR
  • Built-in networking and collaboration

⚡ Performance Optimized

  • Progressive texture and mesh loading
  • Automatic LOD generation for textures and meshes
  • Advanced PBR rendering with lightmap support

🎬 Animation & Effects

  • Animation state machines and timeline animations
  • Physics simulation
  • Post-processing effects
  • Animate anything with ease

→ See all features

Powerful integrations for Unity and Blender allow artists and developers to collaborate and manage web applications inside battle-tested 3d editors. Needle Engine integrations allow you to use editor features for exporting models, author materials, animate and sequence animations, bake lightmaps and more.

Quick Start with npm:

npm install @needle-tools/engine

Or use our Editor Integrations: Follow the Getting Started Guide to download and install Needle Engine with Unity or Blender.

Explore Examples: Try our interactive samples to see what's possible ⚡


Available under commercial and educational licenses

Preview Example Description Links
Animate Anything Interactive animation system Code on Stackblitzthree.js Example
Postprocessing Effects Custom magnifier effect with post-processing Code on Stackblitz
Camera Focus DIV 1 Responsive layout with camera focus Code on Stackblitz
Camera Focus DIV 2 Click-to-move camera focus example Code on Stackblitz
FastHDR Loading 10x faster than EXR, non-blocking, 95% less GPU memory Code on StackblitzLearn more
Scrollytelling Example No-Code example for using browser scroll and cursor to create playful and stunning 3D backgrounds Included in Samples Package
AR Restaurant Interactive AR restaurant experience Code on Github
Custom Loading Overlay Wait for LODs with custom loading states Code on Stackblitz
React Shopping Cart E-commerce integration with React Code on Stackblitz

👋 More examples on samples.needle.tools, docs.needle.tools and in the Needle Engine Stackblitz Collection


Contact ✒️

🌵 NeedleGithubTwitterDiscordForumYoutube


Recent Changes

  • 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.
  • 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
  • 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
  • Fix: SpriteRenderer index issue when animated where animation precision issue was causing the wrong sprite to be selected (issue)
  • Fix: Scaling scene in AR with multitouch causing camera projection issue for a frame (issue)
  • NEW: Scrollytelling Example
  • NEW: Spline support with SplineContainer and SplineWalker components
    • SplineContainer: Holds the spline data. Use addKnot and removeKnot to modify the spline and getPointAt(t01:number) to get a point on the spline curve. Splines currently only support cubic interpolation.
    • SplineWalker: Component for moving objects along a spline. It can automatically move along the spline or be controlled by animations or other components by setting the position01 property.
  • NEW: Attractor component – Add Rigidbodies to the list to attract physical objects towards a point in space (or apply repulsion).
  • NEW: CursorFollow component – Does what it says! Add the component to an object to make it follow your cursor (or touch) on screen.
  • NEW: ScrollFollow component – Use browser scroll to influence animation, audio, light... in your scene.
  • Add: WebXRImageTracking methods for setPrimaryImage and addImage to simplify image tracking changes at runtime.
  • Add: Object3D worldForward can now be set (e.g. myObject.worldForward = new Vector3(0,0,1))
  • Fix: [XR] Issue where NeedleXRSession would invoke controller-added callback twice
  • Fix: [XR] Issue where invalid value in XRControllerMovement would break rendering when using hand tracking
  • Fix: [XR] NeedleXRController getButton for xr-standard-trigger and getStick("primary")
  • Fix: Capsule collider height
  • Fix: Issue where disposing object resources would cause errors in three.js