Mattercraft for Three.js Developers

Accelerating Three.js Development with Mattercraft

Three.js is the go-to JavaScript library for creating 3D on the web, but setting up, managing assets, testing interactions, and integrating physics can slow you down. Mattercraft was built for developers who want to spend less time on boilerplate code and more time bringing their ideas to life.

With Mattercraft's browser-based 3D development environment and built-in AI Assistant you can code, preview, and publish immersive experiences and projects faster while keeping full control of your code.

Why Three.js Developers Love Mattercraft

Building with vanilla Three.js often means juggling multiple tools: an IDE, a local server, npm, an asset pipeline and endless page refreshes. It’s powerful, but it’s not fast.

Mattercraft streamlines that entire process:

• Built on top of Three.js
• Instant project setup - open your browser and start building
• Visual 3D scene editing without losing control
• Built-in physics, animation, and UI layers ready to go
• Direct npm integration for any Three.js-compatible library
• Visual and easy HTML and CSS UI creation
• Live preview so you can see changes in realtime
• AI Assistant [New] – get contextual help, syntax-aware suggestions and an assistant that helps you build faster but always keeps you in full control (accept and reject changes when proposed)

By combining the flexibility of web libraries with the speed of visual 3D tooling, Mattercraft helps you focus on what matters, delivering interactive, high-performance WebGL experiences.

Mattercraft vs. Traditional Three.js Development

Developers familiar with Three.js know the flexibility it offers but also the setup, tooling, and maintenance overhead it requires. The table below outlines how Mattercraft’s browser-based Three.js IDE compares to a traditional local development workflow.

Browser-Based Development

Traditional Three.js workflows require setting up Node, dependencies, and a dev server before you even start coding. Mattercraft removes that friction. Open your browser, create a new project, and start building instantly – no local installs or environment setup needed.

This browser-first approach is perfect for rapid prototyping, teaching Three.js, and collaborating remotely. You can preview your work on multiple devices without deploying to a server, and share live links with teammates or clients for instant feedback.

Mattercraft’s in-browser IDE supports ES modules, asset imports, and TypeScript, giving you everything you’d expect from a professional development setup without the maintenance overhead.

zcomponents vs. Three.js Object3D Hierarchy

In standard Three.js, everything is organised in an Object3D hierarchy. It’s powerful but can become messy in complex projects. Mattercraft introduces zcomponents, a higher-level component model that works alongside native Three.js objects.

zcomponents let you group meshes, lights, and logic into reusable components, so you can quickly duplicate, modify, and manage them visually while keeping your scene tree clean and manageable.

You still have full access to the raw Object3D structure in code, so you’re never locked in. This hybrid approach gives you the speed of a visual editor with the flexibility of vanilla Three.js.

Built-In Animation System for Three.js

Animating in pure Three.js often means importing external libraries, writing manual keyframes, and syncing them with your scene. Mattercraft’s animation system is built directly into the IDE, letting you add timeline-based or code-driven animations without leaving your workflow.

You can animate mesh positions, rotations, materials, lights, and even physics properties - all with instant playback in the viewport. Need to integrate custom easing or tweening? You can still write animations in JavaScript or TypeScript while previewing results live.

This makes Mattercraft perfect for interactive storytelling, game development, and dynamic UI effects.

Visual Viewport and Scene Hierarchy

Organising a complex Three.js scene in code alone can be time-consuming. Mattercraft’s Visual Viewport gives you a drag-and-drop interface to arrange, group, and manage scene elements.

You can position meshes, adjust lighting, move cameras, and edit object properties without losing direct code control. Changes update instantly in your JavaScript or TypeScript files, so the scene remains fully in sync with your codebase.

This is especially useful for architects, game designers, and 3D artists collaborating with developers so that everyone can understand and adjust the scene without diving into code.

Direct npm Integration

Need to add cannon-es for physics, Dat.GUI for UI controls, or GSAP for advanced animation? Mattercraft lets you install any npm package directly in from the dependencies browser.

Your Three.js project gets instant access to thousands of JavaScript libraries without touching a terminal. The dependency manager handles imports, versioning, and caching so you can focus on building.

Whether you’re integrating physics, particle systems or post-processing effects, Mattercraft’s npm integration makes it a true full-stack Three.js IDE.

Realtime Preview for Rapid Development

Iteration speed determines how far your idea goes. Mattercraft compiles changes instantly and hot-reloads the viewport, so you can tweak shaders, swap textures, tune physics, or adjust cameras and see results without manual refresh.

Device testing is built in: open the live preview link on another device and watch changes stream as you code. For performance-sensitive scenes, the preview exposes FPS, GPU timing, and draw-call stats to help you optimize Three.js materials, geometries, and render passes.

This short feedback loop accelerates prototyping, debugging, and shipping production-ready immersive 3D web content.

Applications vs Immersive Experiences

Three.js excels for custom-coded web applications. Mattercraft preserves that power but optimises the workflow for immersive, visually rich experiences. You still write TypeScript, but you gain visual tools for scene layout, animation, UI, and WebXR/WebAR, ideal for brand experiences, museum pieces, product try-ons, and training simulations.

Because the editor handles common boilerplate (asset pipes, interactions, physics), teams spend more time on content and polish, not scaffolding. With Mattercraft you get the best of both worlds: when you need custom systems, drop to code; when you need speed, use the visual 3D editor and no-code functionality.

TypeScript Behaviours for Three.js Interactive Components

In a conventional Three.js development workflow, event handling and interaction logic are often distributed across multiple scripts, relying on direct event listeners, custom raycasting implementations, or ad hoc state management patterns.

Mattercraft refines this process by introducing a behaviour-based architecture authored in TypeScript. Behaviours are modular, reusable code components that can be visually attached to scene objects, providing a structured and parameterised approach to implementing interactivity.

This methodology enables consistent configuration of actions such as hover highlighting, click selection, proximity triggers, and procedural animations, all while maintaining full access to the underlying Three.js APIs for complex or application-specific requirements. Parameter values for behaviours can be adjusted within the editor, facilitating rapid iteration without altering the source code.

Custom Contexts and APIs

State management within Three.js applications is frequently implemented using global variables, singleton objects, or custom frameworks, which can lead to fragmented logic and maintainability challenges. Mattercraft addresses this by providing Custom Contexts, a typed, declarative system for managing shared application data.

Contexts are defined once and can be accessed by multiple scenes, components, and behaviours, ensuring consistent data flow and reducing the need for redundant state-passing mechanisms. This architecture is particularly suited to complex immersive applications that require persistent or synchronised data, such as scoring systems in games, configuration states in product visualisers, or shared parameters in multi-scene experiences.

Integrated HTML/CSS Screen UI for Three.js Scenes

Integrating user interfaces with Three.js scenes can present significant technical and design challenges, particularly when combining HTML/CSS overlays with WebGL-rendered content. Mattercraft addresses this by providing a dedicated Screen UI system that supports the creation of responsive, standards-compliant HTML and CSS interfaces that remain tightly integrated with the underlying 3D scene.

UI components can be bound directly to scene data, enabling dynamic updates to materials, transformations, or application states. This approach facilitates the implementation of control panels, heads-up displays (HUDs), and interactive data visualisations without the complexity of custom overlay management.

By unifying interface and scene logic within a single development environment, Mattercraft improves both maintainability and iteration speed for projects requiring a seamless combination of 2D and 3D elements.

Visual Interaction System for Three.js Objects

Configuring object interactions in Three.js typically involves implementing raycasting logic manually using Raycaster.setFromCamera() and collision testing routines. Mattercraft streamlines this process by offering a visual interaction framework that abstracts these technical steps into configurable components.

You can define selection, hover, drag, and collision-based events directly within the scene editor, while retaining full access to the underlying Three.js raycasting and event APIs for advanced customisation. This system supports precise parameterisation of interaction thresholds, event conditions, and object targeting, ensuring predictable and reproducible behaviour across devices.

The integration of interaction logic at the editor level reduces development time and improves reliability in complex immersive applications, such as interactive product configurators, simulation environments, and virtual exhibitions.

Havok Physics Engine Integration for Three.js Projects

Incorporating realistic physics simulations into Three.js projects often requires integrating third-party engines such as Cannon.js or Ammo.js, a process that can introduce significant setup overhead.

Mattercraft eliminates this requirement by embedding the Havok physics engine directly within its development environment. This integration allows for the creation and configuration of rigid bodies, colliders, joints, and constraints through a visual interface, with immediate simulation feedback in the viewport. Physics properties, including mass, restitution, and friction coefficients, can be adjusted in real time, enabling rapid tuning and refinement of object behaviour.

The physics system operates in synchronisation with the Three.js object hierarchy, ensuring that visual and simulation states remain consistent. This capability is particularly advantageous for interactive simulations, game mechanics, and AR/VR environments requiring physically accurate object interactions.

Visual WebXR and WebAR Tools for Three.js Development

Implementing WebXR functionality in Three.js typically requires substantial boilerplate to configure session parameters, reference spaces, and controller inputs across multiple device types. Mattercraft simplifies this process by providing a visual XR configuration interface compatible with major headsets and AR devices, including Apple Vision Pro, Meta Quest, PICO, Zapbox, and Magic Leap 2.

Developers can define camera rigs, input mappings, and locomotion systems without manual coding, and preview immersive sessions directly from the viewport. This visual-first approach reduces the time required to establish and validate XR functionality, enabling faster prototyping and deployment of interactive 3D experiences. The WebXR subsystem is fully compatible with the Three.js API, ensuring advanced users can still implement custom XR pipelines where required.

Enhanced WebAR with Zappar

Developing reliable WebAR experiences in Three.js often necessitates the use of experimental browser APIs or bespoke computer vision implementations for marker detection, plane recognition, and face tracking.

Mattercraft integrates Zappar’s best-in-class computer vision libraries directly into its WebAR toolset, providing a robust and production-proven tracking framework. This integration supports image, face, and world tracking AR types, enabling developers to anchor and align 3D content accurately within real-world environments.

The visual development environment allows for rapid setup and iterative testing of AR experiences, while the underlying API remains accessible for programmatic control and optimisation. By incorporating a proven tracking pipeline, Mattercraft significantly reduces development complexity and increases deployment reliability for WebAR applications across a broad range of devices.

Two-Way Code and Visual Scene Editing for Three.js

Traditional Three.js workflows are inherently code-centric, requiring developers to manage all scene, material, and behaviour definitions programmatically.

Mattercraft introduces a two-way synchronisation model between code and visual scene editing, allowing modifications in the editor to be reflected in the TypeScript source, and conversely, code changes to be represented visually in the hierarchy and inspector panels. This system preserves the flexibility and expressiveness of direct code authoring while offering the efficiency benefits of visual editing for spatial and property adjustments.

The approach is particularly effective in collaborative environments, where designers can refine layouts, lighting, and materials without disrupting the underlying application logic managed by developers. This hybrid methodology supports faster iteration cycles and improved maintainability for complex Three.js-based projects.