react-three-game 0.0.17 → 0.0.18

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -1,7 +1,7 @@
 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";
+import { Mesh, Matrix4, Object3D, Group } from "three";
 
 // --- Types ---
 export type InstanceData = {
@@ -13,7 +13,8 @@ export type InstanceData = {
     physics?: { type: 'dynamic' | 'fixed' };
 };
 
-function arrayEquals(a: number[], b: number[]) {
+// Helper functions for comparison
+function arrayEquals(a: number[], b: number[]): boolean {
     if (a === b) return true;
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
@@ -22,7 +23,7 @@ function arrayEquals(a: number[], b: number[]) {
     return true;
 }
 
-function instanceEquals(a: InstanceData, b: InstanceData) {
+function instanceEquals(a: InstanceData, b: InstanceData): boolean {
     return a.id === b.id &&
         a.meshPath === b.meshPath &&
         arrayEquals(a.position, b.position) &&
@@ -36,7 +37,7 @@ type GameInstanceContextType = {
     addInstance: (instance: InstanceData) => void;
     removeInstance: (id: string) => void;
     instances: InstanceData[];
-    meshes: Record<string, THREE.Mesh>;
+    meshes: Record<string, Mesh>;
     instancesMap?: Record<string, React.ComponentType<any>>;
     modelParts?: Record<string, number>;
 };
@@ -44,13 +45,14 @@ const GameInstanceContext = createContext<GameInstanceContextType | null>(null);
 
 export function GameInstanceProvider({
     children,
-    models
-    , onSelect, registerRef
+    models,
+    onSelect,
+    registerRef
 }: {
     children: React.ReactNode,
-    models: { [filename: string]: THREE.Object3D },
+    models: { [filename: string]: Object3D },
     onSelect?: (id: string | null) => void,
-    registerRef?: (id: string, obj: THREE.Object3D | null) => void,
+    registerRef?: (id: string, obj: Object3D | null) => void,
 }) {
     const [instances, setInstances] = useState<InstanceData[]>([]);
 
@@ -58,6 +60,7 @@ export function GameInstanceProvider({
         setInstances(prev => {
             const idx = prev.findIndex(i => i.id === instance.id);
             if (idx !== -1) {
+                // Update existing if changed
                 if (instanceEquals(prev[idx], instance)) {
                     return prev;
                 }
@@ -65,6 +68,7 @@ export function GameInstanceProvider({
                 copy[idx] = instance;
                 return copy;
             }
+            // Add new
             return [...prev, instance];
         });
     }, []);
@@ -76,27 +80,26 @@ export function GameInstanceProvider({
         });
     }, []);
 
-    // Flatten all model meshes once
+    // Flatten all model meshes once (models → flat mesh parts)
     const { flatMeshes, modelParts } = useMemo(() => {
-        const flatMeshes: Record<string, THREE.Mesh> = {};
+        const flatMeshes: Record<string, 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();
+            const rootInverse = new 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);
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
                     partIndex++;
                 }
             });
@@ -106,7 +109,7 @@ export function GameInstanceProvider({
         return { flatMeshes, modelParts };
     }, [models]);
 
-    // Group instances by meshPath + physics type
+    // Group instances by meshPath + physics type for batch rendering
     const grouped = useMemo(() => {
         const groups: Record<string, { physicsType: string, instances: InstanceData[] }> = {};
         for (const inst of instances) {
@@ -128,10 +131,10 @@ export function GameInstanceProvider({
                 modelParts
             }}
         >
-            {/* 1) Normal prefab hierarchy: NOT inside any <Merged> */}
+            {/* Render normal prefab hierarchy (non-instanced objects) */}
             {children}
 
-            {/* 2) Physics instanced groups: no <Merged>, just InstancedRigidBodies */}
+            {/* Render physics-enabled instanced groups using InstancedRigidBodies */}
             {Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType === 'none') return null;
                 const modelKey = group.instances[0].meshPath;
@@ -149,7 +152,7 @@ export function GameInstanceProvider({
                 );
             })}
 
-            {/* 3) Non-physics instanced visuals: own <Merged> per model */}
+            {/* Render non-physics instanced visuals using Merged (one per model type) */}
             {Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType !== 'none') return null;
 
@@ -157,8 +160,8 @@ export function GameInstanceProvider({
                 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> = {};
+                // Create mesh subset for this specific model
+                const meshesForModel: Record<string, Mesh> = {};
                 for (let i = 0; i < partCount; i++) {
                     const partKey = `${modelKey}__${i}`;
                     meshesForModel[partKey] = flatMeshes[partKey];
@@ -188,7 +191,7 @@ export function GameInstanceProvider({
     );
 }
 
-// Physics instancing stays the same
+// Render physics-enabled instances using InstancedRigidBodies
 function InstancedRigidGroup({
     group,
     modelKey,
@@ -198,7 +201,7 @@ function InstancedRigidGroup({
     group: { physicsType: string, instances: InstanceData[] },
     modelKey: string,
     partCount: number,
-    flatMeshes: Record<string, THREE.Mesh>
+    flatMeshes: Record<string, Mesh>
 }) {
     const instances = useMemo(
         () => group.instances.map(inst => ({
@@ -232,24 +235,33 @@ function InstancedRigidGroup({
     );
 }
 
-// Non-physics instanced visuals: per-instance group using Merged's Instance components
+// Render non-physics instances using Merged's per-instance groups
 function NonPhysicsInstancedGroup({
     modelKey,
     group,
     partCount,
-    instancesMap
-    , onSelect, registerRef
+    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;
+    registerRef?: (id: string, obj: 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 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();
@@ -263,7 +275,7 @@ function NonPhysicsInstancedGroup({
             {group.instances.map(inst => (
                 <group
                     key={inst.id}
-                    ref={(el) => { registerRef?.(inst.id, el as unknown as THREE.Object3D | null); }}
+                    ref={(el) => { registerRef?.(inst.id, el as unknown as Object3D | null); }}
                     position={inst.position}
                     rotation={inst.rotation}
                     scale={inst.scale}
@@ -283,8 +295,8 @@ function NonPhysicsInstancedGroup({
 }
 
 
-// --- GameInstance: just registers an instance, renders nothing ---
-export const GameInstance = React.forwardRef<THREE.Group, {
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
+export const GameInstance = React.forwardRef<Group, {
     id: string;
     modelUrl: string;
     position: [number, number, number];
@@ -320,7 +332,6 @@ export const GameInstance = React.forwardRef<THREE.Group, {
         };
     }, [addInstance, removeInstance, instance]);
 
-
-    // No visual here – provider will render visuals for all instances
+    // No visual rendering - provider handles all instanced visuals
     return null;
 });

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -203,11 +203,12 @@ function GameObjectRenderer({
 
     // Early return if gameObject is null or undefined
     if (!gameObject) return null;
+    if (gameObject.disabled === true || gameObject.hidden === true) return null;
 
-    // Build a small context object to avoid long param lists
+    // Build context object for passing to helper functions
     const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
 
-    // --- 1. Transform (local + world) ---
+    // --- 1. Compute transforms (local + world) ---
     const transformProps = getNodeTransformProps(gameObject);
     const localMatrix = new Matrix4().compose(
         new Vector3(...transformProps.position),
@@ -216,7 +217,7 @@ function GameObjectRenderer({
     );
     const worldMatrix = parentMatrix.clone().multiply(localMatrix);
 
-    // preserve click/drag detection from previous implementation
+    // --- 2. Handle selection interaction (edit mode only) ---
     const clickValid = useRef(false);
     const handlePointerDown = (e: ThreeEvent<PointerEvent>) => {
         e.stopPropagation();
@@ -233,18 +234,19 @@ function GameObjectRenderer({
         clickValid.current = false;
     };
 
-    if (gameObject.disabled === true || gameObject.hidden === true) return null;
-
-    // --- 2. If instanced, short-circuit to a tiny clean branch ---
+    // --- 3. If instanced model, short-circuit to GameInstance (terminal node) ---
     const isInstanced = !!gameObject.components?.model?.properties?.instanced;
     if (isInstanced) {
         return renderInstancedNode(gameObject, worldMatrix, ctx);
     }
 
-    // --- 3. Core content decided by component registry ---
+    // --- 4. Render core content using component system ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
 
-    // --- 5. Render children (always relative transforms) ---
+    // --- 5. Wrap with physics if needed (except in edit mode) ---
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
+
+    // --- 6. Render children recursively (always relative transforms) ---
     const children = (gameObject.children ?? []).map((child) => (
         <GameObjectRenderer
             key={child.id}
@@ -259,10 +261,7 @@ function GameObjectRenderer({
         />
     ));
 
-    // --- 4. Wrap with physics if needed ---
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-
-    // --- 6. Final group wrapper ---
+    // --- 7. Final group wrapper with local transform ---
     return (
         <group
             ref={(el) => registerRef(gameObject.id, el)}
@@ -300,18 +299,17 @@ function renderInstancedNode(gameObject: GameObjectType, worldMatrix: Matrix4, c
     );
 }
 
-// Helper: render main model/geometry content for a non-instanced node
+// Helper: render main content for a non-instanced node using the component system
 function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matrix4 | undefined) {
     const geometry = gameObject.components?.geometry;
     const material = gameObject.components?.material;
-    const modelComp = gameObject.components?.model;
+    const model = gameObject.components?.model;
 
     const geometryDef = geometry ? getComponent('Geometry') : undefined;
     const materialDef = material ? getComponent('Material') : undefined;
+    const modelDef = model ? getComponent('Model') : undefined;
 
-    const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
-
-    // Generic component views (exclude geometry/material/model/transform/physics)
+    // Context props for all component Views
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -321,20 +319,19 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
         registerRef: ctx.registerRef,
     };
 
-    // Separate wrapper components (that accept children) from leaf components
+    // Collect wrapper and leaf components (excluding transform/physics which are handled separately)
     const wrapperComponents: Array<{ key: string; View: any; properties: any }> = [];
     const leafComponents: React.ReactNode[] = [];
 
     if (gameObject.components) {
         Object.entries(gameObject.components)
-            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
+            .filter(([key]) => !['geometry', 'material', 'model', 'transform', 'physics'].includes(key))
             .forEach(([key, comp]) => {
                 if (!comp || !comp.type) return;
                 const def = getComponent(comp.type);
                 if (!def || !def.View) return;
 
-                // Check if the component View accepts children by checking function signature
-                // Components that wrap content should accept children prop
+                // Components that accept children are wrappers, others are leaves
                 const viewString = def.View.toString();
                 if (viewString.includes('children')) {
                     wrapperComponents.push({ key, View: def.View, properties: comp.properties });
@@ -344,49 +341,41 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
             });
     }
 
-    // Build the core content (model or mesh)
+    // Build core content based on what components exist
     let coreContent: React.ReactNode;
 
-    // If we have a model (non-instanced) render it as a primitive with material override
-    if (isModelAvailable) {
-        const modelObj = ctx.loadedModels[modelComp.properties.filename].clone();
+    // Priority: Model > Geometry + Material > Empty
+    if (model && modelDef && modelDef.View) {
+        // Model component wraps its children (including material override)
         coreContent = (
-            <primitive object={modelObj}>
+            <modelDef.View properties={model.properties} {...contextProps}>
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
                         key="material"
                         properties={material.properties}
-                        loadedTextures={ctx.loadedTextures}
-                        isSelected={ctx.selectedId === gameObject.id}
-                        editMode={ctx.editMode}
-                        parentMatrix={parentMatrix}
-                        registerRef={ctx.registerRef}
+                        {...contextProps}
                     />
                 )}
                 {leafComponents}
-            </primitive>
+            </modelDef.View>
         );
     } else if (geometry && geometryDef && geometryDef.View) {
-        // Otherwise, if geometry present, render a mesh
+        // Geometry + Material = mesh
         coreContent = (
-            <mesh>
-                <geometryDef.View key="geometry" properties={geometry.properties} {...contextProps} />
+            <mesh castShadow receiveShadow>
+                <geometryDef.View properties={geometry.properties} {...contextProps} />
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
                         key="material"
                         properties={material.properties}
-                        loadedTextures={ctx.loadedTextures}
-                        isSelected={ctx.selectedId === gameObject.id}
-                        editMode={ctx.editMode}
-                        parentMatrix={parentMatrix}
-                        registerRef={ctx.registerRef}
+                        {...contextProps}
                     />
                 )}
                 {leafComponents}
             </mesh>
         );
     } else {
-        // No geometry or model, just render leaf components
+        // No visual component - just render leaves
         coreContent = <>{leafComponents}</>;
     }