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
🌐 Web & XR Ready
⚡ Performance Optimized
🎬 Animation & Effects
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 |
|---|---|---|---|
![]() |
Collaborative Sandbox | Real-time collaborative multiplayer sandbox experience with WebXR on Android and iOS | |
![]() |
Image Tracking AR | AR image tracking example (iOS and Android). See docs | |
| Scrollytelling Bike Example | Timeline Animation using ScrollFollow, ViewBox and FocusRect | Project on Github | |
| See-Through Walls | See-Through component sample | ||
| Cursor Follow | Cursor Follow sample | ||
| Animate Anything | Interactive animation system | Code on Stackblitz • three.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 Stackblitz • Learn more | |
| Scrollytelling Example | Scroll, physics and cursor interaction: a playful 3D interactive scrollytelling website | 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
🌵 Needle •
Github •
Twitter •
Discord •
Forum •
Youtube
getComponentInChildren and getComponentInParent now expose the includeInactive parameter to include inactive objects in the searchsessiongranted temporary scene design (removing temporary objects in AR and adding support for custom logo display while the AR session is initializing)showBalloonMessage now also render in AR sessions<needle-engine> web component and its attributes, both in HTML and in code. The custom-elements.json allows for VSCode intellisense support, while HTMLElementTagNameMap and get/setAttribute overloads bring code completion and documentation.createCollider API for the Rapier physics enginebeforeLODExport callback for USDZ export. This allows overriding which LOD level gets exported per object.?spector=#frame URL parameter to enable a Spector.js capture on the specified frame number after page load. Make sure to install the Spector.js browser extension. You can optionally specify a frame number for capturing: ?spector=15.noCustomElementData to false in vite config. To manually register custom elements data, add it to your workspace or .vscode/settings.json via the html.customData setting.<needle-engine> element being moved in the DOMinstantiate (forum 2733)sharedMaterials being null in awake