Needle Engine

Needle Engine is a web-first 3D framework built on three.js for building games, configurators, AR/VR experiences, and interactive websites.

Built-in: Rapier Physics | WebXR (incl. iOS) | Multiplayer & VOIP | Blender & Unity Integration

Built on three.js and the glTF standard, Needle Engine delivers flexible, extensible web experiences with built-in collaboration and XR support. Use it standalone with npm or with powerful editor integrations for Unity and Blender.

Quick Links

Changelog | Documentation | Samples | Showcase | API Reference

Getting Started

npm install @needle-tools/engine

Try it now on StackBlitz | Getting Started Guide

Code Examples

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);
    }
}

Physics with Rapier (built-in)

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

export class PhysicsBox extends Behaviour {
    
    awake() {
        // Add a physics body — Rapier is built in, no extra install needed
        const rb = this.gameObject.addComponent(Rigidbody);
        rb.useGravity = true;

        // Add a collider
        this.gameObject.addComponent(BoxCollider);
    }
}

Multiplayer with @syncField

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

export class SyncedCounter extends Behaviour {
    // Automatically synced across all connected clients
    @syncField()
    count: number = 0;

    onPointerClick() {
        // Reassign to trigger sync (this is required for sync to work)
        this.count = this.count + 1;
    }
}

Lifecycle Hooks (no component needed)

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

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

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

Key Features

WebXR & AR — immersive experiences on Android and iOS

WebXR support including WebXR on iOS
WebXRImageTracking — AR image targets with full tracking lifecycle
WebXRPlaneTracking — AR surface detection
Interactive QuickLook for AR on Vision Pro

Scene & Asset Management

SceneSwitcher — load different scenes by URL
AssetReference — runtime asset loading by URL
NestedGltf — lazy-load GLB files on demand within a scene
Multi-scene support with dynamic content loading

Physics & Interaction — Built-in Rapier physics engine

Rigidbody, BoxCollider, SphereCollider, MeshCollider — full physics simulation
CharacterController — movement with gravity, slopes, and steps
DragControls — click-and-drag 3D objects with zero code
SpatialTrigger — proximity and enter-zone detection

Multiplayer & Networking — real-time collaboration out of the box

SyncedRoom + @syncField() — automatic state synchronization
Voip — built-in WebRTC voice chat
PlayerSync — player object sync on join/leave
SyncedCamera — camera sync for observer sessions

Rendering & Effects

Advanced PBR rendering with lightmap support
Post-processing (Bloom, DepthOfField, SSAO, ChromaticAberration, and more)
Progressive texture and mesh loading with automatic LOD generation

Animation & Media

Animation state machines and timeline animations
VideoPlayer — full video playback component
AudioSource — 3D spatial audio
Animate anything via KHR_animation_pointer

Framework Integration — works with React, Vue, Svelte, or vanilla JS/TS

See all features

Editor Integrations

Needle Engine works standalone with just npm — no editor required. For asset-heavy workflows, use our editor integrations:

Examples

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

Recent Changes

[4.17.0-alpha] - 2026-03-19

Add: Vite 8 support
Fix: nextjs support

[4.16.4] - 2026-03-18

Fix: Splines catmullrom tension
Fix: focus-rect attribute for e.g. <needle-engine focus-rect=".mydiv" src="..."></needle-engine>
Fix: Vite plugins process exit on SIGINT
Improved activeInHierarchy performance
Improved Graphics.blit performance
Improved Postprocessing performance

[4.16.3] - 2026-03-15

VideoPlayer default renderMode set to MaterialOverride

[4.16.2] - 2026-03-11

Improve: ReflectionProbe now uses integrated box intersection and gizmo
Improve: ReflectionProbe center and size now have default values and improved JSDoc documentation
Improve: Comprehensive TypeScript declarations for Vite and Next.js plugins with full JSDoc, @param, @returns, and @example tags for API documentation (NE-6952)
Improve: Plugin type declarations are now auto-generated from source
Remove: loadMaterialX vite plugin setting (no longer needed)