Beginner's Guide

Web3D Director runs entirely in your browser. There is nothing to install, no accounts to create, and no server-side dependencies. You open the editor, build your scene, and export a self-contained HTML file that works anywhere. The tool is designed for designers, creative developers, and anyone who wants to create immersive 3D web content without diving into the Three.js API directly.

The editor provides a real-time 3D viewport with full orbit navigation, a hierarchy panel for scene organization, a properties inspector for fine-tuning every parameter, and a state machine for creating scroll-driven or time-based animations. When you are done, the export function produces a complete, obfuscated Three.js project that you can deploy immediately.

Interface Overview

The editor is divided into four main areas, each serving a distinct purpose in your workflow. Understanding the layout is the first step to working efficiently.

Toolbar (Top)

The toolbar spans the full width of the window at the top. On the left side, you will find the Eidolon Interactive branding, followed by buttons for adding objects to your scene: + Add Mesh, + Add Empty, + Add Light, + Add Camera, and + Add Particles. Each dropdown reveals subtypes for the category. On the right side, you have undo/redo, the theme selector, the help button, the Clear Scene button, the Import.. dropdown, and the Export Code button.

Hierarchy Panel (Left)

The left panel displays a flat list of every object in your scene. Each item shows an icon indicating its type (mesh, light, camera, empty, group, particle system, annotation, or audio source), the object name, a visibility toggle (eye icon), and a main-camera indicator (star icon) for cameras. Clicking an item selects it. Holding Shift while clicking enables multi-selection. The panel can be resized by dragging its right edge.

3D Viewport (Center)

The viewport is the central area where your 3D scene is rendered in real time. You can orbit the camera by clicking and dragging, zoom with the scroll wheel, and pan by right-clicking and dragging. When an object is selected, a transform gizmo appears on it. At the top-left of the viewport are the transform mode buttons (Move, Rotate, Scale), the viewport shading selector, and the coordinate space toggle (Global/Local). At the top-right are axis alignment buttons (X, Y, Z). At the bottom-right is the camera lock / preview toggle, and at the bottom-left is the camera view label and state indicator.

Properties Panel (Right)

The right panel displays all editable properties for the currently selected object. Properties are organized into collapsible sections and update in real time as you modify values. The available sections depend on the object type — for example, a mesh shows Transform, Material, and Texture sections, while a light shows Transform and Light properties.

State Machine Panel (Bottom)

The bottom panel houses the state machine, which is the heart of the animation system. It displays state cards in a horizontal row, each representing a snapshot of object properties at a point in your animation timeline. You can scroll through states, capture object positions into states, and preview the interpolation between them. This panel can be resized vertically by dragging its top edge.

Adding Objects

Every scene starts with objects. Web3D Director offers a rich set of primitive types, helper objects, lights, cameras, particle systems, annotations, and audio sources. All of these are added via the toolbar at the top of the screen, and each new object is placed at the world origin (0, 0, 0) and automatically selected so you can immediately reposition it.

Selecting Objects

Selection is the foundation of every action in the editor. There are multiple ways to select objects, and the editor supports both single and multi-selection.

Single Selection

Click an object in the hierarchy panel to select it. Alternatively, click directly on an object in the 3D viewport (this is called "picking"). The selected object gets a blue outline glow in the viewport, and its properties appear in the right panel. Clicking empty space in the viewport deselects the current object.

Multi-Selection

Hold Shift and click additional objects in the hierarchy to add them to your selection. All selected objects are highlighted in the hierarchy and outlined in the viewport. When multiple objects are selected, a shared transform pivot appears at the center (centroid) of the group. Dragging this pivot moves all selected objects together, with the delta distributed proportionally to each object. Multi-selection is required for grouping objects (see the Organizing Objects section).

You can also use Ctrl+A to select all objects in the scene at once.

Viewport Picking

Clicking on an object in the 3D viewport selects it directly. The editor uses raycasting to determine which object is under your cursor. If objects overlap, the closest one to the camera is selected. Picking works with all object types including meshes, lights, cameras, and particle system gizmos.

Transforming Objects

Every object in the scene has a transform: position (where it is), rotation (how it is oriented), and scale (how big it is). You can modify transforms using the viewport gizmo, the Properties panel, or keyboard shortcuts.

Transform Modes

Three transform modes are available, toggled by buttons at the top-left of the viewport or by keyboard shortcuts:

Drag the colored axis handles to constrain the transform to a single axis. Drag the plane between two axes (the colored squares) to transform on two axes simultaneously. For rotation, drag anywhere on the circle to rotate around that axis.

Coordinate Space

The Global/Local toggle button (next to the mode buttons) switches between world and local coordinate space. In Global mode, the gizmo axes always align with the world X, Y, and Z directions regardless of the object's rotation. In Local mode, the gizmo axes rotate to match the object's own orientation. This is especially useful for moving an object along its own "forward" direction after it has been rotated.

Axis Alignment Buttons

The X, Y, Z buttons at the top-right of the viewport align the camera to look directly along each axis. Click X to look along the X axis, Y to look from above, and Z to look along the Z axis. This is helpful for precise alignment of objects from a specific viewpoint.

Object Properties

Select any object to see its properties in the right panel. Properties are organized into collapsible sections. All changes are applied in real time and can be undone.

Transform

Every object has position (X, Y, Z), rotation (X, Y, Z in degrees), and scale (X, Y, Z). Enter precise values in the number fields or use the viewport gizmo for interactive adjustment. Rotation values are in degrees for readability but are converted to radians internally.

Material

Mesh objects have a PBR (Physically Based Rendering) material with the following properties: color, roughness, metalness, emissive color, emissive intensity, opacity, transparency toggle, wireframe toggle, and side rendering (front, back, or double-sided). Adjusting these values creates materials ranging from matte plastic to polished metal to glowing neon.

Textures

Apply image textures to your meshes for color (albedo), normal maps (surface detail), roughness maps, metalness maps, and more. Upload texture files in the Properties panel. Each texture slot accepts a separate image file. Textures are included in the exported project automatically.

Object-Specific Properties

Each object type has its own set of properties. Lights have color, intensity, shadow settings, and type-specific parameters (angle for spots, distance for points, shape for area lights). Cameras have FOV, near/far clipping planes, and camera type. Particle systems expose all the particle parameters described in the Particle Systems section. Annotations expose text, colors, and style settings. Audio sources expose volume, speed, reverb, and spatial mode.

Object Name

Every object has a name that appears in the hierarchy. Double-click the name in the hierarchy to rename it. Descriptive names make it much easier to manage complex scenes.

Organizing Objects

As your scene grows, keeping it organized becomes essential. Web3D Director provides several tools for this.

Groups

Select two or more objects (using Shift+click), then press Ctrl+G to group them. A group is a container that holds multiple objects. When you transform the group, all children move together. Groups appear in the hierarchy with a group icon. You can add more objects to an existing group via the context menu (right-click on an object in the hierarchy).

Visibility

Each object in the hierarchy has a visibility toggle (eye icon). Click it to hide the object from the viewport. Hidden objects are not rendered but still exist in the scene and will appear in exports. This is useful for temporarily removing clutter while you work on a specific area.

Deleting Objects

Select an object and press Delete or Backspace to remove it from the scene. You can also use the context menu (right-click in the hierarchy). Deleted objects can be recovered with undo (Ctrl+Z).

Duplicating Objects

Press Shift+D to duplicate the selected object. The duplicate is offset by 1 unit along the X axis so you can see it immediately. Materials are deep-cloned, so changes to the original's material will not affect the copy.

Context Menu

Right-click an object in the hierarchy to open a context menu with options for deleting, duplicating, grouping, and more. The exact options vary depending on the object type and current selection state.

Environment & HDRI

The environment settings control the overall look and feel of your scene's background and lighting. These are accessed via the Properties panel when no object is selected (click empty space in the viewport or the scene background in the hierarchy).

HDRI Lighting

High Dynamic Range Images (HDRIs) provide realistic environment lighting and reflections. The editor includes eight sample HDRIs loaded from the Three.js CDN. Select one from the HDRI dropdown in the world properties. You can also upload your own .hdr or .exr file. HDRI settings include intensity (how bright the environment lighting is), rotation (X, Y, Z in degrees), and blurriness (softens reflections for a less perfect mirror look).

Toggle "Show Background" to display the HDRI as the scene's skybox, or turn it off to use a solid color or gradient background instead while still benefiting from the HDRI's lighting contribution.

Background Options

When no HDRI is loaded or "Show Background" is off, you can set the background to:

• Solid Color — A single flat color (default: #0f0f0f)
• Gradient — A two-color gradient with linear or spherical type, plus rotation offsets for precise control over the gradient direction

State Machine

The state machine is Web3D Director's animation engine. It allows you to create smooth, interpolatable transitions between different configurations of your scene. Each state stores a snapshot of all captured objects' properties, and you can smoothly blend between states using scroll-based or automatic playback.

Importing Assets

Web3D Director supports importing existing 3D assets so you can incorporate them into your scenes. Click Import.. in the toolbar to see the options.

GLB Files

Import 3D models in GLB (GL Binary) or glTF format. This is the standard format for web 3D content and is supported by most 3D modeling software (Blender, Maya, 3ds Max, etc.). When you import a GLB file:

• The model is added to the scene at the world origin
• All meshes, materials, and textures are preserved
• Skeletal animations are detected and can be played via the state machine's animation playback feature
• The imported model is automatically selected so you can immediately position it

JSON World

Import a previously exported JSON file to restore a complete scene. This loads all objects, their properties, environment settings, state machine configurations, and animation data. JSON import is the primary way to resume work on a project you previously exported.

Exporting Your Scene

When your scene is complete, click Export Code in the toolbar to generate a self-contained, deployable Three.js project. The export dialog shows two outputs:

Three.js Code

The primary export is a complete Three.js application as an HTML-compatible JavaScript module. The code is obfuscated to protect your intellectual property but remains fully functional. It includes all scene objects, materials, textures, lighting, cameras, state machine animations, particle systems, annotations, audio sources, and environment settings. Copy this code and wrap it in a <script type="module"> tag inside a minimal HTML page to deploy it.

JSON Data

Click Save as JSON to download the scene as a JSON file. This file contains the full scene data in a format that can be re-imported into Web3D Director for continued editing. Keep this file as your project source — the HTML export is for deployment, while the JSON is your editable project file.

Export Workflow

1. Build and animate your scene in the editor
2. Click Export Code
3. Click Save as JSON to save your editable project file
4. Click Copy to Clipboard to copy the Three.js code
5. Create an HTML file with the code wrapped in a script module tag
6. Deploy the HTML file along with any asset folders (textures, audio, HDRI files)

Undo & Redo

Web3D Director maintains a full undo/redo history. Almost every action is tracked: creating, deleting, and transforming objects, changing properties, capturing states, and more. The history stores up to 50 actions.

The undo/redo buttons in the toolbar are grayed out when there is nothing to undo or redo. Each action is labeled (e.g., "Transform Box_1", "Delete Light_2") so you know what will be undone.

Keyboard Shortcuts

Keyboard shortcuts significantly speed up your workflow. All shortcuts work when no input field is focused.

Themes

Web3D Director includes seven built-in color themes to match your preference or reduce eye strain during long editing sessions. Click the Theme button (sun icon) in the toolbar to switch themes. Your selection is remembered across sessions.

Themes affect the editor interface only — they do not change the appearance of your exported scene. Each theme carefully adjusts background colors, panel tints, border colors, text contrast, and selection highlights to create a cohesive and comfortable editing environment.