Skip to main content
The G3Engine Asset Library provides quick access to primitive 3D shapes, lighting, and essential game objects. Add objects to your scene with a single click or drag-and-drop.

​
Overview

The Asset Library is organized into categorized cards showing all available scene objects. Each asset is instantly ready to use with sensible defaults.
All assets are procedurally generated - no external files needed. This keeps your games fast and lightweight.

​
Asset Categories

Assets are organized into three main categories:

​
Primitives

Basic 3D geometric shapes for building game worlds:
Type: boxA basic cubic mesh, perfect for:
  • Buildings and walls
  • Platforms and obstacles
  • Collectible items
  • Placeholder geometry
Default dimensions: 1×1×1 units
// From Viewport.tsx:33
case 'box': return <boxGeometry args={[1, 1, 1]} />;

​
Lights

Illumination sources for scene lighting:
Type: pointLightOmnidirectional light emanating from a point in space.Use cases:
  • Lamps and light bulbs
  • Candles and torches
  • Explosions and muzzle flashes
  • Collectible glow effects
Default properties:
{
  lightIntensity: 1,
  lightColor: '#ffffff',
  position: { x: 0, y: 0.5, z: 0 },
  castShadow: true
}
Visual helper: Wireframe sphere (visible in edit mode only)
Light helpers (wireframe indicators) are automatically hidden during Play Mode.

​
Other

Type: cameraCamera object for custom viewpoints.Future feature: Multiple camera support for:
  • Cutscenes
  • Security camera views
  • Split-screen multiplayer
  • Replay systems
Camera objects are currently non-functional. The viewport uses a default perspective camera.

​
Adding Assets to Scene

There are two ways to add assets:

​
Method 1: Click to Add

1

Open Asset Library

The asset library is typically in the left panel of the editor.
2

Click Asset Card

Click any asset card. The object is instantly added to the scene at origin (0, 0.5, 0).
3

Object Auto-Selected

The new object is automatically selected with transform gizmo visible.
4

Position Object

Use transform gizmos or inspector panel to position your object.
// From AssetLibrary.tsx:94-100
<div
  key={asset.type}
  className="asset-card"
  onClick={() => addObject(asset.type)}
>
  <div className="asset-icon">{asset.icon}</div>
  <div className="asset-label">{asset.label}</div>
</div>

​
Method 2: Drag and Drop

1

Click and Hold

Click and hold on any asset card.
2

Drag to Viewport

Drag the asset into the 3D viewport.
3

Release to Place

Release to add the object (currently at default position - drag-to-position coming soon).
// Drag handling from AssetLibrary.tsx:98-99
draggable
onDragEnd={() => addObject(asset.type)}
Drag-and-drop currently adds objects at default position. Visual drag-to-place is a planned enhancement.

​
Asset Interface

Each asset card displays: 
interface AssetDef {
  type: ObjectType;      // Internal type identifier
  label: string;         // Display name
  icon: React.ReactNode; // SVG icon
  category: 'primitives' | 'lights' | 'other';
}

​
Asset Icons

All icons are custom SVG components:
  • Cube Icon: 3D box wireframe
  • Sphere Icon: Circle with latitude/longitude lines
  • Cylinder Icon: Ellipse top with vertical sides
  • Plane Icon: Stacked horizontal lines
  • Cone Icon: Triangle with ellipse base
  • Torus Icon: Ellipse with inner cutout
  • Light Icon: Sun rays icon
  • Camera Icon: Camera body with lens
// Example icon from AssetLibrary.tsx:8-12
const CubeIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
       stroke="currentColor" strokeWidth="1.5">
    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8..." />
  </svg>
);

​
Default Object Properties

When added, objects receive these defaults: 
// From editorStore.ts:108-134
function makeDefaultObject(type: ObjectType, index: number): SceneObject {
  const base: SceneObject = {
    id: uuidv4(),
    name: `${OBJECT_NAMES[type]} ${index}`,
    type,
    position: { x: 0, y: type === 'plane' ? 0 : 0.5, z: 0 },
    rotation: { x: 0, y: 0, z: 0 },
    scale: { x: 1, y: 1, z: 1 },
    material: {
      color: '#6366f1',      // Indigo blue
      roughness: 0.4,
      metalness: 0.1,
    },
    visible: true,
  };
  
  // Special cases for lights and planes
  if (type === 'pointLight' || type === 'directionalLight' || type === 'ambientLight') {
    base.lightIntensity = 1;
    base.lightColor = '#ffffff';
  }
  
  if (type === 'plane') {
    base.scale = { x: 5, y: 5, z: 1 };
    base.rotation = { x: -Math.PI / 2, y: 0, z: 0 };
    base.material.color = '#2a2a3e';
  }
  
  return base;
}

​
Object Naming

Objects are auto-named with incrementing counters: 
const OBJECT_NAMES: Record<ObjectType, string> = {
  box: 'Cube',
  sphere: 'Sphere',
  cylinder: 'Cylinder',
  plane: 'Plane',
  cone: 'Cone',
  torus: 'Torus',
  pointLight: 'Point Light',
  directionalLight: 'Directional Light',
  ambientLight: 'Ambient Light',
  camera: 'Camera',
};

// Results in: "Cube 1", "Cube 2", "Sphere 1", etc.

​
History Integration

Adding objects automatically creates history snapshots: 
// From editorStore.ts:150-162
addObject: (type) => {
  objectCounter++;
  const obj = makeDefaultObject(type, objectCounter);
  set((s) => {
    const newObjects = [...s.objects, obj];
    return {
      objects: newObjects,
      selectedObjectId: obj.id,
      // Add to history
      history: [...s.history.slice(0, s.historyIndex + 1), { objects: newObjects }],
      historyIndex: s.historyIndex + 1,
    };
  });
},
This means every asset addition:
  • Can be undone with Cmd/Ctrl + Z
  • Can be redone with Cmd/Ctrl + Shift + Z
  • Preserves exact object state

​
Asset Grid Layout

The asset library uses a responsive grid layout: 
// Simplified component structure
<div className="asset-grid">
  {ASSETS.map((asset) => (
    <div className="asset-card">
      <div className="asset-icon">{asset.icon}</div>
      <div className="asset-label">{asset.label}</div>
    </div>
  ))}
</div>
The grid typically displays:
  • 2-3 columns on narrow panels
  • Icons centered above labels
  • Hover effects for interactivity
  • Clear category grouping

​
Type Definitions

All available object types: 
// From editorStore.ts:8
export type ObjectType = 
  | 'box' 
  | 'sphere' 
  | 'cylinder' 
  | 'plane' 
  | 'cone' 
  | 'torus' 
  | 'pointLight' 
  | 'directionalLight' 
  | 'ambientLight' 
  | 'camera';

​
Extending the Library

To add new assets to the library:
1

Add to ObjectType

Update the type union in editorStore.ts:
export type ObjectType = ... | 'yourNewType';
2

Create Geometry

Add geometry case in Viewport.tsx:
case 'yourNewType': return <yourGeometry args={[...]} />;
3

Add to ASSETS

Include in asset library array:
{ 
  type: 'yourNewType', 
  label: 'Your Object', 
  icon: <YourIcon />, 
  category: 'primitives' 
}
4

Set Defaults

Configure in makeDefaultObject() if special handling needed.

​
Performance Considerations

The Asset Library is optimized for instant loading:
  • Procedural generation: No external asset downloads
  • Lazy rendering: Only visible assets rendered
  • Efficient primitives: Optimized segment counts
  • Reusable geometries: Three.js automatically instances repeated shapes
All primitives use BufferGeometry for optimal GPU performance.

​
Next Steps

3D Editor

Learn how to manipulate assets in the 3D viewport

Visual Scripting

Add behavior and interactivity to your assets

2D Editor

Create 2D sprites and UI elements

Web3 Integration

Turn assets into tradeable NFTs

Build docs developers (and LLMs) love

Get started for freeTalk to us