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 |
|---|---|---|---|
| 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
<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 awakeqrcode-logo-src attribute to <needle-engine> web component to override the logo displayed in the QR code button. Requires PRO license.