How-To Guides

Get things done. These guides show you how to solve specific problems and accomplish particular tasks. They assume you already know what you want to achieve.

Not sure what you need?

• Need to learn the basics? See Tutorials
• Want to understand concepts? See Explanation
• Looking for API reference? See Reference

What are How-To Guides?

How-To Guides are task-oriented instructions. They are:

• Focused on accomplishing specific goals
• Action-oriented with clear steps
• Assume you understand the basics
• Get straight to the point

Setup & Installation

Get Needle Engine installed and configured:

• Install for Unity - Unity-specific workflows and features
• Install for Blender - Blender-specific workflows and features
• Install for Web Projects - Getting started guide

Export & Assets

Get your 3D content ready for the web:

• Export 3D Content - Overview of export workflow
• Use MaterialX - Complex material networks

Components

Use built-in components for common features:

• Camera Controls (OrbitControls) - The core camera controller for navigating 3D scenes
• Contact Shadows - Add realistic ground shadows to your scene
• Cursor Follow - Make objects follow the mouse or touch position
• Drag and Drop Files - Let users drop 3D models into your scene
• Drag Objects (DragControls) - Make objects draggable with mouse, touch, or VR controllers
• Duplicate Objects (Duplicatable) - Spawn copies by clicking and dragging
• Scene Switcher - Load and switch interactive glTF content (full scenes or individual assets)
• Scroll-Based Animations (ScrollFollow) - Link scroll position to timelines and animations for storytelling
• Video Player - Play videos, streams, and broadcasts in your scene

XR Development (VR & AR)

Build immersive experiences:

• WebXR Overview - VR and AR development guide
• iOS WebXR Support - Native iOS WebXR via App Clips
• Image Tracking - AR image tracking
• Everywhere Actions - Cross-platform interactive actions (iOS QuickLook)

Multiplayer & Networking

Create real-time collaborative experiences:

• Networking Overview - Multiplayer and networking guide
• Set Up Networking - Quick start (5 minutes)
• Sync Component State - Automatic networking with @syncField
• Manual Networking - Custom messages and control
• Custom Servers - Self-hosted infrastructure

Web Integration

Embed Needle Engine in websites and web apps:

• Web Integration Overview - Frameworks, bundlers, and integration
• Create Responsive 3D Layouts - Focus Rect and ViewBox for adaptive designs
• Embed in Websites - iframe, CDN, direct integration
• Integrate with Framer - Framer websites
• Integrate with WordPress - WordPress sites
• Integrate with Adobe Experience Manager - AEM sites and components

Scripting & Development

Build interactive experiences with code:

Core Concepts:

• Create Components - Write custom TypeScript components
• Use Lifecycle Hooks - awake, start, update, and more
• Use Coroutines - Time-based sequences

Interaction & Input:

• Handle User Input - Mouse, touch, keyboard, VR controllers
• Perform Raycasting - Detect objects and hit points
• Use Physics - Rigidbodies, forces, collisions, and triggers

Platform & Device:

• Detect Mobile Devices - Platform detection for iOS, Android, and browsers

Reference & Examples:

• Scripting Examples - Code examples and snippets
• Lifecycle Methods - Complete lifecycle API reference
• Input Events - Input event reference
• Physics Events - Collision and trigger events
• XR Events - WebXR AR/VR events

Deployment & Hosting

Get your projects live on the web:

• Deployment Platforms - Netlify, Vercel, GitHub Pages, and more
• Embed in Websites - iframe, CDN, direct integration
• Deploy to Needle Cloud - Official Needle hosting

Optimization & Performance

Make your experiences fast and small:

• Optimization & Compression - Texture/mesh compression, progressive loading, LODs
• gltf-progressive - Standalone progressive loading for any three.js project
• Export Best Practices - Optimize 3D assets for the web

Debugging & Testing

Find and fix issues:

• Needle Inspector - Chrome DevTools extension
• Debugging Parameters & Options - URL parameters, VSCode debugging, mobile debugging
• Local Development Help - Testing on phones, tablets, VR headsets, certificates

Need Help?

• Want to learn the basics? See Tutorials
• Want to understand how things work? See Explanation
• Looking for API docs? See Reference
• Stuck? Visit Help & Community or check FAQ