Needle Engine for 8th Wall Users

A practical guide for 8th Wall developers looking for a WebAR platform. Learn how to build AR experiences with Needle Engine using your existing three.js knowledge.

If you're an 8th Wall developer looking for a new platform for your WebAR projects, this guide will help you understand how Needle Engine works and how your existing skills transfer over.

<testimonial name="Mike Bardeggia" role="Founder, Pedestrian-X" src="https://www.pedestrian-x.com/"

I've tried Adobe Aero, 8th Wall, and Niantic Lightship — all either dropped or required app store downloads. Finally, I found Needle with AppClip tech. I feel like I've found the right path with Needle.

:::tip New to Needle Engine? Needle Engine is a web-first 3D runtime built on three.js. It works with Unity and Blender for visual scene authoring, or you can code directly with TypeScript/JavaScript.

Try it now → – Opens a ready-to-use project in your browser. :::

How Needle Engine Compares to 8th Wall

If you're evaluating alternatives, here's how the two platforms differ:

Aspect	8th Wall	Needle Engine
AR on Android	8th Wall SLAM	WebXR with NATIVE ARCore (Chrome/Firefox)
AR on iOS	8th Wall SLAM	WebXR via App Clip with NATIVE ARKit or Interactive USDZ/QuickLook (runtime export with interactivity)
Image tracking	Built-in	WebXR Image Tracking
Face tracking	Built-in	Via @needle-tools/facefilter package
VPS / Location AR	Lightship VPS	No built-in support
VR headsets	No	Yes (Meta Quest 2/3/Pro, Pico, Valve Index, etc.)
Spatial computing	No	Yes (Apple Vision Pro, HoloLens 2)
Scene editor	Cloud Editor	Unity or Blender
Hosting	8th Wall required	Self-host anywhere
Underlying tech	Custom XR8 engine	three.js

Where Needle Engine Shines

• NATIVE ARKit/ARCore tracking – True native AR tracking quality via WebXR on iOS (App Clips) and Android (Chrome/Firefox) - superior tracking compared to web-based SLAM

• Interactive USDZ export – Runtime USDZ generation with full interactivity via Everywhere Actions for iOS QuickLook

• Flat pricing – No per-view fees. Pay a license fee and deploy to unlimited users

• Performance optimization – Automatic texture compression, mesh optimization, and progressive loading

• Visual editing – Use Unity or Blender instead of code-only workflows

• Platform flexibility – AR, VR, desktop, and mobile from one codebase

• Hosting freedom – Deploy to any web server or use Needle Cloud

• three.js compatibility – Your existing three.js code works directly

What 8th Wall Does That Needle Doesn't (Out of the Box)

• VPS / Location-based AR – No built-in support in Needle Engine

• Cloud-based editor – Needle uses desktop editors (Unity/Blender) and the Needle Inspector Chrome extension for runtime editing, debugging, and scene inspection with undo/redo support

---

Working with Exported 8th Wall Projects

If you've exported your 8th Wall project as a buildable .zip file, here's what you can do with the assets:

What You Can Reuse

Your exported 8th Wall project contains assets that work with any web platform:

Direct compatibility:

• 3D models (glTF, GLB, OBJ, FBX)

• Textures (PNG, JPG, WebP)

• Audio files

• Image tracking targets (the images themselves)

Needs adaptation:

• JavaScript code using XR8.* APIs

• A-Frame components (if used)

• 8th Wall-specific pipeline modules

Migrating Assets to Needle Engine

Option 1: Load glTF/GLB models directly

If your 8th Wall project used glTF models, they work in Needle Engine without changes:

<needle-engine src="your-model.glb"></needle-engine>

Option 2: Import into Unity or Blender

For more complex scenes:

1. Import your 3D models into Unity or Blender

2. Set up materials and lighting

3. Add Needle components for interactivity

4. Export to web

This approach is better for projects with many assets or complex scene hierarchies.

---

Your three.js Knowledge Transfers

Needle Engine is built on three.js, so your existing knowledge applies directly. Here's how the code patterns compare:

Adding Objects to the Scene

// This three.js code works in both platforms
import * as THREE from "three";

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// In Needle Engine, use lifecycle hooks to access the scene
import { onStart } from "@needle-tools/engine";

onStart(context => {
  context.scene.add(cube);
});

Enabling AR

// 8th Wall approach
XR8.addCameraPipelineModules([
  XR8.GlTextureRenderer.pipelineModule(),
  XR8.Threejs.pipelineModule(),
  XR8.XrController.pipelineModule(),
]);

// Needle Engine approach
import { onStart, WebXR } from "@needle-tools/engine";

onStart(context => {
  // Add WebXR with configuration options
  context.scene.addComponent(WebXR, {
    createARButton: true,
    createVRButton: false,
  });
});

Animation Loop

// 8th Wall (via three.js or custom pipeline)
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

// Needle Engine
import { onUpdate } from "@needle-tools/engine";

onUpdate(context => {
  cube.rotation.y += context.time.deltaTime;
});

API Mapping Reference

8th Wall	Needle Engine
XR8.Threejs.pipelineModule()	Built-in (Needle uses three.js)
XR8.XrController.pipelineModule()	WebXR component
XR8.GlTextureRenderer	Built-in renderer
scene.add(object)	context.scene.add(object)
XRExtras.Loading	<needle-engine loading-style="...">
Image Targets config	WebXRImageTracking component

---

Getting Started

Quick Start (Code-First)

If you want to start coding immediately:

In your browser: engine.needle.tools/new

Or install locally:

npm install @needle-tools/engine

Minimal AR example:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>
  <needle-engine src="scene.glb"></needle-engine>

  <script type="module">
    import { onStart, WebXR } from "@needle-tools/engine";

    onStart(context => {
      context.scene.addComponent(WebXR, {
        createARButton: true,
        createVRButton: false,
      });
    });
  </script>
</body>
</html>

Visual Editing (Recommended for Complex Scenes)

For projects with many assets or complex scene setups, using a visual editor saves time:

• Unity Integration – Download the Unity package

• Blender Integration – Download the Blender add-on

Both integrations let you build scenes visually and export to the web with one click.

---

iOS AR Support

8th Wall's iOS support was one of its strengths. Here's how Needle Engine handles iOS:

WebXR via App Clip (Best Quality)

Needle Engine provides full WebXR support on iOS through App Clip technology:

• Users tap a link or scan a QR code

• No app download required

• Full ARKit tracking quality

• Your WebXR code works without changes

iOS WebXR App Clip documentation →

USDZ / QuickLook with Interactivity

Needle Engine automatically exports interactive USDZ files at runtime:

• Automatic conversion – Your 3D scene is converted to USDZ on-the-fly when iOS users tap "View in AR"

• Full interactivity – Animations, material changes, audio, and tap interactions work in QuickLook

• No manual export – Enable USDZ export in the WebXR component or add the USDZExporter component

• Works on iPhone, iPad, and Apple Vision Pro

This is fundamentally different from static USDZ export. Most tools require you to manually export a frozen 3D model. Needle Engine generates interactive USDZ files dynamically, preserving the same behaviors you built for the web.

Supported interactions via Everywhere Actions:

• Play animations on tap

• Change materials (product configurators)

• Show/hide objects

• Play spatial audio

• Transform objects (move, rotate, scale)

• Image tracking

Everywhere Actions documentation →

---

Image Tracking

If your 8th Wall project used image targets, Needle Engine supports WebXR Image Tracking:

• Works on Android (Chrome with flag enabled)

• Works on iOS (via App Clip with ARKit)

• Alternative: QuickLook image tracking on iOS

Image Tracking documentation →

---

Deployment

Unlike 8th Wall, you can host Needle Engine projects anywhere:

Needle Cloud (simplest):

npx needle-cloud deploy

Any static host:

• Vercel, Netlify, GitHub Pages

• AWS S3, Google Cloud Storage

• Your own web server

npm run build
# Upload the dist/ folder

Deployment guide →

---

Key Differences in Workflow

Task	8th Wall	Needle Engine
Create a scene	Cloud Editor	Unity, Blender, or code
Preview locally	npm run serve	npm run dev (with hot reload)
Deploy	Publish to 8th Wall	Deploy anywhere
Version control	Limited	Standard Git
Team collaboration	Via 8th Wall	Any tool (Git, etc.)

---

Learning Resources

Documentation

• Getting Started – Installation and setup

• XR (AR/VR) Guide – WebXR features

• Scripting Guide – Creating components

• three.js Integration – Using three.js with Needle

Examples

• XR Samples – AR and VR demos

• Image Tracking Demo – Live example

• All Samples – Interactive examples

Community

• Discord – Quick help and discussion

• Forum – Longer discussions

• GitHub – Issues and feature requests

---

FAQ

Can I import my 8th Wall project directly?

Not directly. 8th Wall projects use the XR8 engine which is proprietary. However, you can:

• Reuse all your 3D assets (models, textures, audio)

• Adapt your three.js code to use Needle's lifecycle hooks

• Rebuild your scene in Unity/Blender for better results

Do I need Unity or Blender?

No. You can use Needle Engine with just code (similar to 8th Wall's approach). However, visual editors make complex scenes much easier to build and maintain.

What about face tracking?

Needle Engine has a dedicated face filter package:

• @needle-tools/facefilter – Official package with MediaPipe integration

• Live demo – Try it in your browser

The package supports texture mapping, video overlays, custom shaders, and multi-face tracking.

How does pricing work?

• Free for non-commercial use

• Pro license for commercial projects – no per-view fees, no matter how many users access your experience

• Host anywhere – use your own servers or Needle Cloud

This is a significant difference from 8th Wall's per-view pricing model. With Needle Engine, you pay a flat license fee regardless of traffic.

Pricing details →

---

Next Steps

1. Try the samples – See what's possible

2. Create a project – Start in your browser

3. Read the XR guide – Learn about AR/VR features

4. Join Discord – Get help from the community

---

See Also

• Needle vs 8th Wall Comparison – Detailed feature comparison

• WebXR Documentation – AR and VR capabilities

• three.js Integration – Working with three.js

• Deployment Guide – Hosting options