react-three-game 0.0.45 → 0.0.47

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "react-three-game-skill"]
+	path = react-three-game-skill
+	url = https://github.com/prnthh/react-three-game-skill

package/README.md

@@ -9,6 +9,11 @@ npm i react-three-game @react-three/fiber @react-three/rapier three
 ![Prefab Editor](assets/editor.gif)
 ![Architecture](assets/architecture.png)
 
+## Agent Skill
+```bash
+npx skills add https://github.com/prnthh/react-three-game-skill
+```
+
 ## Usage
 
 ```jsx

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export { FieldRenderer, Input, Label, Vector3Input, ColorInput, StringInput, BooleanInput, SelectInput, } from './tools/prefabeditor/components/Input';
 export * from './tools/prefabeditor/utils';
+export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -6,7 +6,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
+import { exportGLB } from "./utils";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -102,18 +102,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, chil
         const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
         if (!sceneRoot)
             return;
-        const exporter = new GLTFExporter();
-        exporter.parse(sceneRoot, (result) => {
-            const blob = new Blob([result], { type: 'application/octet-stream' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = `${loadedPrefab.name || 'scene'}.glb`;
-            a.click();
-            URL.revokeObjectURL(url);
-        }, (error) => {
-            console.error('Error exporting GLB:', error);
-        }, { binary: true });
+        exportGLB(sceneRoot, {
+            filename: `${loadedPrefab.name || 'scene'}.glb`
+        });
     };
     useEffect(() => {
         const canvas = document.querySelector('canvas');

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { MapControls, TransformControls, useHelper } from "@react-three/drei";
 import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
-import { getComponent, registerComponent } from "./components/ComponentRegistry";
+import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
@@ -245,13 +245,15 @@ function computeParentWorldMatrix(root, targetId) {
     return result !== null && result !== void 0 ? result : IDENTITY;
 }
 function renderCoreNode(gameObject, ctx, parentMatrix) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const geometry = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.geometry;
     const material = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.material;
     const model = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
+    const text = (_d = gameObject.components) === null || _d === void 0 ? void 0 : _d.text;
     const geometryDef = geometry && getComponent("Geometry");
     const materialDef = material && getComponent("Material");
     const modelDef = model && getComponent("Model");
+    const textDef = text && getComponent("Text");
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -263,7 +265,7 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
     const leaves = [];
     if (gameObject.components) {
         Object.entries(gameObject.components)
-            .filter(([k]) => !["geometry", "material", "model", "transform", "physics"].includes(k))
+            .filter(([k]) => !getNonComposableKeys().includes(k))
             .forEach(([key, comp]) => {
             if (!(comp === null || comp === void 0 ? void 0 : comp.type))
                 return;
@@ -285,6 +287,9 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
     else if (geometry && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
         core = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leaves] }));
     }
+    else if (text && (textDef === null || textDef === void 0 ? void 0 : textDef.View)) {
+        core = (_jsxs(_Fragment, { children: [_jsx(textDef.View, Object.assign({ properties: text.properties }, contextProps)), leaves] }));
+    }
     else {
         core = _jsx(_Fragment, { children: leaves });
     }

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

@@ -10,7 +10,9 @@ export interface Component {
     }>;
     defaultProperties: any;
     View?: FC<any>;
+    nonComposable?: boolean;
 }
 export declare function registerComponent(component: Component): void;
 export declare function getComponent(name: string): Component | undefined;
 export declare function getAllComponents(): Record<string, Component>;
+export declare function getNonComposableKeys(): string[];

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

@@ -11,3 +11,8 @@ export function getComponent(name) {
 export function getAllComponents() {
     return Object.assign({}, REGISTRY);
 }
+export function getNonComposableKeys() {
+    return Object.values(REGISTRY)
+        .filter(c => c.nonComposable)
+        .map(c => c.name.toLowerCase());
+}

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

@@ -77,6 +77,7 @@ const GeometryComponent = {
     name: 'Geometry',
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
+    nonComposable: true,
     defaultProperties: {
         geometryType: 'box',
         args: GEOMETRY_ARGS.box.defaults,

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

@@ -3,7 +3,7 @@ import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
 import { FieldRenderer, Input } from './Input';
 import { useMemo } from 'react';
-import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter } from 'three';
+import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter } from 'three';
 function TexturePicker({ value, onChange, basePath }) {
     const [textureFiles, setTextureFiles] = useState([]);
     const [showPicker, setShowPicker] = useState(false);
@@ -117,12 +117,13 @@ function MaterialComponentView({ properties, loadedTextures }) {
         return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
     }
     const { color, wireframe = false } = properties;
-    return (_jsx("meshStandardMaterial", { color: color, wireframe: wireframe, map: finalTexture, transparent: !!finalTexture, side: DoubleSide }, (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture'));
+    return (_jsx("meshStandardMaterial", { color: color, wireframe: wireframe, map: finalTexture, transparent: !!finalTexture }, (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture'));
 }
 const MaterialComponent = {
     name: 'Material',
     Editor: MaterialComponentEditor,
     View: MaterialComponentView,
+    nonComposable: true,
     defaultProperties: {
         color: '#ffffff',
         wireframe: false

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

@@ -58,6 +58,7 @@ const ModelComponent = {
     name: 'Model',
     Editor: ModelComponentEditor,
     View: ModelComponentView,
+    nonComposable: true,
     defaultProperties: {
         filename: '',
         instanced: false

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

@@ -39,6 +39,7 @@ const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
+    nonComposable: true,
     defaultProperties: { type: 'dynamic', collider: 'hull' }
 };
 export default PhysicsComponent;

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

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const TextComponent: Component;
+export default TextComponent;

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldRenderer } from "./Input";
+import { Text } from 'three-text/three/react';
+import { useRef, useState, useCallback } from 'react';
+// Initialize HarfBuzz path for font shaping
+Text.setHarfBuzzPath('/fonts/hb.wasm');
+function TextComponentEditor({ component, onUpdate, }) {
+    const fields = [
+        {
+            name: 'text',
+            type: 'string',
+            label: 'Text',
+            placeholder: 'Enter text...',
+        },
+        {
+            name: 'color',
+            type: 'color',
+            label: 'Color',
+        },
+        {
+            name: 'font',
+            type: 'string',
+            label: 'Font',
+            placeholder: '/fonts/NotoSans-Regular.ttf',
+        },
+        {
+            name: 'size',
+            type: 'number',
+            label: 'Size',
+            min: 0.01,
+            step: 0.1,
+        },
+        {
+            name: 'depth',
+            type: 'number',
+            label: 'Depth',
+            min: 0,
+            step: 0.1,
+        },
+        {
+            name: 'width',
+            type: 'number',
+            label: 'Width',
+            min: 0,
+            step: 0.5,
+        },
+        {
+            name: 'align',
+            type: 'select',
+            label: 'Align',
+            options: [
+                { value: 'left', label: 'Left' },
+                { value: 'center', label: 'Center' },
+                { value: 'right', label: 'Right' },
+            ],
+        },
+    ];
+    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+}
+function TextComponentView({ properties }) {
+    const { text = '', font, size, depth, width, align, color } = properties;
+    const textContent = String(text || '');
+    const meshRef = useRef(null);
+    const [offset, setOffset] = useState([0, 0, 0]);
+    const handleLoad = useCallback((_geometry, info) => {
+        if (info === null || info === void 0 ? void 0 : info.planeBounds) {
+            const bounds = info.planeBounds;
+            // Calculate X offset based on alignment
+            let centerX = 0;
+            if (align === 'center') {
+                centerX = -(bounds.min.x + bounds.max.x) / 2;
+            }
+            else if (align === 'right') {
+                centerX = -bounds.max.x;
+            }
+            else {
+                // left alignment
+                centerX = -bounds.min.x;
+            }
+            const centerY = -(bounds.min.y + bounds.max.y) / 2;
+            setOffset([centerX, centerY, 0]);
+        }
+    }, [align]);
+    if (!textContent)
+        return null;
+    return (_jsx("group", { position: offset, children: _jsx(Text, { ref: meshRef, font: font, size: size, depth: depth, layout: { align, width }, color: color, onLoad: handleLoad, children: textContent }) }));
+}
+const TextComponent = {
+    name: 'Text',
+    Editor: TextComponentEditor,
+    View: TextComponentView,
+    nonComposable: true,
+    defaultProperties: {
+        text: 'Hello World',
+        color: '#888888',
+        font: '/fonts/NotoSans-Regular.ttf',
+        size: 0.5,
+        depth: 0,
+        width: 5,
+        align: 'center',
+    }
+};
+export default TextComponent;

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

@@ -41,6 +41,7 @@ function TransformComponentEditor({ component, onUpdate }) {
 const TransformComponent = {
     name: 'Transform',
     Editor: TransformComponentEditor,
+    nonComposable: true,
     defaultProperties: {
         position: [0, 0, 0],
         rotation: [0, 0, 0],

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

@@ -5,6 +5,7 @@ import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
 import ModelComponent from './ModelComponent';
+import TextComponent from './TextComponent';
 export default [
     GeometryComponent,
     TransformComponent,
@@ -12,5 +13,6 @@ export default [
     PhysicsComponent,
     SpotLightComponent,
     DirectionalLightComponent,
-    ModelComponent
+    ModelComponent,
+    TextComponent
 ];

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

@@ -1,8 +1,28 @@
 import { GameObject, Prefab } from "./types";
+import { Object3D } from 'three';
+export interface ExportGLBOptions {
+    filename?: string;
+    binary?: boolean;
+    onComplete?: (result: ArrayBuffer | object) => void;
+    onError?: (error: any) => void;
+}
 /** Save a prefab as JSON file */
 export declare function saveJson(data: Prefab, filename: string): void;
 /** Load a prefab from JSON file */
 export declare function loadJson(): Promise<Prefab | undefined>;
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOptions): Promise<ArrayBuffer | object>;
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */

package/dist/tools/prefabeditor/utils.js

@@ -1,3 +1,13 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 /** Save a prefab as JSON file */
 export function saveJson(data, filename) {
     const a = document.createElement('a');
@@ -34,6 +44,47 @@ export function loadJson() {
         input.click();
     });
 }
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export function exportGLB(sceneRoot, options = {}) {
+    const { filename = 'scene.glb', binary = true, onComplete, onError } = options;
+    return new Promise((resolve, reject) => {
+        const exporter = new GLTFExporter();
+        exporter.parse(sceneRoot, (result) => {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(result);
+            resolve(result);
+            // Trigger download if filename is provided
+            if (filename) {
+                const blob = new Blob([result], { type: binary ? 'application/octet-stream' : 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
+        }, (error) => {
+            console.error('Error exporting GLB:', error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            reject(error);
+        }, { binary });
+    });
+}
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export function exportGLBData(sceneRoot) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const result = yield exportGLB(sceneRoot, { filename: '', binary: true });
+        return result;
+    });
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -24,7 +24,8 @@
     "@react-three/rapier": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "three": ">=0.182.0"
+    "three": ">=0.182.0",
+    "three-text": ">=0.4.4"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",

package/react-three-game-skill/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto