Skip to main content

​
Get started in 5 minutes

This guide walks you through creating your first interactive 3D scene using G3Engine. You’ll learn the core workflow: adding objects, transforming them, and testing your scene in play mode.
Make sure you’ve completed the installation steps before starting this guide.
1

Open the app

Navigate to http://localhost:3000 in your browser. You’ll see the G3Engine landing page.Click Start Creating to open the project wizard.
2

Create a new project

The project wizard guides you through 4 steps:
  1. Choose dimension: Select 3D Game for this tutorial
  2. Pick a genre: Select Platformer
  3. Choose template: Select Blank Canvas to start from scratch
  4. Name your project: Enter “My First Game” and click Create Project
You’ll be taken to the editor at /editor.
3

Understand the editor layout

The editor follows a canvas-first design with floating panels:
  • Top bar: Play/Stop, transform tools, undo/redo, Web3 toggle, and Publish
  • Left panel: Scene graph showing all objects in your scene
  • Right panel: Inspector with properties of the selected object
  • Bottom panel: Asset library with primitives, lights, and cameras
  • Center: The 3D viewport with orbit controls
The viewport uses Three.js with an infinite grid, contact shadows, and default lighting to help you see objects clearly.
4

Add a ground plane

In the bottom panel (Asset Library), click the Plane primitive.A plane will appear at the origin. The plane is automatically:
  • Rotated 90° on the X-axis to lie flat
  • Scaled to 5x5 units
  • Given a dark charcoal material (#2a2a3e)
This serves as your ground.
5

Add a player cube

Click the Cube primitive in the Asset Library.A cube appears at position (0, 0.5, 0) (slightly above the ground). It’s automatically selected, showing transform gizmos.
6

Transform the cube

With the cube selected, you can transform it using:Keyboard shortcuts:
  • Press W for move/translate mode
  • Press E for rotate mode
  • Press R for scale mode
Transform gizmo:
  • Drag the red/green/blue arrows to move
  • Drag the rotation rings to rotate
  • Drag the scale handles to resize
Inspector panel:
  • Adjust precise X/Y/Z values in the right panel
  • Change the material color, roughness, and metalness
Try changing the cube’s color to purple (#8b5cf6) using the color picker.
7

Add a light

Click Point Light in the Asset Library.A point light appears at the origin. It renders as a small wireframe sphere in edit mode.Use the move tool (W) to position it above the cube at approximately (0, 3, 0).
Lights are invisible in play mode. The default scene already has ambient and directional lights for visibility.
8

Duplicate the cube

Select the cube and press ⌘D (or Ctrl+D on Windows).A duplicate appears offset by 1 unit on the X-axis. Move it to create a simple platform layout.
You can also duplicate by selecting an object and clicking the duplicate button in the inspector.
9

Test in play mode

Press the Play button in the top bar (or press Space).The UI panels slide away and you enter play mode. You’ll see:
  • A “PLAYING” badge with a red recording dot
  • A Stop button to exit play mode
  • Your scene rendered without grid or gizmos
You can still orbit the camera to inspect your scene from different angles.Press Stop (or Space again) to return to edit mode.
10

Try undo/redo

Make some changes (move objects, change colors, add primitives).Press ⌘Z to undo. Press ⌘⇧Z to redo.The editor uses Zustand to maintain a history stack of all changes.

​
Understanding the scene graph

Every object you add appears in the left panel under the scene graph. Objects are listed with their type and name:
  • Cube 1
  • Cube 2 Copy
  • Plane 1
  • Point Light 1
Click any object in the scene graph to select it. The inspector on the right updates to show its properties.

​
Understanding the transform system

G3Engine uses TransformControls from @react-three/drei to enable visual manipulation: 
import { TransformControls } from '@react-three/drei';

function TransformGizmo() {
  const { objects, selectedObjectId, transformMode } = useEditorStore();
  const selected = objects.find((o) => o.id === selectedObjectId);
  
  if (!selected || selected.type.includes('Light')) return null;
  
  return (
    <TransformControls
      mode={transformMode}
      position={[selected.position.x, selected.position.y, selected.position.z]}
      rotation={[selected.rotation.x, selected.rotation.y, selected.rotation.z]}
      scale={[selected.scale.x, selected.scale.y, selected.scale.z]}
    >
      <mesh visible={false}>
        <boxGeometry args={[0.001, 0.001, 0.001]} />
      </mesh>
    </TransformControls>
  );
}
When you drag a gizmo, the updateTransform action updates the object in the Zustand store, and the change is pushed to the history stack.

​
Scene serialization

Your entire scene is stored as a JSON object in Zustand: 
exportScene: () => {
  const { objects } = get();
  return JSON.stringify({ version: 1, objects }, null, 2);
}
This JSON can be exported, saved to a file, or uploaded to Arweave when you publish your game.

​
Keyboard shortcuts reference

  • W - Translate (move) mode
  • E - Rotate mode
  • R - Scale mode
  • Space - Toggle play/stop
  • ⌘Z (Mac) / Ctrl+Z (Win) - Undo
  • ⌘⇧Z (Mac) / Ctrl+Shift+Z (Win) - Redo
  • Delete or Backspace - Remove selected object
  • ⌘D (Mac) / Ctrl+D (Win) - Duplicate selected object

​
Next steps

Add visual scripting

Connect nodes to add game logic and interactivity

Enable Web3

Add wallet connection and blockchain features

Customize materials

Learn about PBR materials, roughness, and metalness

Publish your game

Deploy to Twitter, Telegram, or the web

Build docs developers (and LLMs) love

Get started for freeTalk to us