3D Editor

The G3Engine 3D Editor provides a powerful, intuitive interface for creating and manipulating 3D scenes in real-time. Built with React Three Fiber and Three.js, it offers professional-grade features with zero-config setup.

Overview

The 3D viewport is the heart of the G3Engine editor, providing real-time rendering, interactive object manipulation, and visual feedback for your game world.

The 3D editor uses WebGL rendering with ACES Filmic tone mapping for cinematic visuals right out of the box.

Core Features

Scene Objects

G3Engine supports a comprehensive set of primitive 3D objects:

Meshes
Lights
Other

Cube - Basic box geometry
Sphere - Spherical geometry with configurable detail
Cylinder - Cylindrical shapes for pillars, columns
Plane - Flat surfaces for floors, walls
Cone - Conical geometry
Torus - Donut-shaped geometry

Visual Controls

Transform Gizmos

Interactive 3D gizmos let you manipulate objects directly in the viewport:

Select an Object

Click any object in the scene to select it. Selected objects display a transform gizmo.

Choose Transform Mode

Use keyboard shortcuts to switch modes:

Press W for Translate (move)
Press E for Rotate
Press R for Scale

Manipulate

Drag the gizmo handles to transform your object. Changes apply in real-time.

The viewport uses OrbitControls for intuitive 3D navigation:

Rotate: Left-click + drag
Pan: Right-click + drag or Middle-click + drag
Zoom: Scroll wheel
Damping: Smooth camera movement with inertia

// Camera configuration from Viewport.tsx:294
<OrbitControls
  makeDefault
  enableDamping
  dampingFactor={0.1}
  minDistance={1}
  maxDistance={50}
/>

Grid and Guides

The editor provides visual guides to help with object placement:

Infinite Grid: Dynamically fades based on camera distance
Grid Spacing: 1 unit cells, 5 unit sections
Origin Marker: Visible at world (0,0,0)
Gizmo Helper: Bottom-right orientation helper showing XYZ axes

The grid and gizmo helpers are automatically hidden during Play Mode to show you exactly what players will see.

Keyboard Shortcuts

The 3D editor supports extensive keyboard shortcuts for rapid workflow:

Shortcut	Action
`W`	Switch to Translate mode
`E`	Switch to Rotate mode
`R`	Switch to Scale mode
`Space`	Toggle Play Mode
`Delete` / `Backspace`	Delete selected object
`Cmd/Ctrl + D`	Duplicate selected object
`Cmd/Ctrl + Z`	Undo
`Cmd/Ctrl + Shift + Z`	Redo

Keyboard shortcuts are disabled when typing in input fields to prevent accidental actions.

Material System

Every object has a physically-based material with customizable properties:

interface MaterialProps {
  color: string;              // Base color (hex)
  roughness: number;          // 0 = smooth, 1 = rough
  metalness: number;          // 0 = dielectric, 1 = metallic
  emissive?: string;          // Self-illumination color
  emissiveIntensity?: number; // Glow strength
  opacity?: number;           // 0 = invisible, 1 = opaque
  transparent?: boolean;      // Enable alpha blending
}

Material Examples

Plastic
Metal
Glowing

{
  color: '#6366f1',
  roughness: 0.4,
  metalness: 0.1
}

{
  color: '#94a3b8',
  roughness: 0.2,
  metalness: 0.9
}

{
  color: '#14f195',
  emissive: '#14f195',
  emissiveIntensity: 2,
  roughness: 0.3,
  metalness: 0.0
}

Lighting System

G3Engine provides cinematic lighting out of the box:

Default Scene Lighting

// From Viewport.tsx:251-254
<ambientLight intensity={0.6} />
<directionalLight 
  position={[5, 8, 5]} 
  intensity={1.2} 
  castShadow 
  shadow-mapSize={1024} 
/>
<directionalLight position={[-3, 5, -3]} intensity={0.4} />
<hemisphereLight args={['#b0c4ff', '#3a3a5c', 0.5]} />

Custom Lights

Add your own lights from the Asset Library:

Point Light

Omnidirectional light emanating from a point. Great for lamps, candles, explosions.Properties: intensity, color, position

Directional Light

Parallel light rays like the sun. Ideal for outdoor scenes.Properties: intensity, color, position, castShadow

Ambient Light

Global illumination affecting all objects equally. Prevents pure black shadows.Properties: intensity, color

Play Mode

Test your scene in real-time without leaving the editor:

Enter Play Mode

Press Space or click the Play button. The viewport overlay shows a recording indicator.

Test Gameplay

Interact with your scene. Transform gizmos and grid are hidden to show the player view.

Exit Play Mode

Press Space again or click ”■ Stop” to return to editing.

// Play mode indicator from Viewport.tsx:314-332
{isPlaying && (
  <div className="play-mode-overlay">
    <div className="play-mode-badge">
      <div className="recording-dot" />
      PLAYING
    </div>
    <button className="btn" onClick={() => togglePlay()}>
      ■ Stop
    </button>
  </div>
)}

Scene modifications are disabled in Play Mode. Exit Play Mode before editing objects.

Scene Hierarchy

All scene objects are stored in a flat array with unique IDs:

interface SceneObject {
  id: string;
  name: string;
  type: ObjectType;
  position: Vec3;    // { x, y, z }
  rotation: Vec3;    // Euler angles in radians
  scale: Vec3;       // { x, y, z }
  material: MaterialProps;
  visible: boolean;
  // Light-specific
  lightIntensity?: number;
  lightColor?: string;
}

Transform System

Transforms are applied in standard order: Position → Rotation → Scale

// From Viewport.tsx:44-48
<mesh
  position={[obj.position.x, obj.position.y, obj.position.z]}
  rotation={[obj.rotation.x, obj.rotation.y, obj.rotation.z]}
  scale={[obj.scale.x, obj.scale.y, obj.scale.z]}
  visible={obj.visible}
>

History & Undo System

The editor maintains a complete history of scene states:

Automatic snapshots after each transform, add, delete, or duplicate operation
Unlimited undo/redo via Cmd/Ctrl + Z and Cmd/Ctrl + Shift + Z
History navigation preserves exact object states including materials

// History structure from editorStore.ts:39-41
interface HistoryEntry {
  objects: SceneObject[];
}

Contact Shadows

Realistic ground contact shadows are rendered automatically:

// From Viewport.tsx:272-278
<ContactShadows
  position={[0, -0.01, 0]}
  opacity={0.4}
  scale={20}
  blur={2}
  far={4}
/>

These soft shadows ground objects in the scene without the performance cost of full shadow mapping.

Performance Optimization

The 3D editor is optimized for smooth 60fps performance:

Selective rendering: Only visible objects are rendered
Efficient state updates: Transform updates don’t trigger full re-renders
Optimized geometries: Primitives use appropriate segment counts
Shadow optimization: Contact shadows for soft shadows, shadow maps only when needed

Object Selection

Click objects to select them. Selection state controls:

Transform gizmo visibility
Inspector panel updates
Keyboard action targets

// Click handling from Viewport.tsx:23-29
const handleClick = useCallback(
  (e: any) => {
    e.stopPropagation();
    if (!isPlaying) selectObject(obj.id);
  },
  [obj.id, selectObject, isPlaying]
);

Object selection is disabled during Play Mode to allow gameplay interaction testing.

Next Steps

2D Editor

Build 2D games and UI with sprite-based editing

Visual Scripting

Add gameplay logic without coding

Asset Library

Browse and add objects to your scene

Web3 Integration

Connect blockchain features to your game

Get Started

Core Features

Guides

Web3

Overview

Core Features

Scene Objects

Visual Controls

Transform Gizmos

Camera Navigation

Grid and Guides

Keyboard Shortcuts

Material System

Material Examples

Lighting System

Default Scene Lighting

Custom Lights

Play Mode

Scene Hierarchy

Transform System

History & Undo System

Contact Shadows

Performance Optimization

Object Selection

Next Steps

2D Editor

Visual Scripting

Asset Library

Web3 Integration

Build docs developers (and LLMs) love

Get Started

Core Features

Guides

Web3

​Overview

​Core Features

​Scene Objects

​Visual Controls

​Transform Gizmos

​Camera Navigation

​Grid and Guides

​Keyboard Shortcuts

​Material System

​Material Examples

​Lighting System

​Default Scene Lighting

​Custom Lights

​Play Mode

​Scene Hierarchy

​Transform System

​History & Undo System

​Contact Shadows

​Performance Optimization

​Object Selection

​Next Steps

2D Editor

Visual Scripting

Asset Library

Web3 Integration

Build docs developers (and LLMs) love

Overview

Core Features

Scene Objects

Visual Controls

Transform Gizmos

Camera Navigation

Grid and Guides

Keyboard Shortcuts

Material System

Material Examples

Lighting System

Default Scene Lighting

Custom Lights

Play Mode

Scene Hierarchy

Transform System

History & Undo System

Contact Shadows

Performance Optimization

Object Selection

Next Steps