@needle-tools/engine

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.

Quick Links

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

Key Features

🎮 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

Editor Integrations

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.

• 🎲 Download Unity Integration
• 🐵 Download Blender Integration
• 📜 Use with Code

Getting Started

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 ⚡

Basic Usage

Creating a Custom Component

import { Behaviour, serializable } from "@needle-tools/engine";

export class MyComponent extends Behaviour {
    @serializable()
    speed: number = 1;

    start() {
        console.log("Component started on:", this.gameObject.name);
    }

    update() {
        this.gameObject.rotateY(this.context.time.deltaTime * this.speed);
    }
}

Using Lifecycle Hooks (without components)

import { onStart, onUpdate } from "@needle-tools/engine";

onStart((context) => {
    console.log("Engine started!");
});

onUpdate((context) => {
    // Called every frame
});

→ See API Documentation

Available under commercial and educational licenses

Examples

Preview	Example	Description	Links
	Multiuser Cross device experience, Desktop, AR & VR (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
	Unity ShaderGraph to MaterialX & mtlx materials	Using @needle-tools/materialx
	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

Contact ✒️

🌵 Needle • Github • Twitter • Discord • Forum • Youtube