Skip to main content

​
System requirements

G3Engine runs in the browser and requires Node.js for local development.

Node.js

Version 20 or higher

Package manager

npm, yarn, pnpm, or bun

Browser

Chrome, Firefox, Safari, or Edge (WebGL 2.0 support)

OS

macOS, Windows, or Linux
G3Engine uses Three.js WebGL rendering. Make sure your browser supports WebGL 2.0. Most modern browsers do.

​
Clone the repository

1

Clone from GitHub

Clone the G3Engine repository to your local machine:
git clone https://github.com/your-org/g3engine.git
cd g3engine/app
The app directory contains the Next.js application.
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
This installs:
  • Next.js 16.1.6 - App Router framework
  • React 19.2.3 - UI library
  • Three.js 0.183.2 - 3D rendering engine
  • @react-three/fiber 9.5.0 - React renderer for Three.js
  • @react-three/drei 10.7.7 - Useful helpers for R3F
  • @xyflow/react 12.10.1 - Visual scripting nodes
  • Zustand 5.0.11 - State management
  • Solana Web3.js - Blockchain integration
  • TypeScript 5 - Type safety
3

Run the development server

Start the Next.js development server:
npm run dev
You should see output like:
▲ Next.js 16.1.6
- Local:        http://localhost:3000
- Network:      http://192.168.1.x:3000

✓ Ready in 2.3s
4

Open in your browser

Navigate to http://localhost:3000You’ll see the G3Engine landing page with:
  • Gradient background with glow effects
  • G3Engine logo (purple to green gradient)
  • “Start Creating” call-to-action button
  • Tech stack tags: Three.js, Solana, EVM, Zero Code
The page auto-updates as you edit files. Try modifying src/app/page.tsx to see hot module replacement in action.

​
Project structure

Understand the key directories and files: 
app/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── page.tsx           # Landing page
│   │   ├── layout.tsx         # Root layout
│   │   ├── new/               # Project wizard
│   │   ├── editor/            # 3D editor
│   │   ├── editor-2d/         # 2D editor
│   │   └── play/[gameId]/     # Game player with SSR metadata
│   ├── components/
│   │   ├── editor/            # Editor components
│   │   │   ├── Viewport.tsx   # Three.js canvas
│   │   │   ├── AssetLibrary.tsx
│   │   │   └── PublishModal.tsx
│   │   ├── layout/            # UI panels
│   │   │   ├── TopBar.tsx
│   │   │   ├── LeftPanel.tsx
│   │   │   ├── RightPanel.tsx
│   │   │   └── BottomPanel.tsx
│   │   ├── web3/              # Web3 components
│   │   └── ai/                # AI assistant
│   └── store/                 # Zustand stores
│       ├── editorStore.ts     # Scene graph state
│       ├── projectStore.ts    # Project config
│       ├── web3Store.ts       # Wallet state
│       └── aiStore.ts         # AI chat state
├── package.json
├── next.config.ts
└── tsconfig.json

​
Key dependencies explained

​
Three.js ecosystem

{
  "three": "^0.183.2",
  "@react-three/fiber": "^9.5.0",
  "@react-three/drei": "^10.7.7"
}
  • three - Core 3D rendering library
  • @react-three/fiber - React renderer for Three.js (declarative 3D)
  • @react-three/drei - Helpers like OrbitControls, TransformControls, Grid, GizmoHelper

​
Visual scripting

{
  "@xyflow/react": "^12.10.1"
}
React Flow powers the node-based visual scripting system. Nodes are compiled into executable JavaScript callbacks for the game loop.

​
Blockchain

{
  "@solana/web3.js": "^1.98.4",
  "@solana/wallet-adapter-react": "^0.15.39",
  "@solana/wallet-adapter-react-ui": "^0.9.39",
  "@solana/wallet-adapter-wallets": "^0.19.37",
  "@metaplex-foundation/js": "^0.20.1"
}
Solana wallet adapter enables seamless wallet connection. Metaplex handles NFT operations.

​
State management

{
  "zustand": "^5.0.11"
}
Zustand manages:
  • Scene graph (objects, materials, transforms)
  • Editor state (play mode, transform mode, selection)
  • History (undo/redo)
  • Web3 state (wallet connection, network)
  • AI chat state

​
Development scripts

The package.json includes these scripts: 
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

​
Available commands

Starts the Next.js development server with hot module replacement.
  • Runs on http://localhost:3000
  • Auto-reloads on file changes
  • Shows detailed error messages
  • Fast Refresh for React components
Creates an optimized production build.
  • Compiles TypeScript
  • Bundles and minifies JavaScript
  • Optimizes images and assets
  • Generates static pages where possible
  • Outputs to .next/ directory
Starts the production server.
  • Requires running npm run build first
  • Serves the optimized build
  • Runs on http://localhost:3000 by default
Runs ESLint to check code quality.
  • Uses eslint-config-next rules
  • Checks TypeScript types
  • Reports warnings and errors

​
TypeScript configuration

G3Engine uses TypeScript for type safety. The tsconfig.json is configured for Next.js: 
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
The @/* path alias lets you import like: 
import { useEditorStore } from '@/store/editorStore';
import Viewport from '@/components/editor/Viewport';

​
Troubleshooting

If port 3000 is occupied, Next.js will prompt you to use a different port. You can also specify a custom port:
npm run dev -- -p 3001
If you see “Module not found” errors, try:
  1. Delete node_modules/ and package-lock.json
  2. Run npm install again
  3. Restart the dev server
If you see “WebGL context lost” in the console:
  • Close other browser tabs using GPU
  • Update your graphics drivers
  • Try a different browser
  • Reduce scene complexity (fewer objects)
If TypeScript shows errors but the app runs:
  • VS Code may be using the wrong TypeScript version
  • Press ⌘⇧P (Mac) or Ctrl+Shift+P (Win)
  • Type “TypeScript: Select TypeScript Version”
  • Choose “Use Workspace Version”

​
Next steps

Now that your environment is set up:

Build your first scene

Follow the quickstart to create a simple 3D game

Understand the editor

Learn about panels, tools, and keyboard shortcuts

Explore the API

Deep dive into the technical architecture

Configure Web3

Set up Solana and EVM wallet integration

Build docs developers (and LLMs) love

Get started for freeTalk to us