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 on Android and iOS (yes! WebXR on iOS!)
  • Interactive QuickLook support for interactive AR on Vision Pro
  • 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
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 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 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


Contact ✒️

🌵 NeedleGithubTwitterDiscordForumYoutube


Recent Changes

  • Add: getComponentInChildren and getComponentInParent now expose the includeInactive parameter to include inactive objects in the search
  • Change: Improved XR sessiongranted temporary scene design (removing temporary objects in AR and adding support for custom logo display while the AR session is initializing)
  • Fix: iOS WebXR canvas size for screenspace UI rendering
  • Fix: iOS WebXR UI InputField support
  • Fix: Invalid input event causing issue in OrbitControls when pressing multiple mouse buttons at the same time
  • Add: showBalloonMessage now also render in AR sessions
  • Fix: iOS WebXR DOM-Overlay fixed
  • Fix: iOS WebXR custom Quit AR button fixed
  • NEW: WebXR support for iOS - Your AR experiences now launch instantly on iPhone and iPad without app installation. Just tap "Enter AR" and you're in. Powered by Needle Go AppClip, combining Apple's excellent AR tracking with standards-compliant WebXR. Try it at appclip.needle.tools
  • NEW: Intellisense support for the <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.
  • Add: exposed createCollider API for the Rapier physics engine
  • Add: beforeLODExport callback for USDZ export. This allows overriding which LOD level gets exported per object.
  • Add: ?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.
  • Add: auto-registration of custom elements for easier discovery of available web components in Needle Engine. You can disable this feature by setting 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.
  • Add: Support for rotation and scaling in DropListener component
  • Improve: VisionOS and iPad detection for better WebXR compatibility
  • Improve: WebXR session flow and error handling
  • Improve: QuickLook integration - disabled by default in WebXR component, shows "Open in Quicklook" button
  • Improve: SceneSwitcher now supports multiple scene switchers referencing the same asset reference
  • Improve: DragControls smoothed velocity calculations and region support
  • Improve: Detection of user interactions to enable media playback
  • Improve: JSDoc documentation for Everywhere Actions and other components
  • Fix: issue with callbacks on freshly destroyed components when leaving XR sessions
  • Fix: Instancing issue with growing vertex/index buffers when not necessary
  • Fix: Issue with <needle-engine> element being moved in the DOM
  • Fix: Better type declarations in package.json
  • Fix: Timeline cloning with instantiate (forum 2733)
  • Fix: Renderer sharedMaterials being null in awake
  • Fix: Issue where lightmapped materials were cloned
  • Fix: Apply lighting intensity multiplier in root scene
  • Fix: GLTF extensions when loading scene with Blob URL
  • Improve JSDoc documentation