react-three-game 0.0.3 → 0.0.5

package/.github/workflows/nextjs.yml

@@ -0,0 +1,99 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            docs/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install root dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build library
+        run: npm run build
+      - name: Install docs dependencies
+        working-directory: ./docs
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build Next.js docs
+        working-directory: ./docs
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./docs/out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/README.md

@@ -1,7 +1,6 @@
 # react-three-game
 
-> **The first 3D game engine designed for AI-native development.**  
-> Generate entire game scenes from natural language. Zero boilerplate, 100% declarative, fully typesafe.
+Component-based 3D game engine where everything is JSON. Built on React Three Fiber + WebGPU.
 
 ```bash
 npm i react-three-game @react-three/fiber three
@@ -11,39 +10,11 @@ npm i react-three-game @react-three/fiber three
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-19-blue.svg)](https://react.dev/)
 
----
+## Core Principle
 
-## 🤖 Why This Exists
-
-**Traditional 3D engines force you to write imperative code.** Unity requires C# classes. Unreal needs Blueprints. Three.js demands manual scene graph manipulation. **AI agents struggle with all of these.**
-
-**react-three-game is different:**
-- ✅ **Everything is JSON** - AI can generate complete scenes without writing code
-- ✅ **Component-based architecture** - Like Unity, but declarative and serializable
-- ✅ **Visual prefab editor** - Export scenes as versionable JSON files
-- ✅ **Built on React Three Fiber** - Leverage the entire React ecosystem
-- ✅ **WebGPU renderer** - Cutting-edge graphics with Three.js r181+
-
-### The Problem We Solve
-
-```jsx
-// ❌ Traditional Three.js - Imperative, verbose, AI-hostile
-const scene = new THREE.Scene();
-const geometry = new THREE.BoxGeometry();
-const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
-const cube = new THREE.Mesh(geometry, material);
-cube.position.set(0, 1, 0);
-scene.add(cube);
-
-// Physics? Even worse...
-const body = new CANNON.Body({ mass: 1 });
-body.addShape(new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)));
-world.addBody(body);
-// Now sync transforms every frame... 😱
-```
+Scenes are JSON prefabs. Components are registered modules. Hierarchy is declarative.
 
 ```jsx
-// ✅ react-three-game - Declarative, concise, AI-friendly
 <PrefabRoot data={{
   root: {
     id: "cube",
@@ -57,19 +28,12 @@ world.addBody(body);
 }} />
 ```
 
-**Result:** AI agents can generate this JSON structure. Version control it. Modify it. No code generation required.
-
----
-
-## 🚀 Quick Start
+## Quick Start
 
-### Installation
 ```bash
 npm install react-three-game @react-three/fiber @react-three/rapier three
 ```
 
-### Your First Scene (30 seconds)
-
 ```jsx
 import { GameCanvas, PrefabRoot } from 'react-three-game';
 
@@ -81,19 +45,12 @@ export default function App() {
         id: "scene",
         root: {
           id: "root",
-          enabled: true,
-          visible: true,
           components: {
-            transform: {
-              type: "Transform",
-              properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
-            }
+            transform: { type: "Transform", properties: { position: [0, 0, 0] } }
           },
           children: [
             {
               id: "floor",
-              enabled: true,
-              visible: true,
               components: {
                 transform: { type: "Transform", properties: { position: [0, -1, 0] } },
                 geometry: { type: "Geometry", properties: { geometryType: "box", args: [10, 0.5, 10] } },
@@ -103,8 +60,6 @@ export default function App() {
             },
             {
               id: "player",
-              enabled: true,
-              visible: true,
               components: {
                 transform: { type: "Transform", properties: { position: [0, 2, 0] } },
                 geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
@@ -120,58 +75,27 @@ export default function App() {
 }
 ```
 
-**That's it.** Physics, rendering, transforms - all declarative. No boilerplate.
-
----
-
-## 🎮 Core Concepts
-
-### 1. GameObjects & Components
-
-Every object in your scene is a `GameObject` with modular components:
+## GameObject Structure
 
 ```typescript
 interface GameObject {
-  id: string;              // Unique identifier
-  enabled: boolean;        // Active in scene?
-  visible: boolean;        // Rendered?
+  id: string;
+  enabled?: boolean;
+  visible?: boolean;
   components: {
-    transform?: TransformComponent;  // Position/rotation/scale
-    geometry?: GeometryComponent;    // Box, sphere, plane, etc.
-    material?: MaterialComponent;    // Color, textures, PBR properties
-    physics?: PhysicsComponent;      // Rapier physics body
-    model?: ModelComponent;          // Load GLB/FBX models
-    // Add your own!
+    transform?: TransformComponent;
+    geometry?: GeometryComponent;
+    material?: MaterialComponent;
+    physics?: PhysicsComponent;
+    model?: ModelComponent;
   };
-  children?: GameObject[]; // Nested hierarchy
+  children?: GameObject[];
 }
 ```
 
-**This is Unity/Unreal's ECS pattern, but 100% React.**
-
-### 2. Visual Prefab Editor
-
-Run the built-in editor:
-```jsx
-import { PrefabEditor } from 'react-three-game';
-
-<PrefabEditor />
-```
-
-- 🎨 Drag-and-drop 3D models
-- 🔧 Edit transforms with gizmos
-- 📦 Add/remove components
-- 💾 Export JSON files
-- ▶️ Toggle edit/play mode
-
-**Pro tip:** Use this to generate scenes, then let AI modify the JSON.
-
-### 3. Component System
-
-Create custom components in minutes:
+## Custom Components
 
 ```tsx
-// MyLaserComponent.tsx
 import { Component } from 'react-three-game';
 
 const LaserComponent: Component = {
@@ -188,137 +112,23 @@ const LaserComponent: Component = {
   defaultProperties: { damage: 10 }
 };
 
-export default LaserComponent;
-```
-
-Register it once, use everywhere:
-```typescript
+// Register
 import { registerComponent } from 'react-three-game';
 registerComponent(LaserComponent);
 ```
 
----
-
-## 🏗️ Architecture
-
-### GameObject Hierarchy
-```
-Scene Root
-├─ Player (Dynamic Physics)
-│  ├─ Camera
-│  └─ Weapon (Model)
-├─ Enemies (Instanced)
-│  ├─ Enemy_01
-│  ├─ Enemy_02
-│  └─ Enemy_03
-└─ Environment
-   ├─ Ground (Fixed Physics)
-   └─ Obstacles
-```
-
-### Transform Math (Critical!)
-- **Local transforms** stored in JSON (relative to parent)
-- **World transforms** computed at runtime (for rendering)
-- **TransformControls** use world space, then convert back to local
-- Helper: `computeParentWorldMatrix()` handles the math
-
-### Instancing System
-Render 1000s of objects efficiently:
-```json
-{
-  "components": {
-    "model": { 
-      "type": "Model", 
-      "properties": { 
-        "filename": "tree.glb",
-        "instanced": true  // ← Magic flag
-      }
-    }
-  }
-}
-```
-Behind the scenes: drei's `<Merged>` + `<InstancedRigidBodies>` for physics.
-
----
-
-## 🎯 Real-World Example
-
-Here's what a complete multiplayer game looks like (coming from production code):
-
-```jsx
-import { GameCanvas, PrefabRoot } from 'react-three-game';
-import { Physics } from '@react-three/rapier';
-
-export default function Game() {
-  return (
-    <GameCanvas>
-      <Physics>
-        {/* Load entire scene from JSON */}
-        <PrefabRoot data={levelData} />
-        
-        {/* Mix with React components */}
-        <Player controllable />
-        <Enemy position={[5, 0, -5]} />
-        <MovingPlatform path={[[0,0,0], [10,0,0]]} />
-      </Physics>
-      
-      <ambientLight intensity={0.5} />
-      <directionalLight castShadow position={[10, 10, 5]} />
-    </GameCanvas>
-  );
-}
-```
-
-**The power:** That `levelData` JSON can be:
-- 🤖 Generated by AI from a prompt
-- 🎨 Created in the visual editor
-- 🔄 Version controlled in git
-- 🌐 Loaded from a CMS
-- 🧩 Composed from smaller prefabs
-
----
-
-## 📦 What's Included
-
-### Core Exports
-
-```typescript
-import {
-  // Rendering
-  GameCanvas,        // WebGPU Canvas wrapper
-  PrefabRoot,        // Scene renderer from JSON
-  PrefabEditor,      // Visual editor component
-  
-  // Utils
-  loadModel,         // GLB/FBX loader with Draco
-  registerComponent, // Add custom components
-  getComponent,      // Query component registry
-  
-  // Types
-  Prefab,           // Prefab JSON structure
-  GameObject,       // Scene node type
-  Component,        // Component interface
-} from 'react-three-game';
-```
-
-### Built-in Components
+## Built-in Components
 
-| Component | Properties | Description |
-|-----------|-----------|-------------|
-| **Transform** | `position`, `rotation`, `scale` | 3D position/orientation (always present) |
-| **Geometry** | `geometryType`, `args` | Box, sphere, plane, cylinder, etc. |
-| **Material** | `color`, `texture`, `metalness`, `roughness` | PBR materials with texture support |
-| **Physics** | `type` (`dynamic`/`fixed`) | Rapier rigid body |
-| **Model** | `filename`, `instanced` | Load GLB/FBX, toggle GPU instancing |
-| **SpotLight** | `color`, `intensity`, `angle`, `penumbra` | Dynamic lighting |
+| Component | Properties |
+|-----------|-----------|
+| **Transform** | `position: [x,y,z]`, `rotation: [x,y,z]`, `scale: [x,y,z]` |
+| **Geometry** | `geometryType: "box"\|"sphere"\|"plane"\|"cylinder"`, `args: number[]` |
+| **Material** | `color: string`, `texture?: string`, `metalness?: number`, `roughness?: number` |
+| **Physics** | `type: "dynamic"\|"fixed"` |
+| **Model** | `filename: string`, `instanced?: boolean` |
+| **SpotLight** | `color: string`, `intensity: number`, `angle: number`, `penumbra: number` |
 
-**Extending:** Create custom components in 20 lines - see "Component System" above.
-
----
-
-## 🎨 Visual Editor
-
-Import and use the prefab editor:
+## Prefab Editor
 
 ```jsx
 import { PrefabEditor } from 'react-three-game';
@@ -328,337 +138,154 @@ export default function EditorPage() {
 }
 ```
 
-### Editor Features
-- **📥 Import/Export** - Load/save JSON prefabs
-- **🎮 Edit/Play Toggle** - Test physics in real-time
-- **🔧 Transform Gizmos** - Translate/Rotate/Scale (T/R/S keys)
-- **🌳 Scene Tree** - Drag to reorder, click to select
-- **📋 Inspector** - Edit component properties
-- **➕ Add Components** - Dropdown to attach new behaviors
-
-### Workflow
-1. Create scene in editor
-2. Export JSON
-3. Load in game: `<PrefabRoot data={require('./level1.json')} />`
-4. Or generate variations with AI by modifying the JSON
-
----
+Transform gizmos (T/R/S keys), drag-to-reorder tree, import/export JSON, edit/play toggle.
 
-## 🚀 Advanced Patterns
+## Implementation Details
 
-### Loading External Prefabs
-
-```jsx
-import levelData from './prefabs/arena.json';
-
-<PrefabRoot data={levelData} />
-```
-
-### Mixing Prefabs with React Components
-
-```jsx
-<Physics>
-  <PrefabRoot data={environment} /> {/* Static level geometry */}
-  <Player />                          {/* Dynamic player logic */}
-  <AIEnemies />                       {/* Procedural spawning */}
-</Physics>
-```
-
-### Dynamic Instancing (1000+ Objects)
+### Transform Hierarchy
+- Local transforms stored in JSON (relative to parent)
+- World transforms computed at runtime via matrix multiplication
+- `computeParentWorldMatrix(root, targetId)` traverses tree for parent's world matrix
+- TransformControls extract world matrix → compute parent inverse → derive new local transform
 
+### GPU Instancing
+Enable with `model.properties.instanced = true`:
 ```json
 {
-  "id": "forest",
-  "children": [
-    {
-      "id": "tree-1",
-      "components": {
-        "model": { 
-          "type": "Model", 
-          "properties": { 
-            "filename": "tree.glb",
-            "instanced": true  // ← Automatic GPU instancing
-          }
-        },
-        "physics": { "type": "Physics", "properties": { "type": "fixed" } }
+  "components": {
+    "model": { 
+      "type": "Model", 
+      "properties": { 
+        "filename": "tree.glb",
+        "instanced": true
       }
     }
-    // Repeat 1000x - only renders once internally
-  ]
+  }
 }
 ```
+Uses drei's `<Merged>` + `<InstancedRigidBodies>` for physics. World-space transforms, terminal nodes.
 
-### Custom Components (Real Example)
-
-```tsx
-// LaserBeamComponent.tsx
-import { Component } from 'react-three-game';
-import { Line } from '@react-three/drei';
-
-const LaserBeam: Component = {
-  name: 'LaserBeam',
-  
-  Editor: ({ component, onUpdate }) => (
-    <>
-      <label>Damage</label>
-      <input 
-        type="number" 
-        value={component.properties.damage}
-        onChange={e => onUpdate({ damage: +e.target.value })}
-      />
-      <label>Color</label>
-      <input 
-        type="color"
-        value={component.properties.color}
-        onChange={e => onUpdate({ color: e.target.value })}
-      />
-    </>
-  ),
-  
-  View: ({ properties }) => (
-    <Line
-      points={[[0, 0, 0], [0, 0, -10]]}
-      color={properties.color}
-      lineWidth={3}
-    />
-  ),
-  
-  defaultProperties: {
-    damage: 25,
-    color: '#ff0000'
-  }
-};
+### Model Loading
+- Supports GLB/GLTF (Draco compression) and FBX
+- Singleton loaders in `modelLoader.ts`
+- Draco decoder from `https://www.gstatic.com/draco/v1/decoders/`
+- Auto-loads when `model.properties.filename` detected
 
-export default LaserBeam;
-```
-
-Then register it:
+### WebGPU Renderer
 ```tsx
-import { registerComponent } from 'react-three-game';
-import LaserBeam from './components/LaserBeam';
-
-registerComponent(LaserBeam);
+<Canvas gl={async ({ canvas }) => {
+  const renderer = new WebGPURenderer({ canvas, shadowMap: true });
+  await renderer.init(); // Required
+  return renderer;
+}}>
 ```
+Use `MeshStandardNodeMaterial` not `MeshStandardMaterial`.
 
-Now it's available in the editor dropdown AND can be serialized in prefab JSON!
-
----
-
-## 🤝 Integrations
-
-### React Three Fiber Ecosystem
-All `@react-three/drei` helpers work seamlessly:
+## Patterns
 
+### Load External Prefabs
 ```jsx
-import { OrbitControls, Sky, ContactShadows } from '@react-three/drei';
-
-<GameCanvas>
-  <Sky />
-  <OrbitControls />
-  <PrefabRoot data={scene} />
-  <ContactShadows />
-</GameCanvas>
+import levelData from './prefabs/arena.json';
+<PrefabRoot data={levelData} />
 ```
 
-### Physics (@react-three/rapier)
-Wrap your scene in `<Physics>`:
-
+### Mix with React Components
 ```jsx
-import { Physics } from '@react-three/rapier';
-
-<Physics gravity={[0, -9.8, 0]}>
-  <PrefabRoot data={level} />
+<Physics>
+  <PrefabRoot data={environment} />
+  <Player />
+  <AIEnemies />
 </Physics>
 ```
 
-Components with `physics` property automatically get rigid bodies.
-
----
-
-## 🎯 For AI Agents
-
-### Prompt Templates
-
-**Generate a complete scene:**
-```
-Create a react-three-game prefab JSON for a platformer level with:
-- A ground plane (10x10, fixed physics, grass texture)
-- 5 floating platforms (dynamic physics)
-- A player spawn point at [0, 5, 0]
-- 3 collectible coins using sphere geometry
-```
-
-**Modify existing scenes:**
-```
-Take this prefab JSON and add:
-- A spotlight pointing at the player spawn
-- Convert all "box" geometry to "sphere"
-- Scale all objects by 1.5x
-```
-
-**Generate component variations:**
-```
-Create 10 enemy prefab variants by:
-- Randomizing position within bounds [[-10,10], [0,5], [-10,10]]
-- Varying scale from 0.8 to 1.2
-- Using colors from palette: ["#ff6b6b", "#ee5a6f", "#c44569"]
+### Update Prefab Nodes
+```typescript
+function updatePrefabNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject {
+  if (root.id === id) return update(root);
+  if (root.children) {
+    return { ...root, children: root.children.map(child => updatePrefabNode(child, id, update)) };
+  }
+  return root;
+}
 ```
 
-### JSON Structure Reference
+## AI Agent Reference
 
+### Prefab JSON Schema
 ```typescript
 {
   "id": "unique-id",
   "root": {
     "id": "root-id",
-    "enabled": true,
-    "visible": true,
     "components": {
       "transform": {
         "type": "Transform",
         "properties": {
-          "position": [x, y, z],      // Numbers in world units
-          "rotation": [x, y, z],      // Radians
-          "scale": [x, y, z]          // Multipliers
+          "position": [x, y, z],      // world units
+          "rotation": [x, y, z],      // radians
+          "scale": [x, y, z]          // multipliers
         }
       },
       "geometry": {
         "type": "Geometry",
         "properties": {
           "geometryType": "box" | "sphere" | "plane" | "cylinder" | "cone" | "torus",
-          "args": [/* geometry-specific arguments */]
+          "args": [/* geometry-specific */]
         }
       },
       "material": {
         "type": "Material",
         "properties": {
-          "color": "#rrggbb" | "colorname",
-          "texture": "/path/to/texture.jpg",    // Optional
-          "metalness": 0.0-1.0,                 // Optional
-          "roughness": 0.0-1.0                  // Optional
+          "color": "#rrggbb",
+          "texture": "/path/to/texture.jpg",
+          "metalness": 0.0-1.0,
+          "roughness": 0.0-1.0
         }
       },
       "physics": {
         "type": "Physics",
         "properties": {
-          "type": "dynamic" | "fixed"           // Dynamic = moves, Fixed = static
+          "type": "dynamic" | "fixed"
         }
       },
       "model": {
         "type": "Model",
         "properties": {
           "filename": "/models/asset.glb",
-          "instanced": true                     // Optional: GPU instancing
+          "instanced": true
         }
       }
     },
-    "children": [/* Recursive GameObject array */]
+    "children": [/* recursive GameObjects */]
   }
 }
 ```
 
----
-
-## 🛠️ Development
+## Development
 
-### Local Setup
 ```bash
 git clone https://github.com/prnthh/react-three-game.git
 cd react-three-game
 npm install
-npm run dev  # Runs tsc --watch + Next.js docs site
+npm run dev     # tsc --watch + Next.js docs
+npm run build   # TypeScript → /dist
+npm publish     # publish to npm
 ```
 
-### Project Structure
+Project structure:
 ```
-/src              → Library source (exports to npm)
-  /shared         → GameCanvas (WebGPU wrapper)
+/src              → library source
+  /shared         → GameCanvas
   /tools
-    /prefabeditor → Visual editor + PrefabRoot renderer
-/docs             → Next.js documentation site
-  /app            → Demo pages
+    /prefabeditor → editor + PrefabRoot
+/docs             → Next.js site
+  /app            → demo pages
 ```
 
-### Building
-```bash
-npm run build    # Compile TypeScript → /dist
-npm publish      # Publish to npm
-```
-
----
-
-## 🌟 Roadmap
+## Tech Stack
 
-- [x] Core prefab system
-- [x] Visual editor
-- [x] Component registry
-- [x] GPU instancing
-- [x] Physics integration
-- [ ] Input system (keyboard/gamepad/touch) - **Coming Soon**
-- [ ] Multiplayer primitives (WebRTC sync)
-- [ ] Animation system (state machines)
-- [ ] Audio components (spatial sound)
-- [ ] Particle effects
-- [ ] AI behavior trees (as JSON!)
+React 19 • Three.js r181 • TypeScript 5 • WebGPU • Rapier Physics
 
----
-
-## 🤖 Why Developers AND AI Love This
-
-### For Developers
-- ✅ **Skip the boilerplate** - No manual scene graph management
-- ✅ **React patterns** - Use hooks, context, state like normal React
-- ✅ **Visual debugging** - See and edit your scene in real-time
-- ✅ **Type safety** - Full TypeScript support
-- ✅ **Hot reload** - Changes reflect instantly
-
-### For AI Agents
-- ✅ **Pure data** - No imperative code to generate
-- ✅ **JSON schema** - Structured, validatable format
-- ✅ **Compositional** - Build complex scenes from simple primitives
-- ✅ **Version controllable** - Git-friendly text files
-- ✅ **Deterministic** - Same JSON = same scene every time
-
----
-
-## 📚 Examples
-
-Check out `/docs/app/demo` for live examples:
-- Basic scene with physics
-- Model loading and instancing
-- Custom component creation
-- Multiplayer game prototype
-
----
-
-## 🤝 Contributing
-
-This is an **AI-first** project. We welcome:
-- New built-in components
-- Documentation improvements
-- Example scenes/games
-- AI prompt templates
-- Bug reports
-
-See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
-
----
-
-## 📄 License
+## License
 
 MIT © [prnth](https://github.com/prnthh)
-
----
-
-## 💬 Community
-
-- 🐦 Twitter: [@prnth](https://twitter.com/prnth)
-- 💼 GitHub Issues: [Report bugs](https://github.com/prnthh/react-three-game/issues)
-- 💡 Discussions: [Share ideas](https://github.com/prnthh/react-three-game/discussions)
-
----
-
-**Built with:** React 19 • Three.js r181 • TypeScript 5 • WebGPU • Rapier Physics
-
-**Status:** Alpha v0.0.1 - API may change  
-**AI Prompt to Share:** "Build me a 3D game using react-three-game with [your features]"

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { default as GameCanvas } from './shared/GameCanvas';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export { default as AssetViewerPage, TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas } from './tools/assetviewer/page';

package/dist/index.js

@@ -2,3 +2,4 @@ export { default as GameCanvas } from './shared/GameCanvas';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export { default as AssetViewerPage, TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas } from './tools/assetviewer/page';

package/dist/tools/assetviewer/page.d.ts

@@ -1,21 +1,26 @@
-export default function AssetViewerPage(): import("react/jsx-runtime").JSX.Element;
+export default function AssetViewerPage({ basePath }?: {
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element;
 interface TextureListViewerProps {
     files: string[];
     selected?: string;
     onSelect: (file: string) => void;
+    basePath?: string;
 }
-export declare function TextureListViewer({ files, selected, onSelect }: TextureListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextureListViewer({ files, selected, onSelect, basePath }: TextureListViewerProps): import("react/jsx-runtime").JSX.Element;
 interface ModelListViewerProps {
     files: string[];
     selected?: string;
     onSelect: (file: string) => void;
+    basePath?: string;
 }
-export declare function ModelListViewer({ files, selected, onSelect }: ModelListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModelListViewer({ files, selected, onSelect, basePath }: ModelListViewerProps): import("react/jsx-runtime").JSX.Element;
 interface SoundListViewerProps {
     files: string[];
     selected?: string;
     onSelect: (file: string) => void;
+    basePath?: string;
 }
-export declare function SoundListViewer({ files, selected, onSelect }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SoundListViewer({ files, selected, onSelect, basePath }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
 export declare function SharedCanvas(): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tools/assetviewer/page.js

@@ -49,27 +49,28 @@ function useInView() {
     }, []);
     return { ref, isInView };
 }
-export default function AssetViewerPage() {
+export default function AssetViewerPage({ basePath = "" } = {}) {
     const [textures, setTextures] = useState([]);
     const [models, setModels] = useState([]);
     const [sounds, setSounds] = useState([]);
     const [loading, setLoading] = useState(true);
     useEffect(() => {
+        const base = basePath ? `${basePath}/` : '';
         Promise.all([
-            fetch('/textures/manifest.json').then(r => r.json()),
-            fetch('/models/manifest.json').then(r => r.json()),
-            fetch('/sound/manifest.json').then(r => r.json()).catch(() => [])
+            fetch(`/${base}textures/manifest.json`).then(r => r.json()),
+            fetch(`/${base}models/manifest.json`).then(r => r.json()),
+            fetch(`/${base}sound/manifest.json`).then(r => r.json()).catch(() => [])
         ]).then(([textureData, modelData, soundData]) => {
             setTextures(textureData);
             setModels(modelData);
             setSounds(soundData);
             setLoading(false);
         });
-    }, []);
+    }, [basePath]);
     if (loading) {
         return _jsx("div", { className: "p-4 text-gray-300", children: "Loading manifests..." });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "p-2 text-gray-300 overflow-y-auto h-screen text-sm", children: [_jsx("h1", { className: "text-lg mb-2 font-bold", children: "Asset Viewer" }), _jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Textures (", textures.length, ")"] }), _jsx(TextureListViewer, { files: textures, onSelect: (file) => console.log('Selected texture:', file) }), _jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Models (", models.length, ")"] }), _jsx(ModelListViewer, { files: models, onSelect: (file) => console.log('Selected model:', file) }), sounds.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Sounds (", sounds.length, ")"] }), _jsx(SoundListViewer, { files: sounds, onSelect: (file) => console.log('Selected sound:', file) })] }))] }), _jsx(SharedCanvas, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "p-2 text-gray-300 overflow-y-auto h-screen text-sm", children: [_jsx("h1", { className: "text-lg mb-2 font-bold", children: "Asset Viewer" }), _jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Textures (", textures.length, ")"] }), _jsx(TextureListViewer, { files: textures, basePath: basePath, onSelect: (file) => console.log('Selected texture:', file) }), _jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Models (", models.length, ")"] }), _jsx(ModelListViewer, { files: models, basePath: basePath, onSelect: (file) => console.log('Selected model:', file) }), sounds.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Sounds (", sounds.length, ")"] }), _jsx(SoundListViewer, { files: sounds, basePath: basePath, onSelect: (file) => console.log('Selected sound:', file) })] }))] }), _jsx(SharedCanvas, {})] }));
 }
 function AssetListViewer({ files, selected, onSelect, renderCard }) {
     const [currentPath, setCurrentPath] = useState('');
@@ -89,17 +90,18 @@ function AssetListViewer({ files, selected, onSelect, renderCard }) {
                                 setShowPicker(false);
                         }) }, file)))] })] }));
 }
-export function TextureListViewer({ files, selected, onSelect }) {
-    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+export function TextureListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
 }
-function TextureCard({ file, onSelect }) {
+function TextureCard({ file, onSelect, basePath = "" }) {
     const [error, setError] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
         return (_jsx("div", { ref: ref, className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center", onClick: () => onSelect(file), children: _jsx("div", { className: "text-red-400 text-xs", children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col", onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: file, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col", onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
 }
 function TextureSphere({ url, onError }) {
     const texture = useLoader(TextureLoader, url, undefined, (error) => {
@@ -108,16 +110,17 @@ function TextureSphere({ url, onError }) {
     });
     return (_jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [1, 32, 32] }), _jsx("meshStandardMaterial", { map: texture })] }));
 }
-export function ModelListViewer({ files, selected, onSelect }) {
-    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
 }
-function ModelCard({ file, onSelect }) {
+function ModelCard({ file, onSelect, basePath = "" }) {
     const [error, setError] = useState(false);
     const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
         return (_jsx("div", { ref: ref, className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center", onClick: () => onSelect(file), children: _jsx("div", { className: "text-red-400 text-xs", children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col", onClick: () => onSelect(file), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(Stage, { intensity: 0.5, environment: "city", children: _jsx(ModelPreview, { url: file, onError: () => setError(true) }) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col", onClick: () => onSelect(file), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(Stage, { intensity: 0.5, environment: "city", children: _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const isFbx = url.toLowerCase().endsWith('.fbx');
@@ -133,11 +136,12 @@ function FBXModel({ url, onError }) {
     const fbx = useFBX(url);
     return _jsx("primitive", { object: fbx, scale: 0.01 });
 }
-export function SoundListViewer({ files, selected, onSelect }) {
-    return (_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(SoundCard, { file: file, onSelect: onSelectHandler })) }));
+export function SoundListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(SoundCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }));
 }
-function SoundCard({ file, onSelect }) {
+function SoundCard({ file, onSelect, basePath = "" }) {
     const fileName = file.split('/').pop() || '';
+    const fullPath = basePath ? `/${basePath}${file}` : file;
     return (_jsxs("div", { onClick: () => onSelect(file), className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex flex-col items-center justify-center", children: [_jsx("div", { className: "text-2xl", children: "\uD83D\uDD0A" }), _jsx("div", { className: "text-[10px] px-1 mt-1 truncate text-center w-full", children: fileName })] }));
 }
 // Shared Canvas Component - can be used independently in any viewer

package/dist/tools/dragdrop/modelLoader.js

@@ -17,9 +17,8 @@ const fbxLoader = new FBXLoader();
 export function loadModel(filename_1) {
     return __awaiter(this, arguments, void 0, function* (filename, resourcePath = "", onProgress) {
         try {
-            // Construct full path - always prepend resourcePath if provided (even if empty string)
-            // This allows loading from root with resourcePath=""
-            const fullPath = `${resourcePath}/${filename}`;
+            // Construct full path - handle empty resourcePath to avoid double slashes
+            const fullPath = resourcePath ? `${resourcePath}/${filename}` : filename;
             if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
                 return new Promise((resolve) => {
                     gltfLoader.load(fullPath, (gltf) => resolve({ success: true, model: gltf.scene }), (progressEvent) => {

package/dist/tools/prefabeditor/EditorUI.d.ts

@@ -1,11 +1,12 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode }: {
+declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
     transformMode: "translate" | "rotate" | "scale";
     setTransformMode: (m: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export default EditorUI;

package/dist/tools/prefabeditor/EditorUI.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
-function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode }) {
+function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }) {
     const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
     const updateNode = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
@@ -24,9 +24,9 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
     // if (!selectedNode) return null;
-    return _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: () => setIsInspectorCollapsed(!isInspectorCollapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { className: "text-[8px]", children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode }))] }), _jsx("div", { style: { position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+    return _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: () => setIsInspectorCollapsed(!isInspectorCollapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { className: "text-[8px]", children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
 }
-function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode }) {
+function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
     const ALL_COMPONENTS = getAllComponents();
     const allComponentKeys = Object.keys(ALL_COMPONENTS);
     const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
@@ -50,7 +50,7 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                                         const components = Object.assign({}, n.components);
                                         delete components[key];
                                         return Object.assign(Object.assign({}, n), { components });
-                                    }), className: "text-[9px] text-red-400/60 hover:text-red-400", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))) })) : null] }, key));
+                                    }), className: "text-[9px] text-red-400/60 hover:text-red-400", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath })) : null] }, key));
             }), _jsxs("div", { className: "px-1.5 py-1 border-t border-cyan-500/20", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Add Component" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("select", { className: "bg-black/40 border border-cyan-500/30 px-1 py-0.5 flex-1 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: addComponentType, onChange: e => setAddComponentType(e.target.value), children: allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); }).map(k => (_jsx("option", { value: k, children: k }, k))) }), _jsx("button", { className: "bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono disabled:opacity-30", disabled: !addComponentType, onClick: () => {
                                     var _a;
                                     if (!addComponentType)

package/dist/tools/prefabeditor/PrefabEditor.d.ts

@@ -1,4 +1,7 @@
-declare const PrefabEditor: ({ children }: {
+import { Prefab } from "./types";
+declare const PrefabEditor: ({ basePath, initialPrefab, children }: {
+    basePath?: string;
+    initialPrefab?: Prefab;
     children?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -13,11 +13,10 @@ import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, } from "react";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
-// import testPrefab from "./samples/test.json";
 import EditorUI from "./EditorUI";
-const PrefabEditor = ({ children }) => {
+const PrefabEditor = ({ basePath, initialPrefab, children }) => {
     const [editMode, setEditMode] = useState(true);
-    const [loadedPrefab, setLoadedPrefab] = useState({
+    const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : {
         "id": "prefab-default",
         "name": "New Prefab",
         "root": {
@@ -41,11 +40,11 @@ const PrefabEditor = ({ children }) => {
     const prefabRef = useRef(null);
     return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, ref: prefabRef, 
                             // props for edit mode
-                            editMode: editMode, onPrefabChange: setLoadedPrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode }), children] }) }), _jsxs("div", { style: { position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }, className: "bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1", children: [_jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { className: "text-cyan-500/30 text-[10px]", children: "|" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                            editMode: editMode, onPrefabChange: setLoadedPrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }), children] }) }), _jsxs("div", { style: { position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }, className: "bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1", children: [_jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { className: "text-cyan-500/30 text-[10px]", children: "|" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                             const prefab = yield loadJson();
                             if (prefab)
                                 setLoadedPrefab(prefab);
-                        }), children: "\uD83D\uDCE5" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => saveJson(loadedPrefab, "prefab"), children: "\uD83D\uDCBE" })] }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: setLoadedPrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode })] });
+                        }), children: "\uD83D\uDCE5" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => saveJson(loadedPrefab, "prefab"), children: "\uD83D\uDCBE" })] }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: setLoadedPrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
 };
 const saveJson = (data, filename) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));

package/dist/tools/prefabeditor/PrefabRoot.d.ts

@@ -8,5 +8,6 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     onSelect?: (id: string | null) => void;
     transformMode?: "translate" | "rotate" | "scale";
     setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
 } & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
 export default PrefabRoot;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -28,7 +28,7 @@ function updatePrefabNode(root, id, update) {
     }
     return root;
 }
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
     const [loadedModels, setLoadedModels] = useState({});
     const [loadedTextures, setLoadedTextures] = useState({});
     // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
@@ -108,7 +108,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             for (const filename of modelsToLoad) {
                 if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const result = yield loadModel(filename, "");
+                    const result = yield loadModel(filename, basePath);
                     if (result.success && result.model) {
                         setLoadedModels(prev => (Object.assign(Object.assign({}, prev), { [filename]: result.model })));
                     }
@@ -118,7 +118,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             for (const filename of texturesToLoad) {
                 if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    textureLoader.load(filename, (texture) => {
+                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    textureLoader.load(texturePath, (texture) => {
                         texture.colorSpace = SRGBColorSpace;
                         setLoadedTextures(prev => (Object.assign(Object.assign({}, prev), { [filename]: texture })));
                     });

package/dist/tools/prefabeditor/components/ComponentRegistry.d.ts

@@ -4,6 +4,7 @@ export interface Component {
     Editor: FC<{
         component: any;
         onUpdate: (newComp: any) => void;
+        basePath?: string;
     }>;
     defaultProperties: any;
     View?: FC<any>;

package/dist/tools/prefabeditor/components/MaterialComponent.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
-function MaterialComponentEditor({ component, onUpdate }) {
+function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     var _a, _b, _c, _d;
     const [textureFiles, setTextureFiles] = useState([]);
     useEffect(() => {
-        fetch('/textures/manifest.json')
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}textures/manifest.json`)
             .then(r => r.json())
             .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
             .catch(console.error);
-    }, []);
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.wireframe || false, onChange: e => onUpdate({ 'wireframe': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Wireframe" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Texture" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => onUpdate({ 'texture': file }) }) })] }), component.properties.texture && (_jsxs("div", { className: "border-t border-cyan-500/20 pt-1 mt-1", children: [_jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.repeat || false, onChange: e => onUpdate({ 'repeat': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Repeat (X, Y)" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "number", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: e => {
+    }, [basePath]);
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.wireframe || false, onChange: e => onUpdate({ 'wireframe': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Wireframe" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Texture" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => onUpdate({ 'texture': file }), basePath: basePath }) })] }), component.properties.texture && (_jsxs("div", { className: "border-t border-cyan-500/20 pt-1 mt-1", children: [_jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.repeat || false, onChange: e => onUpdate({ 'repeat': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Repeat (X, Y)" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "number", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: e => {
                                             var _a, _b;
                                             const y = (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 1;
                                             onUpdate({ 'repeatCount': [parseFloat(e.target.value), y] });

package/dist/tools/prefabeditor/components/ModelComponent.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
-function ModelComponentEditor({ component, onUpdate }) {
+function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
     const [modelFiles, setModelFiles] = useState([]);
     useEffect(() => {
-        fetch('/models/manifest.json')
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}models/manifest.json`)
             .then(r => r.json())
             .then(data => setModelFiles(Array.isArray(data) ? data : data.files || []))
             .catch(console.error);
-    }, []);
+    }, [basePath]);
     const handleModelSelect = (file) => {
         // Remove leading slash for prefab compatibility
         const filename = file.startsWith('/') ? file.slice(1) : file;
         onUpdate({ 'filename': filename });
     };
-    return _jsxs("div", { children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Model" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ 'instanced': e.target.checked }), className: "w-3 h-3" }), _jsx("label", { htmlFor: "instanced-checkbox", className: "text-[9px] text-cyan-400/60", children: "Instanced" })] })] });
+    return _jsxs("div", { children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Model" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect, basePath: basePath }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ 'instanced': e.target.checked }), className: "w-3 h-3" }), _jsx("label", { htmlFor: "instanced-checkbox", className: "text-[9px] text-cyan-400/60", children: "Instanced" })] })] });
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -9,7 +9,7 @@
     "watch": "tsc --watch",
     "dev": "concurrently \"npm run watch\" \"cd docs && npm run dev\"",
     "build": "tsc",
-    "publish": "npm run build && npm publish --access public"
+    "release": "npm run build && npm publish --access public"
   },
   "keywords": [],
   "author": "prnth",
@@ -19,7 +19,7 @@
     "@react-three/fiber": "^9.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "three": "^0.160.0"
+    "three": "^0.181.0"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",