twi5ted.js Editor Features

A web-first 3D editor built for speed, control, and clean output.
Everything you need to model, shade, light, and export scenes — without installing desktop software.
Launch the EditorView Docs

Object Creation:

cube, sphere, plane, cone, torus, tube, ground plane, 3d text

Transform Tools:

translate / rotate / scale (viewport gizmo + numeric inspector)

Scene Hierarchy:

object list, rename, hide/show, delete, groups (folder-style)

Materials:

color, roughness, metalness, opacity, emission, normal maps

Decals:

project PNG decals onto surfaces; adjust transform; persist on save/load

Lighting:

ambient, directional, point, spot, rect; helpers + shadow toggles

Import:

GLTF/GLB models + SVG → 3D (merge optional)

Export:

scene save/load files + screenshots (UI/grid hidden; optional transparency)

Array:

Linear, Radio, Grid, Odject

Modeling:

subdivide, bevel, randomize, symmetry, union, boolean

Deformers:

blend, twist, taper, skew, stretch, spherify

Interations:

click URL, hide, show, custom actions

HDRI Environment

Load an HDR environment for dramatic reflections and lighting.

Light Helpers

Toggle helpers to visualize direction, cones, and rect panels.

Material Presets

Quick presets like Glass, Plastic, Metal, and Rubber.

twi5ted.js — Interface Tour

The twi5ted.js editor is organized around a central 3D viewport, with supporting panels and toolbars positioned to keep the workspace clean, fast, and intuitive.

This section walks through each major interface element and its purpose.

1. Main Viewport (Center)

The Main Viewport is the heart of the editor.

This is where you:

  • View your 3D scene in real time
  • Select objects by clicking on them
  • Manipulate objects using transform controls
  • Preview materials, lighting, decals, and models

Viewport Features

  • Orbit camera controls (rotate, pan, zoom)
  • Real-time lighting and shadows
  • Grid (optional) for scale and alignment reference
  • Supports transparent and solid backgrounds for screenshots

The viewport always reflects the current state of the scene exactly as it will be exported or captured.

2. Transform Controls (Top Center)

Located at the top center of the screen, the Transform Controls allow quick switching between object manipulation modes:

  • Translate — move objects in 3D space
  • Rotate — rotate objects around axes
  • Scale — resize objects uniformly or per-axis

These controls apply to the currently selected object or group and update instantly.

Tip: Keeping transform controls centered makes them accessible without blocking the scene or panels.

3. Left Panel — Tools Panel

The Left Panel contains the primary creation and scene tools. It is organized as an accordion for easy navigation.

 

Typical Sections Include:

  • Primitives & Shapes
    Create cubes, spheres, planes, cones, torus, tubes, and ground planes.
  • Scene Tools
    Add lights, environment elements, and helpers.
  • Modifiers & Arrays
    Tools for duplication, symmetry, arrays, and transformations.
  • Utilities
    Scene-level tools such as resets, helpers, or batch actions.

Pin Function

  • The Tools Panel can be pinned open
  • When pinned, it will not auto-close while working
  • Pin state persists between sessions

4. Right Panel — Inspector Panel

The Inspector Panel displays detailed properties for the currently selected object.

This panel is context-sensitive — it changes based on what is selected.

Common Inspector Sections:

  • Object Info
    • Name
    • Visibility
    • Group membership
  • Transform
    • Position, rotation, scale (numeric input)
  • Materials
    • Color
    • Roughness / Metalness
    • Opacity
    • Textures & normal maps
  • Decals
    • Decal-specific controls when applicable
  • Lighting (when a light is selected)
    • Color
    • Intensity
    • Shadows
    • Type-specific properties

Like the left panel, the Inspector can also be pinned open for uninterrupted editing.

5. Object List / Scene Hierarchy

Within the Inspector or a dedicated section, the Object List shows:

  • All objects currently in the scene
  • Groups and nested objects
  • Lights, meshes, and imported models

Object List Features:

  • Select objects directly from the list
  • Rename objects
  • Hide / show objects
  • Group multiple objects
  • Expand or collapse grouped items

This provides a structured, scene-graph-style view of your project.

6. Bottom Dock / Quick Actions

The Bottom Dock provides fast access to high-frequency actions without opening panels.

Typical actions include:

  • Save scene
  • Load scene
  • Import 3D model
  • Open Screenshot panel

The dock stays minimal by design, focusing on speed and accessibility.

7. Screenshot Panel

The Screenshot Panel slides out when needed and stays out of the way otherwise.

Current screenshot options include:

  • Transparent background (PNG)
  • Hide grid
  • Hide UI
  • One-click capture with automatic filename formatting

Screenshots are generated directly from the viewport, ensuring what you see is what you export.

8. Status & Feedback Area

A small status area provides feedback such as:

  • Save/load confirmation
  • Screenshot success or failure
  • Warnings or minor errors

This keeps notifications visible without interrupting workflow.