react-three-game 0.0.14 → 0.0.15

package/README.md

@@ -64,7 +64,7 @@ npm install react-three-game @react-three/fiber @react-three/rapier three
 ```
 
 ```jsx
-import { GameCanvas, PrefabRoot } from 'react-three-game';
+import { GameCanvas, PrefabRoot, ground } from 'react-three-game';
 
 export default function App() {
   return (
@@ -78,15 +78,13 @@ export default function App() {
             transform: { type: "Transform", properties: { position: [0, 0, 0] } }
           },
           children: [
-            {
+            ground({
               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" } }
-              }
-            },
+              position: [0, -1, 0],
+              size: 50,
+              texture: "/textures/GreyboxTextures/greybox_light_grid.png",
+              repeatCount: [25, 25]
+            }),
             {
               id: "player",
               components: {
@@ -109,8 +107,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/prefabeditor/EditorTree.js

@@ -30,8 +30,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         var _a;
         const newNode = {
             id: crypto.randomUUID(),
-            enabled: true,
-            visible: true,
             components: {
                 transform: {
                     type: "Transform",

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -21,8 +21,6 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
         "name": "New Prefab",
         "root": {
             "id": "root",
-            "enabled": true,
-            "visible": true,
             "components": {
                 "transform": {
                     "type": "Transform",

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -49,13 +49,6 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             setSelectedObject(null);
         }
     }, [selectedId]);
-    // const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate"); // Removed local state
-    const updateNode = (updater) => {
-        if (!selectedId || !onPrefabChange)
-            return;
-        const newRoot = updatePrefabNode(data.root, selectedId, updater);
-        onPrefabChange(Object.assign(Object.assign({}, data), { root: newRoot }));
-    };
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange)
             return;
@@ -158,7 +151,7 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
         }
         clickValid.current = false;
     };
-    if (!gameObject.enabled || !gameObject.visible)
+    if (gameObject.disabled === true || gameObject.hidden === true)
         return null;
     // --- 2. If instanced, short-circuit to a tiny clean branch ---
     const isInstanced = !!((_c = (_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced);
@@ -170,8 +163,6 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     // --- 5. Render children (always relative transforms) ---
     const children = ((_d = gameObject.children) !== null && _d !== void 0 ? _d : []).map((child) => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: worldMatrix }, child.id)));
     // --- 4. Wrap with physics if needed ---
-    // Only wrap the core content (geometry/model), not children
-    // Children should be siblings, not inside the physics body
     const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
     // --- 6. Final group wrapper ---
     return (_jsxs("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: [physicsWrapped, children] }));

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

@@ -12,8 +12,8 @@ export interface Prefab {
 }
 export interface GameObject {
     id: string;
-    enabled: boolean;
-    visible: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
     ref?: any;
     children?: GameObject[];
     components?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -15,8 +15,11 @@
   "author": "prnth",
   "license": "VPL",
   "type": "module",
+  "workspaces": ["docs"],
   "peerDependencies": {
     "@react-three/fiber": "^9.0.0",
+    "@react-three/drei": "^10.0.0",
+    "@react-three/rapier": "^2.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "three": "^0.181.0"

package/src/helpers/index.ts

@@ -0,0 +1,95 @@
+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 function ground(options: GroundOptions = {}): GameObject {
+	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: {
+					color,
+					...(texture ? { texture } : {}),
+					...(repeat ? { repeat: true, repeatCount } : {}),
+				},
+			},
+			physics: {
+				type: "Physics",
+				properties: {
+					type: physicsType,
+				},
+			},
+		},
+	};
+}

package/src/index.ts

@@ -10,5 +10,8 @@ export {
   SharedCanvas,
 } from './tools/assetviewer/page';
 
+// Helpers
+export * from './helpers';
+
 // Types
 export type { Prefab, GameObject } from './tools/prefabeditor/types';

package/src/shared/GameCanvas.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Canvas, extend } from "@react-three/fiber";
 import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
 import { Suspense, useState } from "react";
@@ -16,10 +18,10 @@ extend({
 
 export default function GameCanvas({ loader = false, children, ...props }: { loader?: boolean, children: React.ReactNode, props?: WebGPURendererParameters }) {
     const [frameloop, setFrameloop] = useState<"never" | "always">("never");
-    const [loading, setLoading] = useState(true);
 
     return <>
         <Canvas
+            style={{ touchAction: 'none' }}
             shadows={{ type: PCFShadowMap, }}
             frameloop={frameloop}
             gl={async ({ canvas }) => {
@@ -42,7 +44,8 @@ export default function GameCanvas({ loader = false, children, ...props }: { loa
             <Suspense>
                 {children}
             </Suspense>
+
+            {loader ? <Loader /> : null}
         </Canvas>
-        {loader ? <Loader /> : null}
     </>;
 }

package/src/tools/prefabeditor/EditorTree.tsx

@@ -39,8 +39,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const handleAddChild = (parentId: string) => {
         const newNode: GameObject = {
             id: crypto.randomUUID(),
-            enabled: true,
-            visible: true,
             components: {
                 transform: {
                     type: "Transform",

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -15,8 +15,6 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
         "name": "New Prefab",
         "root": {
             "id": "root",
-            "enabled": true,
-            "visible": true,
             "components": {
                 "transform": {
                     "type": "Transform",

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -59,15 +59,6 @@ export const PrefabRoot = forwardRef<Group, {
         }
     }, [selectedId]);
 
-
-    // const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate"); // Removed local state
-
-    const updateNode = (updater: (node: GameObjectType) => GameObjectType) => {
-        if (!selectedId || !onPrefabChange) return;
-        const newRoot = updatePrefabNode(data.root, selectedId, updater);
-        onPrefabChange({ ...data, root: newRoot });
-    };
-
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange) return;
         const obj = objectRefs.current[selectedId];
@@ -167,7 +158,7 @@ export const PrefabRoot = forwardRef<Group, {
                 loadedModels={loadedModels}
                 loadedTextures={loadedTextures}
                 editMode={editMode}
-                parentMatrix={new Matrix4()}   // 👈 identity = world root
+                parentMatrix={new Matrix4()}
             />
         </GameInstanceProvider>
 
@@ -242,7 +233,7 @@ function GameObjectRenderer({
         clickValid.current = false;
     };
 
-    if (!gameObject.enabled || !gameObject.visible) return null;
+    if (gameObject.disabled === true || gameObject.hidden === true) return null;
 
     // --- 2. If instanced, short-circuit to a tiny clean branch ---
     const isInstanced = !!gameObject.components?.model?.properties?.instanced;
@@ -269,8 +260,6 @@ function GameObjectRenderer({
     ));
 
     // --- 4. Wrap with physics if needed ---
-    // Only wrap the core content (geometry/model), not children
-    // Children should be siblings, not inside the physics body
     const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
 
     // --- 6. Final group wrapper ---

package/src/tools/prefabeditor/types.ts

@@ -13,8 +13,8 @@ export interface Prefab {
 
 export interface GameObject {
     id: string;
-    enabled: boolean;
-    visible: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
     ref?: any;
     children?: GameObject[];
     components?: {