react-three-game 0.0.7 → 0.0.8

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

@@ -0,0 +1,68 @@
+import { ModelListViewer } from '../../assetviewer/page';
+import { useEffect, useState } from 'react';
+import { Component } from './ComponentRegistry';
+
+function ModelComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
+    const [modelFiles, setModelFiles] = useState<string[]>([]);
+
+    useEffect(() => {
+        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: string) => {
+        // Remove leading slash for prefab compatibility
+        const filename = file.startsWith('/') ? file.slice(1) : file;
+        onUpdate({ 'filename': filename });
+    };
+
+    return <div>
+        <div className="mb-1">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Model</label>
+            <div className="max-h-32 overflow-y-auto">
+                <ModelListViewer
+                    files={modelFiles}
+                    selected={component.properties.filename ? `/${component.properties.filename}` : undefined}
+                    onSelect={handleModelSelect}
+                    basePath={basePath}
+                />
+            </div>
+        </div>
+        <div className="flex items-center gap-1">
+            <input
+                type="checkbox"
+                id="instanced-checkbox"
+                checked={component.properties.instanced || false}
+                onChange={e => onUpdate({ 'instanced': e.target.checked })}
+                className="w-3 h-3"
+            />
+            <label htmlFor="instanced-checkbox" className="text-[9px] text-cyan-400/60">Instanced</label>
+        </div>
+    </div>;
+}
+
+// View for Model component
+function ModelComponentView({ properties, loadedModels, children }: { properties: any, loadedModels?: Record<string, any>, children?: React.ReactNode }) {
+    // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
+    if (!properties.filename || properties.instanced) return children || null;
+    if (loadedModels && loadedModels[properties.filename]) {
+        return <>{<primitive object={loadedModels[properties.filename].clone()} />}{children}</>;
+    }
+    // Optionally, render a placeholder if model is not loaded
+    return children || null;
+}
+
+const ModelComponent: Component = {
+    name: 'Model',
+    Editor: ModelComponentEditor,
+    View: ModelComponentView,
+    defaultProperties: {
+        filename: '',
+        instanced: false
+    }
+};
+
+export default ModelComponent;

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

@@ -0,0 +1,47 @@
+import { Component } from "./ComponentRegistry";
+
+function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return <div>
+        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Type</label>
+        <select
+            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={component.properties.type}
+            onChange={e => onUpdate({ type: e.target.value })}
+        >
+            <option value="dynamic">Dynamic</option>
+            <option value="fixed">Fixed</option>
+        </select>
+    </div>;
+}
+
+
+import { RigidBody } from "@react-three/rapier";
+import { Object3D } from "three";
+import { useRef } from "react";
+
+function PhysicsComponentView({ properties, children, registerRef, transform, editMode }: any) {
+    if (editMode) return children;
+    return (
+        <RigidBody
+            ref={el => registerRef && registerRef(properties.id, el as unknown as Object3D)}
+            position={transform?.position}
+            rotation={transform?.rotation}
+            scale={transform?.scale}
+            type={properties.type}
+            colliders="cuboid"
+        >
+            {children}
+        </RigidBody>
+    );
+}
+
+const PhysicsComponent: Component = {
+    name: 'Physics',
+    Editor: PhysicsComponentEditor,
+    View: PhysicsComponentView,
+    defaultProperties: {
+        type: 'dynamic'
+    }
+};
+
+export default PhysicsComponent;

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

@@ -0,0 +1,53 @@
+
+import { Component } from "./ComponentRegistry";
+
+function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return <div className="flex flex-col">
+        <div className="mb-1">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Color</label>
+            <div className="flex gap-0.5">
+                <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 })}
+                />
+                <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 })}
+                />
+            </div>
+        </div>
+        <div>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Intensity</label>
+            <input
+                type="number"
+                step="0.1"
+                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={component.properties.intensity}
+                onChange={e => onUpdate({ 'intensity': parseFloat(e.target.value) })}
+            />
+        </div>
+    </div>;
+}
+
+
+// The view component for SpotLight
+function SpotLightView({ properties }: { properties: any }) {
+    // You can expand this with more spotlight properties as needed
+    return <spotLight color={properties.color} intensity={properties.intensity} />;
+}
+
+const SpotLightComponent: Component = {
+    name: 'SpotLight',
+    Editor: SpotLightComponentEditor,
+    View: SpotLightView,
+    defaultProperties: {
+        color: '#ffffff',
+        intensity: 1.0
+    }
+};
+
+export default SpotLightComponent;

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

@@ -0,0 +1,49 @@
+
+import { Component } from "./ComponentRegistry";
+
+function TransformComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return <div className="flex flex-col">
+        <Vector3Input label="Position" value={component.properties.position} onChange={v => onUpdate({ position: v })} />
+        <Vector3Input label="Rotation" value={component.properties.rotation} onChange={v => onUpdate({ rotation: v })} />
+        <Vector3Input label="Scale" value={component.properties.scale} onChange={v => onUpdate({ scale: v })} />
+    </div>;
+}
+
+const TransformComponent: Component = {
+    name: 'Transform',
+    Editor: TransformComponentEditor,
+    defaultProperties: {
+        position: [0, 0, 0],
+        rotation: [0, 0, 0],
+        scale: [1, 1, 1]
+    }
+};
+
+export default TransformComponent;
+
+
+export function Vector3Input({ label, value, onChange }: { label: string, value: [number, number, number], onChange: (v: [number, number, number]) => void }) {
+    const handleChange = (index: number, val: string) => {
+        const newValue = [...value] as [number, number, number];
+        newValue[index] = parseFloat(val) || 0;
+        onChange(newValue);
+    };
+
+    return <div className="mb-1">
+        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">{label}</label>
+        <div className="flex gap-0.5">
+            <div className="relative flex-1">
+                <span className="absolute left-0.5 top-0 text-[8px] text-red-400/80 font-mono">X</span>
+                <input className="w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50" type="number" step="0.1" value={value[0]} onChange={e => handleChange(0, e.target.value)} />
+            </div>
+            <div className="relative flex-1">
+                <span className="absolute left-0.5 top-0 text-[8px] text-green-400/80 font-mono">Y</span>
+                <input className="w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50" type="number" step="0.1" value={value[1]} onChange={e => handleChange(1, e.target.value)} />
+            </div>
+            <div className="relative flex-1">
+                <span className="absolute left-0.5 top-0 text-[8px] text-blue-400/80 font-mono">Z</span>
+                <input className="w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50" type="number" step="0.1" value={value[2]} onChange={e => handleChange(2, e.target.value)} />
+            </div>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,16 @@
+import GeometryComponent from './GeometryComponent';
+import TransformComponent from './TransformComponent';
+import MaterialComponent from './MaterialComponent';
+import PhysicsComponent from './PhysicsComponent';
+import SpotLightComponent from './SpotLightComponent';
+import ModelComponent from './ModelComponent';
+
+export default [
+    GeometryComponent,
+    TransformComponent,
+    MaterialComponent,
+    PhysicsComponent,
+    SpotLightComponent,
+    ModelComponent
+];
+

package/src/tools/prefabeditor/page.tsx

@@ -0,0 +1,10 @@
+import PrefabEditor from "./PrefabEditor";
+
+
+export default function PrefabEditorPage() {
+    return <div className="w-screen h-screen">
+        <PrefabEditor>
+            <directionalLight position={[5, 10, 7.5]} intensity={1} castShadow />
+        </PrefabEditor>
+    </div>
+}

package/src/tools/prefabeditor/types.ts

@@ -0,0 +1,28 @@
+import { ThreeElements } from "@react-three/fiber"
+
+export interface Prefab {
+    id: string;
+    name: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    assets?: string[] | {[assetName: string]: string}; // List of asset URLs or a mapping of asset names to URLs
+    onStart?: (target: any) => void; // The logic function to run when the map starts
+    root: GameObject; // The root node of the scene graph
+}
+
+export interface GameObject {
+    id: string;
+    enabled: boolean;
+    visible: boolean;
+    ref?: any;
+    children?: GameObject[];
+    components?: {
+        [uuid: string]: Component | undefined;
+    };
+}
+
+interface Component {
+    type: string;
+    properties: { [key: string]: any };
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES6",                           
+    "lib": ["ES2017", "DOM"],                  
+    "module": "ESNext",                        
+    "jsx": "react-jsx",                        
+    "declaration": true,                       
+    "declarationDir": "dist",                  
+    "outDir": "dist",                          
+    "strict": true,                           
+    "esModuleInterop": true,                  
+    "skipLibCheck": true,                     
+    "moduleResolution": "bundler",               
+    "allowSyntheticDefaultImports": true      
+  },
+  "include": ["src"],                          
+  "exclude": ["node_modules", "dist"]          
+}