react-three-game 0.0.65 → 0.0.67

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

@@ -10,81 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { extend } from '@react-three/fiber';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { FieldRenderer, Input } from './Input';
-import { colors } from '../styles';
+import { FieldRenderer, Label, NumberInput } from './Input';
 import { useMemo } from 'react';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
+import { TexturePicker } from '../../assetviewer/page';
 import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, Vector2, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
-const PICKER_POPUP_WIDTH = 260;
-const PICKER_POPUP_HEIGHT = 360;
 extend({
     MeshBasicNodeMaterial,
     MeshStandardNodeMaterial,
 });
-function TexturePicker({ value, onChange, basePath }) {
-    const [textureFiles, setTextureFiles] = useState([]);
-    const [showPicker, setShowPicker] = useState(false);
-    const [popupStyle, setPopupStyle] = useState(null);
-    const triggerRef = useRef(null);
-    useEffect(() => {
-        fetch(`${basePath}/textures/manifest.json`)
-            .then(r => r.json())
-            .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
-            .catch(console.error);
-    }, [basePath]);
-    useLayoutEffect(() => {
-        if (!showPicker || !triggerRef.current || typeof window === 'undefined')
-            return;
-        const updatePosition = () => {
-            var _a;
-            const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!rect)
-                return;
-            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
-            const fallbackLeft = rect.right + 8;
-            const fitsLeft = preferredLeft >= 8;
-            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
-            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
-            setPopupStyle({
-                position: 'fixed',
-                left,
-                top,
-                background: colors.bg,
-                padding: 12,
-                border: `1px solid ${colors.border}`,
-                borderRadius: 6,
-                width: PICKER_POPUP_WIDTH,
-                height: PICKER_POPUP_HEIGHT,
-                overflow: 'hidden',
-                zIndex: 1000,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
-            });
-        };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        window.addEventListener('scroll', updatePosition, true);
-        return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
-        };
-    }, [showPicker]);
-    // Only show 3D preview for server-hosted textures (starting with / or http)
-    const canPreview = value && (value.startsWith('/') || value.startsWith('http'));
-    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [canPreview
-                ? _jsx(SingleTextureViewer, { file: value, basePath: basePath })
-                : value
-                    ? _jsx("span", { style: { fontSize: 10, opacity: 0.6, maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value })
-                    : null, _jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
-                    onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(TextureListViewer, { files: textureFiles, selected: value || undefined, onSelect: (file) => {
-                        onChange(file);
-                        setShowPicker(false);
-                    }, basePath: basePath }) }), document.body)] }));
-}
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     var _a;
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
@@ -138,7 +73,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Repeat (X, Y)',
                     render: ({ value, onChange }) => {
                         var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1 })] }));
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
                     },
                 }] : []),
             {
@@ -153,7 +88,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Normal Scale (X, Y)',
                     render: ({ value, onChange }) => {
                         var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01 })] }));
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
                     },
                 }] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },

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

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
-import { useContext, useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { BooleanField, FieldGroup, Input, Label, SelectInput } from './Input';
+import { ModelPicker } from '../../assetviewer/page';
+import { useContext, useMemo } from 'react';
+import { BooleanField, FieldGroup, Label, NumberInput, 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' },
@@ -68,87 +65,15 @@ function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
                                         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}`));
+                                    }, title: "Remove repeat axis", children: "\u00D7" })) : null] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Count" }), _jsx(NumberInput, { 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' } })] }), _jsxs("div", { children: [_jsx(Label, { children: "Offset" }), _jsx(NumberInput, { 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);
-    const [popupStyle, setPopupStyle] = useState(null);
-    const triggerRef = useRef(null);
-    useEffect(() => {
-        fetch(`${basePath}/models/manifest.json`)
-            .then(r => r.json())
-            .then(data => setModelFiles(Array.isArray(data) ? data : data.files || []))
-            .catch(console.error);
-    }, [basePath]);
-    useLayoutEffect(() => {
-        if (!showPicker || !triggerRef.current || typeof window === 'undefined')
-            return;
-        const updatePosition = () => {
-            var _a;
-            const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!rect)
-                return;
-            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
-            const fallbackLeft = rect.right + 8;
-            const fitsLeft = preferredLeft >= 8;
-            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
-            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
-            setPopupStyle({
-                position: 'fixed',
-                left,
-                top,
-                background: 'rgba(0,0,0,0.9)',
-                padding: 12,
-                border: '1px solid rgba(34, 211, 238, 0.3)',
-                borderRadius: 6,
-                width: PICKER_POPUP_WIDTH,
-                height: PICKER_POPUP_HEIGHT,
-                overflow: 'hidden',
-                zIndex: 1000,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
-            });
-        };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        window.addEventListener('scroll', updatePosition, true);
-        return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
-        };
-    }, [showPicker]);
-    const handleModelSelect = (file) => {
-        const filename = file.startsWith('/') ? file.slice(1) : file;
-        onChange(filename);
-        setShowPicker(false);
-    };
-    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 = "" }) {
     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 }))] }))] }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: component.properties.filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, pickerKey: 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 }) {

package/dist/tools/prefabeditor/components/PhysicsComponent.d.ts

@@ -2,6 +2,8 @@ import type { RigidBodyOptions } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
 export type PhysicsProps = RigidBodyOptions & {
     activeCollisionTypes?: 'all' | undefined;
+    linearVelocity?: [number, number, number];
+    angularVelocity?: [number, number, number];
 };
 declare const PhysicsComponent: Component;
 export default PhysicsComponent;

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

@@ -12,8 +12,50 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
-import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
+import { BooleanField, FieldGroup, NumberField, SelectField, Vector3Field } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
+import { colors } from "../styles";
+const enabledAxesFallback = [true, true, true];
+function LockedAxisField({ label, values, onChange, }) {
+    const enabledTranslations = Array.isArray(values.enabledTranslations)
+        ? values.enabledTranslations
+        : enabledAxesFallback;
+    const axisLabels = ['X', 'Y', 'Z'];
+    const toggleAxisLock = (index) => {
+        const nextEnabledTranslations = [...enabledTranslations];
+        nextEnabledTranslations[index] = !nextEnabledTranslations[index];
+        onChange({ enabledTranslations: nextEnabledTranslations });
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: 4,
+                }, children: [_jsx("span", { style: {
+                            display: 'block',
+                            fontSize: '10px',
+                            color: colors.textMuted,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                            fontWeight: 500,
+                        }, children: label }), _jsx("span", { style: {
+                            fontSize: '10px',
+                            color: colors.textDim,
+                        }, children: "Active means locked" })] }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: axisLabels.map((axisLabel, index) => {
+                    const isLocked = !enabledTranslations[index];
+                    return (_jsx("button", { type: "button", onClick: () => toggleAxisLock(index), style: {
+                            flex: 1,
+                            backgroundColor: isLocked ? colors.dangerBg : colors.bgInput,
+                            border: `1px solid ${isLocked ? colors.dangerBorder : colors.border}`,
+                            borderRadius: 3,
+                            padding: '6px 8px',
+                            color: isLocked ? colors.danger : colors.textMuted,
+                            fontSize: '11px',
+                            fontFamily: 'monospace',
+                            cursor: 'pointer',
+                        }, children: axisLabel }, axisLabel));
+                }) })] }));
+}
 function PhysicsComponentEditor({ component, onUpdate }) {
     return (_jsxs(FieldGroup, { children: [_jsx(SelectField, { name: "type", label: "Type", values: component.properties, onChange: onUpdate, options: [
                     { value: 'dynamic', label: 'Dynamic' },
@@ -25,15 +67,20 @@ function PhysicsComponentEditor({ component, onUpdate }) {
                     { value: 'trimesh', label: 'Trimesh (exact)' },
                     { value: 'cuboid', label: 'Cuboid (box)' },
                     { value: 'ball', label: 'Ball (sphere)' },
-                ] }), _jsx(NumberField, { name: "mass", label: "Mass", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1, min: 0 }), _jsx(NumberField, { name: "restitution", label: "Restitution (Bounciness)", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, max: 1, step: 0.1 }), _jsx(NumberField, { name: "friction", label: "Friction", values: component.properties, onChange: onUpdate, fallback: 0.5, min: 0, step: 0.1 }), _jsx(NumberField, { name: "linearDamping", label: "Linear Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "angularDamping", label: "Angular Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "gravityScale", label: "Gravity Scale", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1 }), _jsx(BooleanField, { name: "sensor", label: "Sensor (Trigger Only)", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(SelectField, { name: "activeCollisionTypes", label: "Collision Detection", values: component.properties, onChange: onUpdate, options: [
+                ] }), _jsx(NumberField, { name: "mass", label: "Mass", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1, min: 0 }), _jsx(NumberField, { name: "restitution", label: "Restitution (Bounciness)", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, max: 1, step: 0.1 }), _jsx(NumberField, { name: "friction", label: "Friction", values: component.properties, onChange: onUpdate, fallback: 0.5, min: 0, step: 0.1 }), _jsx(NumberField, { name: "linearDamping", label: "Linear Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "angularDamping", label: "Angular Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "gravityScale", label: "Gravity Scale", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1 }), _jsx(Vector3Field, { name: "linearVelocity", label: "Linear Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(Vector3Field, { name: "angularVelocity", label: "Angular Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(LockedAxisField, { label: "Lock Movement", values: component.properties, onChange: onUpdate }), _jsx(BooleanField, { name: "sensor", label: "Sensor (Trigger Only)", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(SelectField, { name: "activeCollisionTypes", label: "Collision Detection", values: component.properties, onChange: onUpdate, options: [
                     { value: '', label: 'Default (Dynamic only)' },
                     { value: 'all', label: 'All (includes kinematic & fixed)' },
                 ] })] }));
 }
 function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }) {
-    const { type, colliders, sensor, activeCollisionTypes } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes"]);
+    const { type, colliders, sensor, activeCollisionTypes, linearVelocity = [0, 0, 0], angularVelocity = [0, 0, 0], enabledTranslations = enabledAxesFallback } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes", "linearVelocity", "angularVelocity", "enabledTranslations"]);
     const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
     const rigidBodyRef = useRef(null);
+    const linearVelocityKey = linearVelocity.join(',');
+    const angularVelocityKey = angularVelocity.join(',');
+    const rbKey = editMode
+        ? `${type || 'dynamic'}_${colliderType}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${type || 'dynamic'}_${colliderType}`;
     // Try to get rapier context - will be null if not inside <Physics>
     let rapier = null;
     try {
@@ -67,6 +114,25 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
             }
         }
     }, [activeCollisionTypes, rapier, type, colliders]);
+    // Seed authored velocities when the body instance changes or the authored values change.
+    useEffect(() => {
+        if (!rigidBodyRef.current)
+            return;
+        rigidBodyRef.current.setLinvel({
+            x: linearVelocity[0],
+            y: linearVelocity[1],
+            z: linearVelocity[2],
+        }, true);
+    }, [rbKey, linearVelocityKey]);
+    useEffect(() => {
+        if (!rigidBodyRef.current)
+            return;
+        rigidBodyRef.current.setAngvel({
+            x: angularVelocity[0],
+            y: angularVelocity[1],
+            z: angularVelocity[2],
+        }, true);
+    }, [rbKey, angularVelocityKey]);
     // Event handlers for physics interactions
     const handleIntersectionEnter = useCallback((payload) => {
         if (!nodeId)
@@ -104,18 +170,19 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
             targetRigidBody: payload.other.rigidBody,
         });
     }, [nodeId]);
-    // 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
-        ? `${type || 'dynamic'}_${colliderType}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
-        : `${type || 'dynamic'}_${colliderType}`;
-    return (_jsx(RigidBody, Object.assign({ ref: rigidBodyRef, type: type, colliders: colliderType, position: position, rotation: rotation, scale: scale, sensor: sensor, userData: { entityId: nodeId }, onIntersectionEnter: handleIntersectionEnter, onIntersectionExit: handleIntersectionExit, onCollisionEnter: handleCollisionEnter, onCollisionExit: handleCollisionExit }, otherProps, { children: children }), rbKey));
+    return (_jsx(RigidBody, Object.assign({ ref: rigidBodyRef, type: type, colliders: colliderType, position: position, rotation: rotation, scale: scale, sensor: sensor, enabledTranslations: enabledTranslations, userData: { entityId: nodeId }, onIntersectionEnter: handleIntersectionEnter, onIntersectionExit: handleIntersectionExit, onCollisionEnter: handleCollisionEnter, onCollisionExit: handleCollisionExit }, otherProps, { children: children }), rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
     nonComposable: true,
-    defaultProperties: { type: 'dynamic', colliders: 'hull' }
+    defaultProperties: {
+        type: 'dynamic',
+        colliders: 'hull',
+        linearVelocity: [0, 0, 0],
+        angularVelocity: [0, 0, 0],
+        enabledTranslations: [true, true, true],
+    }
 };
 export default PhysicsComponent;

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

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect, useMemo, useState } from "react";
-import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
+import { BooleanField, ColorField, FieldGroup, Label, NumberField } from "./Input";
 import { SpotLightHelper } from "three";
 import { useFrame } from "@react-three/fiber";
+import { TexturePicker } from "../../assetviewer/page";
 const spotLightDefaults = {
     color: '#ffffff',
-    intensity: 1,
-    angle: Math.PI / 6,
+    intensity: 200,
+    angle: 0.5,
     penumbra: 0.5,
     distance: 100,
     castShadow: true,
 };
-function SpotLightComponentEditor({ component, onUpdate }) {
+function SpotLightComponentEditor({ component, onUpdate, basePath = "" }) {
     const values = Object.assign(Object.assign({}, spotLightDefaults), component.properties);
-    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true })] }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 200 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true }), _jsxs("div", { children: [_jsx(Label, { children: "Texture Map" }), _jsx(TexturePicker, { value: values.map, onChange: (map) => onUpdate({ map }), basePath: basePath })] })] }));
 }
-function SpotLightView({ properties, editMode, isSelected }) {
+function SpotLightView({ properties, editMode, isSelected, loadedTextures }) {
     const merged = Object.assign(Object.assign({}, spotLightDefaults), properties);
     const color = merged.color;
     const intensity = merged.intensity;
@@ -23,6 +24,7 @@ function SpotLightView({ properties, editMode, isSelected }) {
     const penumbra = merged.penumbra;
     const distance = merged.distance;
     const castShadow = merged.castShadow;
+    const textureMap = merged.map && loadedTextures ? loadedTextures[merged.map] : undefined;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
     const [spotLight, setSpotLight] = useState(null);
@@ -43,7 +45,7 @@ function SpotLightView({ properties, editMode, isSelected }) {
             spotLightHelper.update();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',

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

@@ -9,6 +9,7 @@ import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
+import ClickComponent from './ClickComponent';
 export default [
     GeometryComponent,
     TransformComponent,
@@ -21,4 +22,5 @@ export default [
     TextComponent,
     EnvironmentComponent,
     CameraComponent,
+    ClickComponent,
 ];

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

@@ -7,6 +7,7 @@ export interface GameObject {
     id: string;
     name?: string;
     disabled?: boolean;
+    locked?: boolean;
     children?: GameObject[];
     components?: {
         [key: string]: ComponentData | undefined;

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

@@ -1,5 +1,5 @@
 import { GameObject, Prefab } from "./types";
-import { Object3D, Vector3 } from 'three';
+import { Matrix4, Object3D, Vector3 } from 'three';
 export interface ExportGLBOptions {
     filename?: string;
     binary?: boolean;
@@ -24,6 +24,12 @@ export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOption
  */
 export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
 export declare function focusCameraOnObject(object: Object3D, camera: Object3D, target: Vector3, update?: () => void): void;
+export declare function decompose(m: Matrix4): {
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+};
+export declare function computeParentWorldMatrix(root: GameObject, targetId: string): Matrix4;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */

package/dist/tools/prefabeditor/utils.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-import { Box3, PerspectiveCamera, Quaternion, Vector3 } from 'three';
+import { Box3, Euler, Matrix4, PerspectiveCamera, Quaternion, Vector3 } from 'three';
 /** Save a prefab as JSON file, showing a Save As dialog when supported */
 export function saveJson(data, filename) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -133,6 +133,39 @@ export function focusCameraOnObject(object, camera, target, update) {
     target.copy(center);
     update === null || update === void 0 ? void 0 : update();
 }
+export function decompose(m) {
+    const p = new Vector3(), q = new Quaternion(), s = new Vector3();
+    m.decompose(p, q, s);
+    const e = new Euler().setFromQuaternion(q);
+    return {
+        position: [p.x, p.y, p.z],
+        rotation: [e.x, e.y, e.z],
+        scale: [s.x, s.y, s.z],
+    };
+}
+function compose(node) {
+    var _a, _b, _c, _d, _e;
+    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
+    const position = (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0];
+    const rotation = (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0];
+    const scale = (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1];
+    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+}
+export function computeParentWorldMatrix(root, targetId) {
+    const identity = new Matrix4();
+    let result = null;
+    const visit = (node, parent) => {
+        var _a;
+        if (node.id === targetId) {
+            result = parent.clone();
+            return;
+        }
+        const world = parent.clone().multiply(compose(node));
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(child => !result && visit(child, world));
+    };
+    visit(root, identity);
+    return result !== null && result !== void 0 ? result : identity;
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;

package/package.json

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