react-three-game 0.0.14 → 0.0.16

package/README.md

@@ -17,45 +17,26 @@ npm i react-three-game @react-three/fiber three
 Scenes are JSON prefabs. Components are registered modules. Hierarchy is declarative.
 
 ```jsx
-<PrefabRoot data={{
-  root: {
-    id: "cube",
-    components: {
-      transform: { type: "Transform", properties: { position: [0, 1, 0] } },
-      geometry: { type: "Geometry", properties: { geometryType: "box" } },
-      material: { type: "Material", properties: { color: "green" } },
-      physics: { type: "Physics", properties: { type: "dynamic" } }
-    }
-  }
-}} />
-```
-
-## Tailwind CSS Support
-
-This library uses Tailwind CSS for styling its editor components. To ensure styles are correctly applied in your application, you need to configure Tailwind to scan the library's source files.
-
-### Tailwind v4
-
-Add the library path to your CSS entry point using the `@source` directive:
-
-```css
-@import "tailwindcss";
-@source "../../node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}";
+  <PrefabRoot data={{
+      root: {
+          id: "cube",
+          components: {
+              transform: { type: "Transform", properties: { position: [0, 1, 0] } },
+              geometry: { type: "Geometry", properties: { geometryType: "box" } },
+              material: { type: "Material", properties: { color: "green" } },
+              physics: { type: "Physics", properties: { type: "dynamic" } }
+          }
+      }
+  }} />
 ```
 
-### Tailwind v3
+## Styling
 
-Add the library path to your `tailwind.config.js`:
+The prefab editor UI ships with **inline styles** (no Tailwind / CSS framework required). That means you can install and render it without any additional build-time CSS configuration.
 
-```js
-module.exports = {
-  content: [
-    // ...
-    "./node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  // ...
-}
-```
+If you want to fully restyle the editor, you can:
+- Wrap `PrefabEditor` in your own layout and override positioning.
+- Fork/compose the editor UI components (they’re plain React components).
 
 ## Quick Start
 
@@ -64,41 +45,44 @@ npm install react-three-game @react-three/fiber @react-three/rapier three
 ```
 
 ```jsx
+import { Physics } from '@react-three/rapier';
 import { GameCanvas, PrefabRoot } from 'react-three-game';
 
 export default function App() {
   return (
     <GameCanvas>
-      <ambientLight intensity={0.5} />
-      <PrefabRoot data={{
-        id: "scene",
-        root: {
-          id: "root",
-          components: {
-            transform: { type: "Transform", properties: { position: [0, 0, 0] } }
-          },
-          children: [
-            {
-              id: "floor",
-              components: {
-                transform: { type: "Transform", properties: { position: [0, -1, 0] } },
-                geometry: { type: "Geometry", properties: { geometryType: "box", args: [10, 0.5, 10] } },
-                material: { type: "Material", properties: { color: "#2d5f2e" } },
-                physics: { type: "Physics", properties: { type: "fixed" } }
-              }
-            },
-            {
-              id: "player",
-              components: {
-                transform: { type: "Transform", properties: { position: [0, 2, 0] } },
-                geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
-                material: { type: "Material", properties: { color: "#ff6b6b" } },
-                physics: { type: "Physics", properties: { type: "dynamic" } }
+      <Physics>
+        <ambientLight intensity={0.8} />
+        <PrefabRoot
+          data={{
+              id: "scene",
+              name: "scene",
+              root: {
+                  id: "root",
+                  children: [
+                      {
+                          id: "ground",
+                          components: {
+                              transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
+                              geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
+                              material: { type: "Material", properties: { color: "green" } },
+                              physics: { type: "Physics", properties: { type: "fixed" } }
+                          }
+                      },
+                      {
+                          id: "player",
+                          components: {
+                              transform: { type: "Transform", properties: { position: [0, 2, 0] } },
+                              geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
+                              material: { type: "Material", properties: { color: "#ff6b6b" } },
+                              physics: { type: "Physics", properties: { type: "dynamic" } }
+                          }
+                      }
+                  ]
               }
-            }
-          ]
-        }
-      }} />
+          }}
+      />
+      </Physics>
     </GameCanvas>
   );
 }
@@ -109,8 +93,8 @@ export default function App() {
 ```typescript
 interface GameObject {
   id: string;
-  enabled?: boolean;
-  visible?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
   components: {
     transform?: TransformComponent;
     geometry?: GeometryComponent;

package/dist/helpers/index.d.ts

@@ -0,0 +1,35 @@
+import type { GameObject } from "../tools/prefabeditor/types";
+export type Vec3 = [number, number, number];
+export interface GroundOptions {
+    /** GameObject id. Defaults to "ground". */
+    id?: string;
+    /** Plane size. Defaults to 50. */
+    size?: number;
+    /** Transform overrides. */
+    position?: Vec3;
+    rotation?: Vec3;
+    scale?: Vec3;
+    /** Material overrides. */
+    color?: string;
+    texture?: string;
+    /** When true, set repeat wrapping. Defaults to true if texture is provided. */
+    repeat?: boolean;
+    /** Texture repeat counts when repeat=true. Defaults to [25,25]. */
+    repeatCount?: [number, number];
+    /** Physics body type. Defaults to "fixed". */
+    physicsType?: "fixed" | "dynamic" | "kinematic";
+    /** Set true to hide the node. */
+    hidden?: boolean;
+    /** Set true to disable the node. */
+    disabled?: boolean;
+}
+/**
+ * Create a ready-to-use plane ground GameObject.
+ *
+ * Designed to reduce prefab boilerplate:
+ * - Transform (rotated to lie flat)
+ * - Geometry (plane)
+ * - Material (optional texture + repeat)
+ * - Physics (fixed by default)
+ */
+export declare function ground(options?: GroundOptions): GameObject;

package/dist/helpers/index.js

@@ -0,0 +1,44 @@
+/**
+ * Create a ready-to-use plane ground GameObject.
+ *
+ * Designed to reduce prefab boilerplate:
+ * - Transform (rotated to lie flat)
+ * - Geometry (plane)
+ * - Material (optional texture + repeat)
+ * - Physics (fixed by default)
+ */
+export function ground(options = {}) {
+    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "white", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", hidden = false, disabled = false, } = options;
+    return {
+        id,
+        disabled,
+        hidden,
+        components: {
+            transform: {
+                type: "Transform",
+                properties: {
+                    position,
+                    rotation,
+                    scale,
+                },
+            },
+            geometry: {
+                type: "Geometry",
+                properties: {
+                    geometryType: "plane",
+                    args: [size, size],
+                },
+            },
+            material: {
+                type: "Material",
+                properties: Object.assign(Object.assign({ color }, (texture ? { texture } : {})), (repeat ? { repeat: true, repeatCount } : {})),
+            },
+            physics: {
+                type: "Physics",
+                properties: {
+                    type: physicsType,
+                },
+            },
+        },
+    };
+}

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export * from './helpers';
 export type { Prefab, GameObject } from './tools/prefabeditor/types';

package/dist/index.js

@@ -4,3 +4,5 @@ export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+// Helpers
+export * from './helpers';

package/dist/shared/GameCanvas.js

@@ -1,3 +1,4 @@
+"use client";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -18,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Canvas, extend } from "@react-three/fiber";
 import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
 import { Suspense, useState } from "react";
@@ -33,16 +34,15 @@ extend({
 export default function GameCanvas(_a) {
     var { loader = false, children } = _a, props = __rest(_a, ["loader", "children"]);
     const [frameloop, setFrameloop] = useState("never");
-    const [loading, setLoading] = useState(true);
-    return _jsxs(_Fragment, { children: [_jsx(Canvas, { shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
-                    const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
-                        // @ts-expect-error futuristic
-                        shadowMap: true, antialias: true }, props));
-                    yield renderer.init().then(() => {
-                        setFrameloop("always");
-                    });
-                    return renderer;
-                }), camera: {
-                    position: [0, 1, 5],
-                }, children: _jsx(Suspense, { children: children }) }), loader ? _jsx(Loader, {}) : null] });
+    return _jsx(_Fragment, { children: _jsxs(Canvas, { style: { touchAction: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+                const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
+                    // @ts-expect-error futuristic
+                    shadowMap: true, antialias: true }, props));
+                yield renderer.init().then(() => {
+                    setFrameloop("always");
+                });
+                return renderer;
+            }), camera: {
+                position: [0, 1, 5],
+            }, children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] }) });
 }

package/dist/tools/dragdrop/DragDropLoader.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // DragDropLoader.tsx
 import { useEffect } from "react";

package/dist/tools/prefabeditor/EditorTree.js

@@ -6,6 +6,94 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const [draggedId, setDraggedId] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);
+    const styles = {
+        panel: {
+            background: "rgba(0,0,0,0.55)",
+            color: "rgba(255,255,255,0.9)",
+            border: "1px solid rgba(255,255,255,0.12)",
+            borderRadius: 6,
+            overflow: "hidden",
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            backdropFilter: "blur(6px)",
+            WebkitBackdropFilter: "blur(6px)",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            fontSize: 11,
+            lineHeight: 1.2,
+            userSelect: "none",
+            WebkitUserSelect: "none",
+        },
+        panelHeader: {
+            padding: "4px 6px",
+            borderBottom: "1px solid rgba(255,255,255,0.10)",
+            display: "flex",
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            background: "rgba(255,255,255,0.05)",
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+            fontSize: 10,
+            color: "rgba(255,255,255,0.7)",
+        },
+        scroll: {
+            overflowY: "auto",
+        },
+        row: {
+            display: "flex",
+            alignItems: "center",
+            padding: "2px 6px",
+            borderBottom: "1px solid rgba(255,255,255,0.07)",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+        },
+        rowSelected: {
+            background: "rgba(255,255,255,0.10)",
+        },
+        chevron: {
+            width: 12,
+            textAlign: "center",
+            opacity: 0.55,
+            fontSize: 10,
+            marginRight: 4,
+            cursor: "pointer",
+        },
+        idText: {
+            fontSize: 11,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        contextMenu: {
+            position: "fixed",
+            zIndex: 50,
+            minWidth: 120,
+            background: "rgba(0,0,0,0.82)",
+            border: "1px solid rgba(255,255,255,0.16)",
+            borderRadius: 6,
+            overflow: "hidden",
+            boxShadow: "0 12px 32px rgba(0,0,0,0.45)",
+            backdropFilter: "blur(6px)",
+            WebkitBackdropFilter: "blur(6px)",
+        },
+        menuItem: {
+            width: "100%",
+            textAlign: "left",
+            padding: "6px 8px",
+            background: "transparent",
+            border: "none",
+            color: "rgba(255,255,255,0.9)",
+            font: "inherit",
+            cursor: "pointer",
+        },
+        menuItemDanger: {
+            color: "rgba(255,120,120,0.95)",
+        },
+        menuDivider: {
+            borderTop: "1px solid rgba(255,255,255,0.10)",
+        }
+    };
     if (!prefabData || !setPrefabData)
         return null;
     const handleContextMenu = (e, nodeId) => {
@@ -30,8 +118,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         var _a;
         const newNode = {
             id: crypto.randomUUID(),
-            enabled: true,
-            visible: true,
             components: {
                 transform: {
                     type: "Transform",
@@ -134,9 +220,35 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         const isSelected = node.id === selectedId;
         const isCollapsed = collapsedIds.has(node.id);
         const hasChildren = node.children && node.children.length > 0;
-        return (_jsxs("div", { className: "select-none", children: [_jsxs("div", { className: `flex items-center py-0.5 px-1 cursor-pointer border-b border-cyan-500/10 ${isSelected ? 'bg-cyan-500/30 hover:bg-cyan-500/40 border-cyan-400/30' : 'hover:bg-cyan-500/10'}`, style: { paddingLeft: `${depth * 8 + 4}px` }, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), draggable: node.id !== prefabData.root.id, onDragStart: (e) => handleDragStart(e, node.id), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), children: [_jsx("span", { className: `mr-0.5 w-3 text-center text-cyan-400/50 hover:text-cyan-400 cursor-pointer text-[8px] ${hasChildren ? '' : 'invisible'}`, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), _jsx("span", { className: "text-[10px] truncate font-mono text-cyan-300", children: node.id })] }), !isCollapsed && node.children && (_jsx("div", { children: node.children.map(child => renderNode(child, depth + 1)) }))] }, node.id));
+        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, styles.row), (isSelected ? styles.rowSelected : null)), { paddingLeft: `${depth * 10 + 6}px` }), onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), draggable: node.id !== prefabData.root.id, onDragStart: (e) => handleDragStart(e, node.id), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), onPointerEnter: (e) => {
+                        if (!isSelected)
+                            e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+                    }, onPointerLeave: (e) => {
+                        if (!isSelected)
+                            e.currentTarget.style.background = "transparent";
+                    }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.chevron), { visibility: hasChildren ? 'visible' : 'hidden' }), onClick: (e) => hasChildren && toggleCollapse(e, node.id), onPointerEnter: (e) => {
+                                e.currentTarget.style.opacity = "0.9";
+                            }, onPointerLeave: (e) => {
+                                e.currentTarget.style.opacity = "0.55";
+                            }, children: isCollapsed ? '▶' : '▼' }), _jsx("span", { style: styles.idText, children: node.id })] }), !isCollapsed && node.children && (_jsx("div", { children: node.children.map(child => renderNode(child, depth + 1)) }))] }, node.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col", style: { width: isTreeCollapsed ? 'auto' : '14rem' }, onClick: closeContextMenu, 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: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { className: "text-[8px]", children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { className: "flex-1 py-0.5", children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { className: "fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]", style: { top: contextMenu.y, left: contextMenu.x }, onClick: (e) => e.stopPropagation(), onPointerLeave: closeContextMenu, children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono", onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, styles.panel), { width: isTreeCollapsed ? 'auto' : '14rem' }), onClick: closeContextMenu, children: [_jsxs("div", { style: styles.panelHeader, onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, onPointerEnter: (e) => {
+                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
+                        }, onPointerLeave: (e) => {
+                            e.currentTarget.style.background = "rgba(255,255,255,0.05)";
+                        }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { style: { fontSize: 10, opacity: 0.8 }, children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { style: Object.assign(Object.assign({}, styles.scroll), { padding: 2 }), children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { style: Object.assign(Object.assign({}, styles.contextMenu), { top: contextMenu.y, left: contextMenu.x }), onClick: (e) => e.stopPropagation(), onPointerLeave: closeContextMenu, children: [_jsx("button", { style: Object.assign(Object.assign({}, styles.menuItem), styles.menuDivider), onClick: () => handleAddChild(contextMenu.nodeId), onPointerEnter: (e) => {
+                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
+                        }, onPointerLeave: (e) => {
+                            e.currentTarget.style.background = "transparent";
+                        }, children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { style: Object.assign(Object.assign({}, styles.menuItem), styles.menuDivider), onClick: () => handleDuplicate(contextMenu.nodeId), onPointerEnter: (e) => {
+                                    e.currentTarget.style.background = "rgba(255,255,255,0.08)";
+                                }, onPointerLeave: (e) => {
+                                    e.currentTarget.style.background = "transparent";
+                                }, children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, styles.menuItem), styles.menuItemDanger), onClick: () => handleDelete(contextMenu.nodeId), onPointerEnter: (e) => {
+                                    e.currentTarget.style.background = "rgba(255,255,255,0.08)";
+                                }, onPointerLeave: (e) => {
+                                    e.currentTarget.style.background = "transparent";
+                                }, children: "Delete" })] }))] }))] }));
 }
 // --- Helpers ---
 function findNode(root, id) {