react-three-game 0.0.36 → 0.0.38

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { MapControls, TransformControls, useHelper } from "@react-three/drei";
-import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { BoxHelper, Euler, Group, Matrix4, Object3D, Quaternion, SRGBColorSpace, Texture, TextureLoader, Vector3, } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 
@@ -9,63 +9,64 @@ import { Prefab, GameObject as GameObjectType } from "./types";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
-import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
+import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
-
-/* -------------------------------------------------- */
-/* Setup */
-/* -------------------------------------------------- */
+import { EditorContext } from "./EditorContext";
 
 components.forEach(registerComponent);
 
 const IDENTITY = new Matrix4();
 
-/* -------------------------------------------------- */
-/* PrefabRoot */
-/* -------------------------------------------------- */
+export interface PrefabRootRef {
+    root: Group | null;
+}
 
-export const PrefabRoot = forwardRef<Group, {
+export const PrefabRoot = forwardRef<PrefabRootRef, {
     editMode?: boolean;
     data: Prefab;
     onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
-    transformMode?: "translate" | "rotate" | "scale";
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     basePath?: string;
-}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
+}>(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "" }, ref) => {
 
+    // optional editor context
+    const editorContext = useContext(EditorContext);
+    const transformMode = editorContext?.transformMode ?? "translate";
+    const snapResolution = editorContext?.snapResolution ?? 0;
+
+    // prefab root state
     const [models, setModels] = useState<Record<string, Object3D>>({});
     const [textures, setTextures] = useState<Record<string, Texture>>({});
     const loading = useRef(new Set<string>());
     const objectRefs = useRef<Record<string, Object3D | null>>({});
     const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
+    const rootRef = useRef<Group>(null);
+
+    useImperativeHandle(ref, () => ({
+        root: rootRef.current
+    }), []);
 
     const registerRef = useCallback((id: string, obj: Object3D | null) => {
         objectRefs.current[id] = obj;
         if (id === selectedId) setSelectedObject(obj);
     }, [selectedId]);
 
-    // Suppress TransformControls scene graph warnings during transitions
     useEffect(() => {
         const originalError = console.error;
         console.error = (...args: any[]) => {
-            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) {
-                return; // Suppress this specific error
-            }
+            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) return;
             originalError.apply(console, args);
         };
-        return () => {
-            console.error = originalError;
-        };
+        return () => { console.error = originalError; };
     }, []);
 
     useEffect(() => {
         setSelectedObject(selectedId ? objectRefs.current[selectedId] ?? null : null);
     }, [selectedId]);
 
-    /* ---------------- Transform writeback ---------------- */
-
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange) return;
 
@@ -91,8 +92,6 @@ export const PrefabRoot = forwardRef<Group, {
         onPrefabChange({ ...data, root });
     };
 
-    /* ---------------- Asset loading ---------------- */
-
     useEffect(() => {
         const modelsToLoad = new Set<string>();
         const texturesToLoad = new Set<string>();
@@ -133,10 +132,8 @@ export const PrefabRoot = forwardRef<Group, {
         });
     }, [data, models, textures]);
 
-    /* ---------------- Render ---------------- */
-
     return (
-        <group ref={ref}>
+        <group ref={rootRef}>
             <GameInstanceProvider
                 models={models}
                 selectedId={selectedId}
@@ -148,6 +145,7 @@ export const PrefabRoot = forwardRef<Group, {
                     gameObject={data.root}
                     selectedId={selectedId}
                     onSelect={editMode ? onSelect : undefined}
+                    onClick={onClick}
                     registerRef={registerRef}
                     loadedModels={models}
                     loadedTextures={textures}
@@ -161,10 +159,14 @@ export const PrefabRoot = forwardRef<Group, {
                     <MapControls makeDefault />
                     {selectedObject && (
                         <TransformControls
+                            key={`transform-${snapResolution}`}
                             object={selectedObject}
                             mode={transformMode}
                             space="local"
                             onObjectChange={onTransformChange}
+                            translationSnap={snapResolution > 0 ? snapResolution : undefined}
+                            rotationSnap={snapResolution > 0 ? snapResolution : undefined}
+                            scaleSnap={snapResolution > 0 ? snapResolution : undefined}
                         />
                     )}
                 </>
@@ -173,54 +175,110 @@ export const PrefabRoot = forwardRef<Group, {
     );
 });
 
-/* -------------------------------------------------- */
-/* Renderer Switch */
-/* -------------------------------------------------- */
-
 export function GameObjectRenderer(props: RendererProps) {
     const node = props.gameObject;
     if (!node || node.hidden || node.disabled) return null;
-    return node.components?.model?.properties?.instanced
-        ? <InstancedNode {...props} />
-        : <StandardNode {...props} />;
+
+    const isInstanced = node.components?.model?.properties?.instanced;
+    const prevInstancedRef = useRef<boolean | undefined>(undefined);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+
+    useEffect(() => {
+        if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
+            setIsTransitioning(true);
+            const timer = setTimeout(() => setIsTransitioning(false), 100);
+            return () => clearTimeout(timer);
+        }
+        prevInstancedRef.current = isInstanced;
+    }, [isInstanced]);
+
+    if (isTransitioning) return null;
+
+    const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    return isInstanced
+        ? <InstancedNode key={key} {...props} />
+        : <StandardNode key={key} {...props} />;
 }
 
-/* -------------------------------------------------- */
-/* InstancedNode (terminal) */
-/* -------------------------------------------------- */
 function isPhysicsProps(v: any): v is PhysicsProps {
     return v?.type === "fixed" || v?.type === "dynamic";
 }
 
-function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode }: RendererProps) {
+function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }: RendererProps) {
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const { position, rotation, scale } = decompose(world);
+    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+    const localTransform = getNodeTransformProps(gameObject);
+
     const physicsProps = isPhysicsProps(
         gameObject.components?.physics?.properties
     )
         ? gameObject.components?.physics?.properties
         : undefined;
 
+    const groupRef = useRef<Group>(null);
+    const clickValid = useRef(false);
+
+    useEffect(() => {
+        if (editMode) {
+            registerRef(gameObject.id, groupRef.current);
+            return () => registerRef(gameObject.id, null);
+        }
+    }, [gameObject.id, registerRef, editMode]);
+
+    const modelUrl = gameObject.components?.model?.properties?.filename;
+
+    if (editMode) {
+        return (
+            <>
+                <group
+                    ref={groupRef}
+                    position={localTransform.position}
+                    rotation={localTransform.rotation}
+                    scale={localTransform.scale}
+                    onPointerDown={(e) => { e.stopPropagation(); clickValid.current = true; }}
+                    onPointerMove={() => { clickValid.current = false; }}
+                    onPointerUp={(e) => {
+                        if (clickValid.current) {
+                            e.stopPropagation();
+                            onSelect?.(gameObject.id);
+                            onClick?.(e, gameObject);
+                        }
+                        clickValid.current = false;
+                    }}
+                >
+                    <mesh visible={false}>
+                        <boxGeometry args={[0.01, 0.01, 0.01]} />
+                    </mesh>
+                </group>
+                <GameInstance
+                    id={gameObject.id}
+                    modelUrl={modelUrl}
+                    position={worldPosition}
+                    rotation={worldRotation}
+                    scale={worldScale}
+                    physics={physicsProps}
+                />
+            </>
+        );
+    }
+
     return (
         <GameInstance
             id={gameObject.id}
             modelUrl={gameObject.components?.model?.properties?.filename}
-            position={position}
-            rotation={rotation}
-            scale={scale}
-            physics={editMode ? undefined : physicsProps}
+            position={worldPosition}
+            rotation={worldRotation}
+            scale={worldScale}
+            physics={physicsProps}
         />
     );
 }
 
-/* -------------------------------------------------- */
-/* StandardNode */
-/* -------------------------------------------------- */
-
 function StandardNode({
     gameObject,
     selectedId,
     onSelect,
+    onClick,
     registerRef,
     loadedModels,
     loadedTextures,
@@ -229,12 +287,13 @@ function StandardNode({
 }: RendererProps) {
 
     const groupRef = useRef<Object3D | null>(null);
+    const helperRef = useRef<Object3D | null>(null);
     const clickValid = useRef(false);
     const isSelected = selectedId === gameObject.id;
-    const helperRef = groupRef as React.RefObject<Object3D>;
+    const stillInstanced = useInstanceCheck(gameObject.id);
 
     useHelper(
-        editMode && isSelected ? helperRef : null,
+        editMode && isSelected ? helperRef as React.RefObject<Object3D> : null,
         BoxHelper,
         "cyan"
     );
@@ -255,26 +314,34 @@ function StandardNode({
         if (clickValid.current) {
             e.stopPropagation();
             onSelect?.(gameObject.id);
+            onClick?.(e, gameObject);
         }
         clickValid.current = false;
     };
 
+    const physics = gameObject.components?.physics;
+    const ready = !gameObject.components?.model ||
+        loadedModels[gameObject.components.model.properties.filename];
+    const hasPhysics = physics && ready && !stillInstanced;
+    const transform = getNodeTransformProps(gameObject);
+    const physicsDef = hasPhysics ? getComponent("Physics") : null;
+    const isInstanced = gameObject.components?.model?.properties?.instanced;
+    const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
+
     const inner = (
         <group
-            ref={groupRef}
-            {...getNodeTransformProps(gameObject)}
-            onPointerDown={onDown}
-            onPointerMove={() => (clickValid.current = false)}
-            onPointerUp={onUp}
+            onPointerDown={editMode ? onDown : undefined}
+            onPointerMove={editMode ? () => (clickValid.current = false) : undefined}
+            onPointerUp={editMode ? onUp : undefined}
         >
             {renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix)}
             {gameObject.children?.map(child => (
                 <GameObjectRenderer
                     key={child.id}
-                    {...{ child }}
                     gameObject={child}
                     selectedId={selectedId}
                     onSelect={onSelect}
+                    onClick={onClick}
                     registerRef={registerRef}
                     loadedModels={loadedModels}
                     loadedTextures={loadedTextures}
@@ -285,28 +352,74 @@ function StandardNode({
         </group>
     );
 
-    const physics = gameObject.components?.physics;
-    const ready = !gameObject.components?.model ||
-        loadedModels[gameObject.components.model.properties.filename];
+    if (editMode) {
+        return (
+            <>
+                <group
+                    ref={groupRef}
+                    position={transform.position}
+                    rotation={transform.rotation}
+                    scale={transform.scale}
+                >
+                    <mesh visible={false}>
+                        <boxGeometry args={[0.01, 0.01, 0.01]} />
+                    </mesh>
+                </group>
+                <group
+                    ref={helperRef}
+                    position={transform.position}
+                    rotation={transform.rotation}
+                    scale={transform.scale}
+                >
+                    {inner}
+                </group>
+                {hasPhysics && physicsDef?.View ? (
+                    <physicsDef.View
+                        key={physicsKey}
+                        properties={physics.properties}
+                        position={transform.position}
+                        rotation={transform.rotation}
+                        scale={transform.scale}
+                        editMode={editMode}
+                    >{inner}</physicsDef.View>
+                ) : null}
+            </>
+        );
+    }
 
-    if (physics && !editMode && ready) {
-        const def = getComponent("Physics");
-        return def?.View
-            ? <def.View properties={physics.properties}>{inner}</def.View>
-            : inner;
+    if (hasPhysics && physicsDef?.View) {
+        return (
+            <physicsDef.View
+                key={physicsKey}
+                properties={physics.properties}
+                position={transform.position}
+                rotation={transform.rotation}
+                scale={transform.scale}
+                editMode={editMode}
+            >{inner}</physicsDef.View>
+        );
     }
 
-    return inner;
+    return (
+        <group
+            ref={groupRef}
+            position={transform.position}
+            rotation={transform.rotation}
+            scale={transform.scale}
+            onPointerDown={onDown}
+            onPointerMove={() => (clickValid.current = false)}
+            onPointerUp={onUp}
+        >
+            {inner}
+        </group>
+    );
 }
 
-/* -------------------------------------------------- */
-/* Types & Helpers */
-/* -------------------------------------------------- */
-
 interface RendererProps {
-    gameObject: GameObjectType; // ← no longer optional
+    gameObject: GameObjectType;
     selectedId?: string | null;
     onSelect?: (id: string) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     registerRef: (id: string, obj: Object3D | null) => void;
     loadedModels: Record<string, Object3D>;
     loadedTextures: Record<string, Texture>;
@@ -401,7 +514,6 @@ function renderCoreNode(
                 const def = getComponent(comp.type);
                 if (!def?.View) return;
 
-                // crude but works with your existing component API
                 if (def.View.toString().includes("children")) {
                     wrappers.push({ key, View: def.View, properties: comp.properties });
                 } else {

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

@@ -52,12 +52,19 @@ export function Label({ children }: { children: React.ReactNode }) {
 export function Vector3Input({
     label,
     value,
-    onChange
+    onChange,
+    snap
 }: {
     label: string;
     value: [number, number, number];
     onChange: (v: [number, number, number]) => void;
+    snap?: number;
 }) {
+    const snapValue = (num: number) => {
+        if (!snap) return num;
+        return Math.round(num / snap) * snap;
+    };
+
     const [draft, setDraft] = useState<[string, string, string]>(
         () => value.map(v => v.toString()) as any
     );
@@ -77,7 +84,7 @@ export function Vector3Input({
         const num = parseFloat(draft[index]);
         if (Number.isFinite(num)) {
             const next = [...value] as [number, number, number];
-            next[index] = num;
+            next[index] = snapValue(num);
             onChange(next);
         }
     };
@@ -105,7 +112,8 @@ export function Vector3Input({
         if (e.shiftKey) speed *= 0.1; // fine
         if (e.altKey) speed *= 5;     // coarse
 
-        const nextValue = startValue + dx * speed;
+        const rawValue = startValue + dx * speed;
+        const nextValue = snapValue(rawValue);
         const next = [...value] as [number, number, number];
         next[index] = nextValue;
 

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

@@ -1,7 +1,9 @@
-import { RigidBody } from "@react-three/rapier";
+import { RigidBody, RapierRigidBody } from "@react-three/rapier";
 import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
 import { Component } from "./ComponentRegistry";
 import { Label } from "./Input";
+import { Quaternion, Euler } from 'three';
 
 export interface PhysicsProps {
     type: "fixed" | "dynamic";
@@ -52,18 +54,29 @@ interface PhysicsViewProps {
     properties: { type?: 'dynamic' | 'fixed'; collider?: string };
     editMode?: boolean;
     children?: ReactNode;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    scale?: [number, number, number];
 }
 
-function PhysicsComponentView({ properties, editMode, children }: PhysicsViewProps) {
-    if (editMode) return <>{children}</>;
-
+function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }: PhysicsViewProps) {
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
 
-    // Remount RigidBody when collider/type changes to avoid Rapier hook dependency warnings
-    const rbKey = `${properties.type || 'dynamic'}_${colliders}`;
+    // In edit mode, include position/rotation in key to force remount when transform changes
+    // This ensures the RigidBody debug visualization updates even when physics is paused
+    const rbKey = editMode
+        ? `${properties.type || 'dynamic'}_${colliders}_${position?.join(',')}_${rotation?.join(',')}`
+        : `${properties.type || 'dynamic'}_${colliders}`;
 
     return (
-        <RigidBody key={rbKey} type={properties.type} colliders={colliders as any}>
+        <RigidBody
+            key={rbKey}
+            type={properties.type}
+            colliders={colliders as any}
+            position={position}
+            rotation={rotation}
+            scale={scale}
+        >
             {children}
         </RigidBody>
     );

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

@@ -1,5 +1,6 @@
 import { Component } from "./ComponentRegistry";
 import { Vector3Input, Label } from "./Input";
+import { useEditorContext } from "../EditorContext";
 
 const buttonStyle = {
     padding: '2px 6px',
@@ -18,10 +19,12 @@ function TransformComponentEditor({ component, onUpdate, transformMode, setTrans
     transformMode?: "translate" | "rotate" | "scale";
     setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
 }) {
+    const { snapResolution, setSnapResolution } = useEditorContext();
+
     return <div style={{ display: 'flex', flexDirection: 'column' }}>
         {transformMode && setTransformMode && (
             <div style={{ marginBottom: 8 }}>
-                <Label>Transform Mode</Label>
+                <Label>Transform Mode {snapResolution > 0 && `(Snap: ${snapResolution})`}</Label>
                 <div style={{ display: 'flex', gap: 6 }}>
                     {["translate", "rotate", "scale"].map(mode => {
                         const isActive = transformMode === mode;
@@ -45,11 +48,29 @@ function TransformComponentEditor({ component, onUpdate, transformMode, setTrans
                         );
                     })}
                 </div>
+                <div style={{ marginTop: 6 }}>
+                    <button
+                        onClick={() => setSnapResolution(snapResolution > 0 ? 0 : 0.1)}
+                        style={{
+                            ...buttonStyle,
+                            background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent',
+                            width: '100%',
+                        }}
+                        onPointerEnter={(e) => {
+                            if (snapResolution === 0) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                        }}
+                        onPointerLeave={(e) => {
+                            if (snapResolution === 0) e.currentTarget.style.background = 'transparent';
+                        }}
+                    >
+                        Snap: {snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'}
+                    </button>
+                </div>
             </div>
         )}
-        <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 })} />
+        <Vector3Input label="Position" value={component.properties.position} onChange={v => onUpdate({ position: v })} snap={snapResolution} />
+        <Vector3Input label="Rotation" value={component.properties.rotation} onChange={v => onUpdate({ rotation: v })} snap={snapResolution} />
+        <Vector3Input label="Scale" value={component.properties.scale} onChange={v => onUpdate({ scale: v })} snap={snapResolution} />
     </div>;
 }
 

package/src/tools/prefabeditor/utils.ts

@@ -1,4 +1,37 @@
-import { GameObject } from "./types";
+import { GameObject, Prefab } from "./types";
+
+/** Save a prefab as JSON file */
+export function saveJson(data: Prefab, filename: string) {
+    const a = document.createElement('a');
+    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
+    a.download = `${filename || 'prefab'}.json`;
+    a.click();
+}
+
+/** Load a prefab from JSON file */
+export function loadJson(): Promise<Prefab | undefined> {
+    return new Promise(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') resolve(JSON.parse(text) as Prefab);
+                } catch (err) {
+                    console.error('Error parsing prefab JSON:', err);
+                    resolve(undefined);
+                }
+            };
+            reader.readAsText(file);
+        };
+        input.click();
+    });
+}
 
 /** Find a node by ID in the tree */
 export function findNode(root: GameObject, id: string): GameObject | null {
@@ -74,6 +107,15 @@ export function cloneNode(node: GameObject): GameObject {
     };
 }
 
+/** Recursively update all IDs in a node tree */
+export function regenerateIds(node: GameObject): GameObject {
+    return {
+        ...node,
+        id: crypto.randomUUID(),
+        children: node.children?.map(regenerateIds)
+    };
+}
+
 /** Get component data from a node */
 export function getComponent<T = any>(node: GameObject, type: string): T | undefined {
     const comp = Object.values(node.components ?? {}).find(c => c?.type === type);