react-three-game 0.0.64 → 0.0.65

package/dist/tools/assetviewer/page.js

@@ -114,14 +114,14 @@ function TextureSphere({ url, onError }) {
 export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {
     return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx("div", { style: { width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }, children: _jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }) }), _jsx(SharedCanvas, {})] }));
 }
-function ModelCard({ file, onSelect, basePath = "" }) {
+function ModelCard({ file, onSelect, basePath = "", size = 60, }) {
     const [error, setError] = useState(false);
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
         return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { width: size, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);
@@ -164,7 +164,7 @@ export function SingleTextureViewer({ file, basePath = "" }) {
 export function SingleModelViewer({ file, basePath = "" }) {
     if (!file)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { }, size: 112 }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleSoundViewer({ file, basePath = "" }) {
     if (!file)

package/dist/tools/prefabeditor/InstanceProvider.d.ts

@@ -1,8 +1,17 @@
 import React from "react";
 import { Object3D, Group } from "three";
 import { PhysicsProps } from "./components/PhysicsComponent";
+export type RepeatAxisConfig = {
+    axis: 'x' | 'y' | 'z';
+    count: number;
+    offset: number;
+};
+export declare const DEFAULT_REPEAT_AXES: RepeatAxisConfig[];
+export declare function normalizeRepeatAxes(value: unknown): RepeatAxisConfig[];
+export declare function getRepeatAxesFromModelProperties(properties: Record<string, any>): RepeatAxisConfig[];
 export type InstanceData = {
     id: string;
+    sourceId: string;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
@@ -22,6 +31,7 @@ export declare function GameInstanceProvider({ children, models, onSelect, regis
 export declare function useInstanceCheck(id: string): boolean;
 export declare const GameInstance: React.ForwardRefExoticComponent<{
     id: string;
+    sourceId?: string;
     modelUrl: string;
     position: [number, number, number];
     rotation: [number, number, number];

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,8 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { Merged, useHelper } from '@react-three/drei';
 import { InstancedRigidBodies } from "@react-three/rapier";
+import { ActiveCollisionTypes } from "@dimforge/rapier3d-compat";
 import { Mesh, Matrix4, Vector3, Quaternion, Euler, BoxHelper } from "three";
+import { gameEvents, getEntityIdFromRigidBody } from "./GameEvents";
+export const DEFAULT_REPEAT_AXES = [{ axis: 'x', count: 1, offset: 1 }];
+export function normalizeRepeatAxes(value) {
+    if (!Array.isArray(value)) {
+        return DEFAULT_REPEAT_AXES;
+    }
+    const seen = new Set();
+    const normalized = value.flatMap((entry) => {
+        if (!entry || typeof entry !== 'object')
+            return [];
+        const axisValue = entry.axis;
+        if (axisValue !== 'x' && axisValue !== 'y' && axisValue !== 'z')
+            return [];
+        if (seen.has(axisValue))
+            return [];
+        seen.add(axisValue);
+        const countValue = Number(entry.count);
+        const offsetValue = Number(entry.offset);
+        return [{
+                axis: axisValue,
+                count: Number.isFinite(countValue) ? Math.max(1, Math.floor(countValue)) : 1,
+                offset: Number.isFinite(offsetValue) ? offsetValue : 1,
+            }];
+    });
+    return normalized.length > 0 ? normalized : DEFAULT_REPEAT_AXES;
+}
+function toVector3Tuple(value, fallback) {
+    if (!Array.isArray(value) || value.length !== 3)
+        return fallback;
+    return value.map((entry, index) => {
+        const next = typeof entry === 'number' ? entry : Number(entry);
+        return Number.isFinite(next) ? next : fallback[index];
+    });
+}
+export function getRepeatAxesFromModelProperties(properties) {
+    var _a;
+    if (Array.isArray(properties.repeatAxes)) {
+        return normalizeRepeatAxes(properties.repeatAxes);
+    }
+    const repeatCount = toVector3Tuple(properties.repeatCount, [1, 1, 1]).map(value => Math.max(1, Math.floor(value)));
+    const repeatOffset = toVector3Tuple(properties.repeatOffset, [1, 1, 1]);
+    const legacyAxes = [];
+    if ((_a = properties.repeatX) !== null && _a !== void 0 ? _a : true) {
+        legacyAxes.push({ axis: 'x', count: repeatCount[0], offset: repeatOffset[0] });
+    }
+    if (properties.repeatY) {
+        legacyAxes.push({ axis: 'y', count: repeatCount[1], offset: repeatOffset[1] });
+    }
+    if (properties.repeatZ) {
+        legacyAxes.push({ axis: 'z', count: repeatCount[2], offset: repeatOffset[2] });
+    }
+    return legacyAxes.length > 0 ? legacyAxes : DEFAULT_REPEAT_AXES;
+}
 // Helper functions for comparison
 function arrayEquals(a, b) {
     if (a === b)
@@ -15,14 +80,63 @@ function arrayEquals(a, b) {
     }
     return true;
 }
+function stableSerialize(value) {
+    if (Array.isArray(value)) {
+        return `[${value.map(stableSerialize).join(',')}]`;
+    }
+    if (value && typeof value === 'object') {
+        const entries = Object.entries(value)
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([key, entry]) => `${key}:${stableSerialize(entry)}`);
+        return `{${entries.join(',')}}`;
+    }
+    return JSON.stringify(value);
+}
+function getPhysicsSignature(physics) {
+    return physics ? stableSerialize(physics) : 'none';
+}
+function hasPhysics(instance) {
+    return Boolean(instance.physics);
+}
+function getColliderType(physics) {
+    return physics.colliders || (physics.type === 'fixed' ? 'trimesh' : 'hull');
+}
+function emitSensorEnter(sourceId, payload) {
+    gameEvents.emit('sensor:enter', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitSensorExit(sourceId, payload) {
+    gameEvents.emit('sensor:exit', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitCollisionEnter(sourceId, payload) {
+    gameEvents.emit('collision:enter', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitCollisionExit(sourceId, payload) {
+    gameEvents.emit('collision:exit', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
 function instanceEquals(a, b) {
-    var _a, _b;
     return a.id === b.id &&
+        a.sourceId === b.sourceId &&
         a.meshPath === b.meshPath &&
         arrayEquals(a.position, b.position) &&
         arrayEquals(a.rotation, b.rotation) &&
         arrayEquals(a.scale, b.scale) &&
-        ((_a = a.physics) === null || _a === void 0 ? void 0 : _a.type) === ((_b = b.physics) === null || _b === void 0 ? void 0 : _b.type);
+        getPhysicsSignature(a.physics) === getPhysicsSignature(b.physics);
 }
 const GameInstanceContext = createContext(null);
 export function GameInstanceProvider({ children, models, onSelect, registerRef, selectedId, editMode }) {
@@ -51,7 +165,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
         });
     }, []);
     const hasInstance = useCallback((id) => {
-        return instances.some(i => i.id === id);
+        return instances.some(i => i.id === id || i.sourceId === id);
     }, [instances]);
     // Flatten all model meshes once (models → flat mesh parts)
     // Note: Geometry is cloned with baked transforms for instancing
@@ -82,17 +196,18 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             Object.values(flatMeshes).forEach(mesh => mesh.geometry.dispose());
         };
     }, [flatMeshes]);
-    // Group instances by meshPath + physics type for batch rendering
+    // Group instances by meshPath and physics presence for batch rendering.
     const grouped = useMemo(() => {
-        var _a;
         const groups = {};
         for (const inst of instances) {
-            const type = ((_a = inst.physics) === null || _a === void 0 ? void 0 : _a.type) || 'none';
-            const key = `${inst.meshPath}__${type}`;
+            const key = `${inst.meshPath}__${inst.physics ? 'physics' : 'visual'}`;
             if (!groups[key])
-                groups[key] = { physicsType: type, instances: [] };
+                groups[key] = { hasPhysics: Boolean(inst.physics), instances: [] };
             groups[key].instances.push(inst);
         }
+        Object.values(groups).forEach(group => {
+            group.instances.sort((a, b) => a.id.localeCompare(b.id));
+        });
         return groups;
     }, [instances]);
     return (_jsxs(GameInstanceContext.Provider, { value: {
@@ -103,7 +218,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             modelParts,
             hasInstance
         }, children: [children, Object.entries(grouped).map(([key, group]) => {
-                if (group.physicsType === 'none')
+                if (!group.hasPhysics)
                     return null;
                 const modelKey = group.instances[0].meshPath;
                 const partCount = modelParts[modelKey] || 0;
@@ -111,7 +226,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
                     return null;
                 return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes, onSelect: onSelect, editMode: editMode }, key));
             }), Object.entries(grouped).map(([key, group]) => {
-                if (group.physicsType !== 'none')
+                if (group.hasPhysics)
                     return null;
                 const modelKey = group.instances[0].meshPath;
                 const partCount = modelParts[modelKey] || 0;
@@ -130,12 +245,10 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
 function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect, editMode }) {
     const meshRefs = useRef([]);
     const rigidBodiesRef = useRef(null);
-    const instances = useMemo(() => group.instances.map(inst => ({
-        key: inst.id,
-        position: inst.position,
-        rotation: inst.rotation,
-        scale: inst.scale,
-    })), [group.instances]);
+    const instances = useMemo(() => group.instances.filter(hasPhysics).map(inst => {
+        const _a = inst.physics, { activeCollisionTypes: _activeCollisionTypes, colliders: _colliders, userData } = _a, rigidBodyProps = __rest(_a, ["activeCollisionTypes", "colliders", "userData"]);
+        return Object.assign(Object.assign({ key: inst.id, position: inst.position, rotation: inst.rotation, scale: inst.scale }, rigidBodyProps), { colliders: getColliderType(inst.physics), userData: Object.assign(Object.assign({}, userData), { entityId: inst.sourceId }), onIntersectionEnter: (payload) => emitSensorEnter(inst.sourceId, payload), onIntersectionExit: (payload) => emitSensorExit(inst.sourceId, payload), onCollisionEnter: (payload) => emitCollisionEnter(inst.sourceId, payload), onCollisionExit: (payload) => emitCollisionExit(inst.sourceId, payload) });
+    }), [group.instances]);
     // Apply scale to visual meshes (InstancedRigidBodies only scales colliders, not visuals)
     useEffect(() => {
         const matrix = new Matrix4();
@@ -161,7 +274,7 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect,
             try {
                 group.instances.forEach((inst, i) => {
                     var _a;
-                    const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a.at(i);
+                    const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a[i];
                     if (body && body.setTranslation && body.setRotation) {
                         pos.set(...inst.position);
                         euler.set(...inst.rotation);
@@ -177,7 +290,22 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect,
             }
         }
     }, [group.instances]);
-    const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
+    useEffect(() => {
+        group.instances.forEach((inst, i) => {
+            var _a, _b;
+            if (!inst.physics || inst.physics.activeCollisionTypes !== 'all')
+                return;
+            const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a[i];
+            if (!body || !body.numColliders || !body.collider)
+                return;
+            for (let colliderIndex = 0; colliderIndex < body.numColliders(); colliderIndex++) {
+                const collider = body.collider(colliderIndex);
+                (_b = collider.setActiveCollisionTypes) === null || _b === void 0 ? void 0 : _b.call(collider, ActiveCollisionTypes.DEFAULT |
+                    ActiveCollisionTypes.KINEMATIC_FIXED |
+                    ActiveCollisionTypes.KINEMATIC_KINEMATIC);
+            }
+        });
+    }, [group.instances]);
     // Handle click on instanced mesh in edit mode
     const handleClick = (e) => {
         if (!editMode || !onSelect)
@@ -186,12 +314,12 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect,
         // Get the instance index from the intersection
         const instanceId = e.instanceId;
         if (instanceId !== undefined && group.instances[instanceId]) {
-            onSelect(group.instances[instanceId].id);
+            onSelect(group.instances[instanceId].sourceId);
         }
     };
     // Add key to force remount when instance count changes significantly (helps with cleanup)
-    const rigidBodyKey = `rb_${modelKey}_${group.physicsType}_${group.instances.length}`;
-    return (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, colliders: colliders, type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+    const rigidBodyKey = `rb_${modelKey}_${group.instances.map(inst => `${inst.id}:${getPhysicsSignature(inst.physics)}`).join('|')}`;
+    return (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, children: Array.from({ length: partCount }).map((_, i) => {
             const mesh = flatMeshes[`${modelKey}__${i}`];
             if (!mesh)
                 return null;
@@ -208,16 +336,19 @@ function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, on
 function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef, selectedId, editMode }) {
     const clickValid = useRef(false);
     const groupRef = useRef(null);
-    const isSelected = selectedId === instance.id;
+    const isSelected = selectedId === instance.id || selectedId === instance.sourceId;
     // Use BoxHelper when object is selected in edit mode
     useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
     useEffect(() => {
+        if (editMode)
+            return;
         registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, groupRef.current);
-    }, [instance.id, registerRef]);
+        return () => registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, null);
+    }, [editMode, instance.id, registerRef]);
     return (_jsx("group", { ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
             if (clickValid.current) {
                 e.stopPropagation();
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.id);
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.sourceId);
             }
             clickValid.current = false;
         }, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
@@ -229,18 +360,19 @@ export function useInstanceCheck(id) {
     return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.hasInstance(id)) !== null && _a !== void 0 ? _a : false;
 }
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
-export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
+export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
     const ctx = useContext(GameInstanceContext);
     const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
     const removeInstance = ctx === null || ctx === void 0 ? void 0 : ctx.removeInstance;
     const instance = useMemo(() => ({
         id,
+        sourceId: sourceId !== null && sourceId !== void 0 ? sourceId : id,
         meshPath: modelUrl,
         position,
         rotation,
         scale,
         physics,
-    }), [id, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), JSON.stringify(physics)]);
+    }), [id, sourceId, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), getPhysicsSignature(physics)]);
     useEffect(() => {
         if (!addInstance || !removeInstance)
             return;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -14,7 +14,7 @@ import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, V
 import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel } from "../dragdrop";
-import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
+import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
 import { focusCameraOnObject, updateNode } from "./utils";
 import { EditorContext } from "./EditorContext";
 components.forEach(registerComponent);
@@ -159,16 +159,16 @@ export function GameObjectRenderer(props) {
         : _jsx(StandardNode, Object.assign({}, props), key);
 }
 function isPhysicsProps(v) {
-    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic";
+    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicPosition" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicVelocity";
 }
 function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const world = parentMatrix.clone().multiply(compose(gameObject));
-    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+    var _a, _b, _c, _d, _e, _f, _g;
     const localTransform = getNodeTransformProps(gameObject);
     const physicsProps = isPhysicsProps((_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics) === null || _b === void 0 ? void 0 : _b.properties)
         ? (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.physics) === null || _d === void 0 ? void 0 : _d.properties
         : undefined;
+    const modelUrl = (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename;
+    const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physicsProps), [gameObject, modelUrl, parentMatrix, physicsProps]);
     const groupRef = useRef(null);
     const clickValid = useRef(false);
     useEffect(() => {
@@ -177,7 +177,6 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
             return () => registerRef(gameObject.id, null);
         }
     }, [gameObject.id, registerRef, editMode]);
-    const modelUrl = (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename;
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("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) {
@@ -186,9 +185,9 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
                             onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
                         }
                         clickValid.current = false;
-                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps })] }));
+                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, physics: instance.physics }, instance.id)))] }));
     }
-    return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_k = (_j = (_h = gameObject.components) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.properties) === null || _k === void 0 ? void 0 : _k.filename, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps }));
+    return (_jsx(_Fragment, { children: instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, physics: instance.physics }, instance.id))) }));
 }
 function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b, _c, _d, _e;
@@ -276,6 +275,58 @@ function compose(node) {
     const { position, rotation, scale } = getNodeTransformProps(node);
     return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
 }
+function getModelRepeatSettings(node) {
+    var _a, _b, _c;
+    const properties = (_c = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : {};
+    return {
+        repeat: Boolean(properties.repeat),
+        repeatAxes: getRepeatAxesFromModelProperties(properties),
+    };
+}
+function buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physics) {
+    if (!modelUrl)
+        return [];
+    const transform = getNodeTransformProps(gameObject);
+    const repeat = getModelRepeatSettings(gameObject);
+    const counts = [1, 1, 1];
+    const offsets = [0, 0, 0];
+    if (repeat.repeat) {
+        for (const entry of repeat.repeatAxes) {
+            const axisIndex = entry.axis === 'x' ? 0 : entry.axis === 'y' ? 1 : 2;
+            counts[axisIndex] = entry.count;
+            offsets[axisIndex] = entry.offset;
+        }
+    }
+    const baseTranslation = new Matrix4().makeTranslation(transform.position[0], transform.position[1], transform.position[2]);
+    const baseRotation = new Matrix4().makeRotationFromEuler(new Euler(...transform.rotation));
+    const baseScale = new Matrix4().makeScale(transform.scale[0], transform.scale[1], transform.scale[2]);
+    const offsetMatrix = new Matrix4();
+    const worldMatrix = new Matrix4();
+    const instances = [];
+    for (let x = 0; x < counts[0]; x++) {
+        for (let y = 0; y < counts[1]; y++) {
+            for (let z = 0; z < counts[2]; z++) {
+                offsetMatrix.makeTranslation(x * offsets[0], y * offsets[1], z * offsets[2]);
+                worldMatrix.copy(parentMatrix)
+                    .multiply(baseTranslation)
+                    .multiply(baseRotation)
+                    .multiply(offsetMatrix)
+                    .multiply(baseScale);
+                const { position, rotation, scale } = decompose(worldMatrix);
+                const isBaseInstance = x === 0 && y === 0 && z === 0;
+                instances.push({
+                    id: isBaseInstance ? gameObject.id : `${gameObject.id}__repeat_${x}_${y}_${z}`,
+                    modelUrl,
+                    position,
+                    rotation,
+                    scale,
+                    physics,
+                });
+            }
+        }
+    }
+    return instances;
+}
 function decompose(m) {
     const p = new Vector3(), q = new Quaternion(), s = new Vector3();
     m.decompose(p, q, s);

package/dist/tools/prefabeditor/components/ModelComponent.js

@@ -1,10 +1,76 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
-import { useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
+import { useContext, useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { FieldRenderer } from './Input';
+import { BooleanField, FieldGroup, Input, Label, SelectInput } from './Input';
+import { EditorContext } from '../EditorContext';
+import { DEFAULT_REPEAT_AXES, getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
+import { colors } from '../styles';
 const PICKER_POPUP_WIDTH = 260;
 const PICKER_POPUP_HEIGHT = 360;
+const AXIS_OPTIONS = [
+    { value: 'x', label: 'X' },
+    { value: 'y', label: 'Y' },
+    { value: 'z', label: 'Z' },
+];
+function quantize(value, step) {
+    if (!Number.isFinite(value))
+        return 0;
+    if (!Number.isFinite(step) || step <= 0)
+        return value;
+    return Math.round(value / step) * step;
+}
+function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
+    const addAxis = () => {
+        const used = new Set(axes.map(axis => axis.axis));
+        const nextAxis = AXIS_OPTIONS.find(option => !used.has(option.value));
+        if (!nextAxis)
+            return;
+        onChange([...axes, { axis: nextAxis.value, count: 1, offset: 1 }]);
+    };
+    const updateAxis = (index, patch) => {
+        const nextAxes = axes.map((axis, axisIndex) => axisIndex === index ? Object.assign(Object.assign({}, axis), patch) : axis);
+        onChange(normalizeRepeatAxes(nextAxes));
+    };
+    const removeAxis = (index) => {
+        onChange(axes.filter((_, axisIndex) => axisIndex !== index));
+    };
+    const canAddAxis = axes.length < AXIS_OPTIONS.length;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Label, { children: "Repeat Axes" }), _jsx("button", { type: "button", onClick: addAxis, disabled: !canAddAxis, style: {
+                            width: 22,
+                            height: 22,
+                            borderRadius: 3,
+                            border: `1px solid ${canAddAxis ? colors.accentBorder : colors.border}`,
+                            background: canAddAxis ? colors.accentBg : colors.bgSurface,
+                            color: canAddAxis ? colors.accent : colors.textMuted,
+                            cursor: canAddAxis ? 'pointer' : 'not-allowed',
+                            fontSize: 14,
+                            lineHeight: 1,
+                            padding: 0,
+                        }, title: canAddAxis ? 'Add repeat axis' : 'All axes already in use', children: "+" })] }), axes.map((axisConfig, index) => {
+                const usedByOthers = new Set(axes.filter((_, axisIndex) => axisIndex !== index).map(axis => axis.axis));
+                const axisOptions = AXIS_OPTIONS.filter(option => option.value === axisConfig.axis || !usedByOthers.has(option.value));
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 6,
+                        padding: 8,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 4,
+                        background: colors.bgSurface,
+                    }, children: [_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'end' }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(SelectInput, { label: "Axis", value: axisConfig.axis, onChange: (axis) => updateAxis(index, { axis: axis }), options: axisOptions }) }), index > 0 ? (_jsx("button", { type: "button", onClick: () => removeAxis(index), style: {
+                                        height: 24,
+                                        width: 28,
+                                        borderRadius: 3,
+                                        border: `1px solid ${colors.border}`,
+                                        background: colors.bgInput,
+                                        color: colors.text,
+                                        cursor: 'pointer',
+                                        padding: 0,
+                                        flexShrink: 0,
+                                    }, title: "Remove repeat axis", children: "\u00D7" })) : null] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(Input, { label: "Count", value: axisConfig.count, onChange: (count) => updateAxis(index, { count: Math.max(1, Math.floor(count)) }), step: 1, min: 1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } }), _jsx(Input, { label: "Offset", value: axisConfig.offset, onChange: (offset) => updateAxis(index, { offset: quantize(offset, positionSnap) }), step: positionSnap > 0 ? positionSnap : 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }, `${axisConfig.axis}-${index}`));
+            })] }));
+}
 function ModelPicker({ value, onChange, basePath, nodeId }) {
     const [modelFiles, setModelFiles] = useState([]);
     const [showPicker, setShowPicker] = useState(false);
@@ -57,21 +123,32 @@ function ModelPicker({ value, onChange, basePath, nodeId }) {
         onChange(filename);
         setShowPicker(false);
     };
-    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }), _jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
-                    onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }), document.body)] }));
+    return (_jsxs("div", { style: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, children: [_jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: {
+                            width: '100%',
+                            padding: '6px 8px',
+                            backgroundColor: '#1f2937',
+                            color: 'inherit',
+                            fontSize: 10,
+                            cursor: 'pointer',
+                            border: '1px solid rgba(34, 211, 238, 0.3)',
+                        }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
+                            onChange(undefined);
+                        }, style: {
+                            width: '100%',
+                            padding: '6px 8px',
+                            backgroundColor: '#1f2937',
+                            color: 'inherit',
+                            fontSize: 10,
+                            cursor: 'pointer',
+                            border: '1px solid rgba(34, 211, 238, 0.3)',
+                        }, children: "Clear" })] }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }), document.body)] }));
 }
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
-    const fields = [
-        {
-            name: 'filename',
-            type: 'custom',
-            label: 'Model File',
-            render: ({ value, onChange }) => (_jsx(ModelPicker, { value: value, onChange: onChange, basePath: basePath, nodeId: node === null || node === void 0 ? void 0 : node.id })),
-        },
-        { name: 'instanced', type: 'boolean', label: 'Instanced' },
-    ];
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+    var _a;
+    const editorContext = useContext(EditorContext);
+    const positionSnap = (_a = editorContext === null || editorContext === void 0 ? void 0 : editorContext.positionSnap) !== null && _a !== void 0 ? _a : 0.5;
+    const repeatAxes = getRepeatAxesFromModelProperties(component.properties);
+    return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: component.properties.filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, nodeId: node === null || node === void 0 ? void 0 : node.id }), _jsx(BooleanField, { name: "instanced", label: "Instanced", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.instanced && (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "repeat", label: "Repeat", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.repeat && (_jsx(RepeatAxisEditor, { axes: repeatAxes, onChange: (nextAxes) => onUpdate({ repeatAxes: nextAxes }), positionSnap: positionSnap }))] }))] }));
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {
@@ -103,7 +180,9 @@ const ModelComponent = {
     nonComposable: true,
     defaultProperties: {
         filename: '',
-        instanced: false
+        instanced: false,
+        repeat: false,
+        repeatAxes: DEFAULT_REPEAT_AXES
     }
 };
 export default ModelComponent;

package/dist/tools/prefabeditor/utils.js

@@ -255,7 +255,12 @@ export function createModelNode(filename, name) {
             },
             model: {
                 type: 'Model',
-                properties: { filename, instanced: false }
+                properties: {
+                    filename,
+                    instanced: false,
+                    repeat: false,
+                    repeatAxes: [{ axis: 'x', count: 1, offset: 1 }]
+                }
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "description": "high performance 3D game engine for React",
   "main": "dist/index.js",
   "module": "dist/index.js",