react-three-game 0.0.46 → 0.0.48

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -6,8 +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 { Group } from "three";
+import { exportGLB } from "./utils";
 
 export interface PrefabEditorRef {
     screenshot: () => void;
@@ -115,23 +114,9 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
         const sceneRoot = prefabRootRef.current?.root;
         if (!sceneRoot) return;
 
-        const exporter = new GLTFExporter();
-        exporter.parse(
-            sceneRoot,
-            (result) => {
-                const blob = new Blob([result as ArrayBuffer], { 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(() => {

package/src/tools/prefabeditor/components/AmbientLightComponent.tsx

@@ -0,0 +1,40 @@
+import { Component } from "./ComponentRegistry";
+import { FieldRenderer, FieldDefinition } from "./Input";
+
+const ambientLightFields: FieldDefinition[] = [
+    { name: 'color', type: 'color', label: 'Color' },
+    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
+];
+
+function AmbientLightComponentEditor({
+    component,
+    onUpdate,
+}: {
+    component: any;
+    onUpdate: (newProps: any) => void;
+}) {
+    return (
+        <FieldRenderer
+            fields={ambientLightFields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
+    );
+}
+
+function AmbientLightComponentView({ properties }: { properties: any }) {
+    const { color = '#ffffff', intensity = 1 } = properties;
+    return <ambientLight color={color} intensity={intensity} />;
+}
+
+const AmbientLightComponent: Component = {
+    name: 'AmbientLight',
+    Editor: AmbientLightComponentEditor,
+    View: AmbientLightComponentView,
+    defaultProperties: {
+        color: '#ffffff',
+        intensity: 1,
+    },
+};
+
+export default AmbientLightComponent;

package/src/tools/prefabeditor/components/GeometryComponent.tsx

@@ -17,6 +17,10 @@ const GEOMETRY_ARGS: Record<string, {
         labels: ["Width", "Height"],
         defaults: [1, 1],
     },
+    cylinder: {
+        labels: ["Radius Top", "Radius Bottom", "Height", "Radial Segments"],
+        defaults: [1, 1, 1, 32],
+    },
 };
 
 function GeometryComponentEditor({
@@ -38,6 +42,7 @@ function GeometryComponentEditor({
                 { value: 'box', label: 'Box' },
                 { value: 'sphere', label: 'Sphere' },
                 { value: 'plane', label: 'Plane' },
+                { value: 'cylinder', label: 'Cylinder' },
             ],
         },
         {
@@ -101,6 +106,8 @@ function GeometryComponentView({ properties, children }: { properties: any, chil
             return <sphereGeometry args={args as [number, number?, number?]} />;
         case "plane":
             return <planeGeometry args={args as [number, number]} />;
+        case "cylinder":
+            return <cylinderGeometry args={args as [number, number, number, number?]} />;
         default:
             return <boxGeometry args={[1, 1, 1]} />;
     }

package/src/tools/prefabeditor/components/Input.tsx

@@ -96,11 +96,40 @@ interface InputProps {
 }
 
 export function Input({ value, onChange, step, min, max, style }: InputProps) {
+    const [draft, setDraft] = useState<string>(() => value.toString());
+
+    useEffect(() => {
+        setDraft(value.toString());
+    }, [value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        setDraft(inputValue);
+
+        const num = parseFloat(inputValue);
+        if (Number.isFinite(num)) {
+            onChange(num);
+        }
+    };
+
+    const handleBlur = () => {
+        const num = parseFloat(draft);
+        if (!Number.isFinite(num)) {
+            setDraft(value.toString());
+        }
+    };
+
     return (
         <input
-            type="number"
-            value={value}
-            onChange={(e) => onChange(parseFloat(e.target.value))}
+            type="text"
+            value={draft}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={e => {
+                if (e.key === 'Enter') {
+                    (e.target as HTMLInputElement).blur();
+                }
+            }}
             step={step}
             min={min}
             max={max}

package/src/tools/prefabeditor/components/index.ts

@@ -4,6 +4,7 @@ import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
+import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
 
@@ -14,6 +15,7 @@ export default [
     PhysicsComponent,
     SpotLightComponent,
     DirectionalLightComponent,
+    AmbientLightComponent,
     ModelComponent,
     TextComponent
 ];

package/src/tools/prefabeditor/utils.ts

@@ -1,4 +1,13 @@
 import { GameObject, Prefab } from "./types";
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
+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 function saveJson(data: Prefab, filename: string) {
@@ -33,6 +42,66 @@ export 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 function exportGLB(
+    sceneRoot: Object3D,
+    options: ExportGLBOptions = {}
+): Promise<ArrayBuffer | object> {
+    const {
+        filename = 'scene.glb',
+        binary = true,
+        onComplete,
+        onError
+    } = options;
+
+    return new Promise((resolve, reject) => {
+        const exporter = new GLTFExporter();
+
+        exporter.parse(
+            sceneRoot,
+            (result) => {
+                onComplete?.(result);
+                resolve(result);
+
+                // Trigger download if filename is provided
+                if (filename) {
+                    const blob = new Blob(
+                        [result as ArrayBuffer],
+                        { 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?.(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 async function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer> {
+    const result = await exportGLB(sceneRoot, { filename: '', binary: true });
+    return result as ArrayBuffer;
+}
+
 /** Find a node by ID in the tree */
 export function findNode(root: GameObject, id: string): GameObject | null {
     if (root.id === id) return root;