react-three-game 0.0.7 → 0.0.9

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -0,0 +1,326 @@
+import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
+import { Merged } from '@react-three/drei';
+import * as THREE from 'three';
+import { InstancedRigidBodies } from "@react-three/rapier";
+
+// --- Types ---
+export type InstanceData = {
+    id: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+    meshPath: string;
+    physics?: { type: 'dynamic' | 'fixed' };
+};
+
+function arrayEquals(a: number[], b: number[]) {
+    if (a === b) return true;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) return false;
+    }
+    return true;
+}
+
+function instanceEquals(a: InstanceData, b: InstanceData) {
+    return a.id === b.id &&
+        a.meshPath === b.meshPath &&
+        arrayEquals(a.position, b.position) &&
+        arrayEquals(a.rotation, b.rotation) &&
+        arrayEquals(a.scale, b.scale) &&
+        a.physics?.type === b.physics?.type;
+}
+
+// --- Context ---
+type GameInstanceContextType = {
+    addInstance: (instance: InstanceData) => void;
+    removeInstance: (id: string) => void;
+    instances: InstanceData[];
+    meshes: Record<string, THREE.Mesh>;
+    instancesMap?: Record<string, React.ComponentType<any>>;
+    modelParts?: Record<string, number>;
+};
+const GameInstanceContext = createContext<GameInstanceContextType | null>(null);
+
+export function GameInstanceProvider({
+    children,
+    models
+    , onSelect, registerRef
+}: {
+    children: React.ReactNode,
+    models: { [filename: string]: THREE.Object3D },
+    onSelect?: (id: string | null) => void,
+    registerRef?: (id: string, obj: THREE.Object3D | null) => void,
+}) {
+    const [instances, setInstances] = useState<InstanceData[]>([]);
+
+    const addInstance = useCallback((instance: InstanceData) => {
+        setInstances(prev => {
+            const idx = prev.findIndex(i => i.id === instance.id);
+            if (idx !== -1) {
+                if (instanceEquals(prev[idx], instance)) {
+                    return prev;
+                }
+                const copy = [...prev];
+                copy[idx] = instance;
+                return copy;
+            }
+            return [...prev, instance];
+        });
+    }, []);
+
+    const removeInstance = useCallback((id: string) => {
+        setInstances(prev => {
+            if (!prev.find(i => i.id === id)) return prev;
+            return prev.filter(i => i.id !== id);
+        });
+    }, []);
+
+    // Flatten all model meshes once
+    const { flatMeshes, modelParts } = useMemo(() => {
+        const flatMeshes: Record<string, THREE.Mesh> = {};
+        const modelParts: Record<string, number> = {};
+
+        Object.entries(models).forEach(([modelKey, model]) => {
+            const root = model;
+            root.updateWorldMatrix(false, true);
+            const rootInverse = new THREE.Matrix4().copy(root.matrixWorld).invert();
+
+            let partIndex = 0;
+
+            root.traverse((obj: any) => {
+                if (obj.isMesh) {
+                    const geom = obj.geometry.clone();
+
+                    const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
+                    geom.applyMatrix4(relativeTransform);
+
+                    const partKey = `${modelKey}__${partIndex}`;
+                    flatMeshes[partKey] = new THREE.Mesh(geom, obj.material);
+                    partIndex++;
+                }
+            });
+            modelParts[modelKey] = partIndex;
+        });
+
+        return { flatMeshes, modelParts };
+    }, [models]);
+
+    // Group instances by meshPath + physics type
+    const grouped = useMemo(() => {
+        const groups: Record<string, { physicsType: string, instances: InstanceData[] }> = {};
+        for (const inst of instances) {
+            const type = inst.physics?.type || 'none';
+            const key = `${inst.meshPath}__${type}`;
+            if (!groups[key]) groups[key] = { physicsType: type, instances: [] };
+            groups[key].instances.push(inst);
+        }
+        return groups;
+    }, [instances]);
+
+    return (
+        <GameInstanceContext.Provider
+            value={{
+                addInstance,
+                removeInstance,
+                instances,
+                meshes: flatMeshes,
+                modelParts
+            }}
+        >
+            {/* 1) Normal prefab hierarchy: NOT inside any <Merged> */}
+            {children}
+
+            {/* 2) Physics instanced groups: no <Merged>, just InstancedRigidBodies */}
+            {Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType === 'none') return null;
+                const modelKey = group.instances[0].meshPath;
+                const partCount = modelParts[modelKey] || 0;
+                if (partCount === 0) return null;
+
+                return (
+                    <InstancedRigidGroup
+                        key={key}
+                        group={group}
+                        modelKey={modelKey}
+                        partCount={partCount}
+                        flatMeshes={flatMeshes}
+                    />
+                );
+            })}
+
+            {/* 3) Non-physics instanced visuals: own <Merged> per model */}
+            {Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType !== 'none') return null;
+
+                const modelKey = group.instances[0].meshPath;
+                const partCount = modelParts[modelKey] || 0;
+                if (partCount === 0) return null;
+
+                // Restrict meshes to just this model's parts for this Merged
+                const meshesForModel: Record<string, THREE.Mesh> = {};
+                for (let i = 0; i < partCount; i++) {
+                    const partKey = `${modelKey}__${i}`;
+                    meshesForModel[partKey] = flatMeshes[partKey];
+                }
+
+                return (
+                    <Merged
+                        key={key}
+                        meshes={meshesForModel}
+                        castShadow
+                        receiveShadow
+                    >
+                        {(instancesMap: any) => (
+                            <NonPhysicsInstancedGroup
+                                modelKey={modelKey}
+                                group={group}
+                                partCount={partCount}
+                                instancesMap={instancesMap}
+                                onSelect={onSelect}
+                                registerRef={registerRef}
+                            />
+                        )}
+                    </Merged>
+                );
+            })}
+        </GameInstanceContext.Provider>
+    );
+}
+
+// Physics instancing stays the same
+function InstancedRigidGroup({
+    group,
+    modelKey,
+    partCount,
+    flatMeshes
+}: {
+    group: { physicsType: string, instances: InstanceData[] },
+    modelKey: string,
+    partCount: number,
+    flatMeshes: Record<string, THREE.Mesh>
+}) {
+    const instances = useMemo(
+        () => group.instances.map(inst => ({
+            key: inst.id,
+            position: inst.position,
+            rotation: inst.rotation,
+            scale: inst.scale,
+        })),
+        [group.instances]
+    );
+
+    return (
+        <InstancedRigidBodies
+            instances={instances}
+            colliders={group.physicsType === 'fixed' ? 'trimesh' : 'hull'}
+            type={group.physicsType as 'dynamic' | 'fixed'}
+        >
+            {Array.from({ length: partCount }).map((_, i) => {
+                const mesh = flatMeshes[`${modelKey}__${i}`];
+                return (
+                    <instancedMesh
+                        key={i}
+                        args={[mesh.geometry, mesh.material, group.instances.length]}
+                        castShadow
+                        receiveShadow
+                        frustumCulled={false}
+                    />
+                );
+            })}
+        </InstancedRigidBodies>
+    );
+}
+
+// Non-physics instanced visuals: per-instance group using Merged's Instance components
+function NonPhysicsInstancedGroup({
+    modelKey,
+    group,
+    partCount,
+    instancesMap
+    , onSelect, registerRef
+}: {
+    modelKey: string;
+    group: { physicsType: string, instances: InstanceData[] };
+    partCount: number;
+    instancesMap: Record<string, React.ComponentType<any>>;
+    onSelect?: (id: string | null) => void;
+    registerRef?: (id: string, obj: THREE.Object3D | null) => void;
+}) {
+    const clickValid = useRef(false);
+    const handlePointerDown = (e: any) => { e.stopPropagation(); clickValid.current = true; };
+    const handlePointerMove = () => { if (clickValid.current) clickValid.current = false; };
+    const handlePointerUp = (e: any, id: string) => {
+        if (clickValid.current) {
+            e.stopPropagation();
+            onSelect?.(id);
+        }
+        clickValid.current = false;
+    };
+
+    return (
+        <>
+            {group.instances.map(inst => (
+                <group
+                    key={inst.id}
+                    ref={(el) => { registerRef?.(inst.id, el as unknown as THREE.Object3D | null); }}
+                    position={inst.position}
+                    rotation={inst.rotation}
+                    scale={inst.scale}
+                    onPointerDown={handlePointerDown}
+                    onPointerMove={handlePointerMove}
+                    onPointerUp={(e) => handlePointerUp(e, inst.id)}
+                >
+                    {Array.from({ length: partCount }).map((_, i) => {
+                        const Instance = instancesMap[`${modelKey}__${i}`];
+                        if (!Instance) return null;
+                        return <Instance key={i} />;
+                    })}
+                </group>
+            ))}
+        </>
+    );
+}
+
+
+// --- GameInstance: just registers an instance, renders nothing ---
+export const GameInstance = React.forwardRef<THREE.Group, {
+    id: string;
+    modelUrl: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+    physics?: { type: 'dynamic' | 'fixed' };
+}>(({
+    id,
+    modelUrl,
+    position,
+    rotation,
+    scale,
+    physics = undefined,
+}, ref) => {
+    const ctx = useContext(GameInstanceContext);
+    const addInstance = ctx?.addInstance;
+    const removeInstance = ctx?.removeInstance;
+
+    const instance = useMemo<InstanceData>(() => ({
+        id,
+        meshPath: modelUrl,
+        position,
+        rotation,
+        scale,
+        physics,
+    }), [id, modelUrl, position, rotation, scale, physics]);
+
+    useEffect(() => {
+        if (!addInstance || !removeInstance) return;
+        addInstance(instance);
+        return () => {
+            removeInstance(instance.id);
+        };
+    }, [addInstance, removeInstance, instance]);
+
+
+    // No visual here – provider will render visuals for all instances
+    return null;
+});

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import GameCanvas from "../../shared/GameCanvas";
+import { useState, useRef, } from "react";
+import { Group, } from "three";
+import { Prefab, } from "./types";
+import PrefabRoot from "./PrefabRoot";
+import { Physics } from "@react-three/rapier";
+import EditorUI from "./EditorUI";
+
+const PrefabEditor = ({ basePath, initialPrefab, children }: { basePath?: string, initialPrefab?: Prefab, children?: React.ReactNode }) => {
+    const [editMode, setEditMode] = useState(true);
+    const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? {
+        "id": "prefab-default",
+        "name": "New Prefab",
+        "root": {
+            "id": "root",
+            "enabled": true,
+            "visible": true,
+            "components": {
+                "transform": {
+                    "type": "Transform",
+                    "properties": {
+                        "position": [0, 0, 0],
+                        "rotation": [0, 0, 0],
+                        "scale": [1, 1, 1]
+                    }
+                }
+            }
+        }
+    });
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate");
+    const prefabRef = useRef<Group>(null);
+
+    return <>
+        <GameCanvas>
+            <Physics paused={editMode}>
+                <ambientLight intensity={1.5} />
+                <gridHelper args={[10, 10]} position={[0, -1, 0]} />
+                <PrefabRoot
+                    data={loadedPrefab}
+                    ref={prefabRef}
+
+                    // props for edit mode
+                    editMode={editMode}
+                    onPrefabChange={setLoadedPrefab}
+                    selectedId={selectedId}
+                    onSelect={setSelectedId}
+                    transformMode={transformMode}
+                    setTransformMode={setTransformMode}
+                    basePath={basePath}
+                />
+                {children}
+            </Physics>
+        </GameCanvas>
+
+        <div style={{ position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }} className="bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1">
+            <button
+                className="px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30"
+                onClick={() => setEditMode(!editMode)}
+            >
+                {editMode ? "▶" : "⏸"}
+            </button>
+            <span className="text-cyan-500/30 text-[10px]">|</span>
+            <button
+                className="px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30"
+                onClick={async () => {
+                    const prefab = await loadJson();
+                    if (prefab) setLoadedPrefab(prefab);
+                }}
+            >
+                📥
+            </button>
+            <button
+                className="px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30"
+                onClick={() => saveJson(loadedPrefab, "prefab")}
+            >
+                💾
+            </button>
+        </div>
+        {editMode && <EditorUI
+            prefabData={loadedPrefab}
+            setPrefabData={setLoadedPrefab}
+            selectedId={selectedId}
+            setSelectedId={setSelectedId}
+            transformMode={transformMode}
+            setTransformMode={setTransformMode}
+            basePath={basePath}
+        />}
+    </>
+}
+
+const saveJson = (data: any, filename: string) => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", (filename || 'prefab') + ".json");
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+};
+
+const loadJson = async () => {
+    return new Promise<Prefab | undefined>((resolve) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json,application/json';
+        input.onchange = e => {
+            const file = (e.target as HTMLInputElement).files?.[0];
+            if (!file) return resolve(undefined);
+            const reader = new FileReader();
+            reader.onload = e => {
+                try {
+                    const text = e.target?.result;
+                    if (typeof text === 'string') {
+                        const json = JSON.parse(text);
+                        resolve(json as Prefab);
+                    }
+                } catch (err) {
+                    console.error('Error parsing prefab JSON:', err);
+                    resolve(undefined);
+                }
+            };
+            reader.readAsText(file);
+        };
+        input.click();
+    });
+};
+export default PrefabEditor;