react-three-game 0.0.76 → 0.0.78

package/dist/shared/GameCanvas.d.ts

@@ -4,6 +4,5 @@ export interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
     loader?: boolean;
     children: React.ReactNode;
     glConfig?: WebGPURendererParameters;
-    canvasRef?: React.RefObject<HTMLCanvasElement | null>;
 }
-export default function GameCanvas({ loader, children, glConfig, canvasRef, onCreated, style, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
+export default function GameCanvas({ loader, children, glConfig, onCreated, style, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/shared/GameCanvas.js

@@ -29,7 +29,7 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 export default function GameCanvas(_a) {
-    var { loader = false, children, glConfig, canvasRef, onCreated, style } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated", "style"]);
+    var { loader = false, children, glConfig, onCreated, style } = _a, props = __rest(_a, ["loader", "children", "glConfig", "onCreated", "style"]);
     const [frameloop, setFrameloop] = useState("never");
     return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none', WebkitUserSelect: 'none', WebkitTouchCallout: 'none', WebkitTapHighlightColor: 'transparent' }, style), shadows: { type: PCFShadowMap }, dpr: [1, 1.5], frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const canvasElement = canvas;

package/dist/tools/assetviewer/page.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
-import { Component as ReactComponent, Suspense, useEffect, useLayoutEffect, useState, useRef } from "react";
+import { Suspense, useEffect, useLayoutEffect, useState, useRef } from "react";
 import { createPortal } from 'react-dom';
 import { TextureLoader } from "three";
 import { loadModel } from "../dragdrop/modelLoader";
-class ErrorBoundary extends ReactComponent {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError() { return { hasError: true }; }
-    componentDidCatch() { var _a, _b; (_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a); }
-    render() { return this.state.hasError ? null : this.props.children; }
-}
-// view models and textures in manifest, onselect callback
 const styles = {
     errorIcon: { color: '#fca5a5', fontSize: 12 }, // text-red-400 text-xs
     flexFillRelative: { flex: 1, position: 'relative' },

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

@@ -46,7 +46,7 @@ export interface PrefabEditorProps {
     onChange?: (prefab: Prefab) => void;
     showUI?: boolean;
     enableWindowDrop?: boolean;
-    canvasProps?: Omit<React.ComponentProps<typeof GameCanvas>, 'children' | 'canvasRef'>;
+    canvasProps?: Omit<React.ComponentProps<typeof GameCanvas>, 'children'>;
     uiPlugins?: React.ReactNode[] | React.ReactNode;
     children?: React.ReactNode;
 }

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MapControls, TransformControls } from "@react-three/drei";
 import GameCanvas from "../../shared/GameCanvas";
-import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
 import { findComponentEntry } from "./types";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
@@ -21,6 +21,17 @@ import { loadFiles } from "../dragdrop";
 import { denormalizePrefab, createImageNode, createModelNode, createNode } from './prefab';
 import { createPrefabStore, PrefabStoreProvider } from "./prefabStore";
 import { createScene } from "./scene";
+function isObjectAttachedToRoot(root, object) {
+    if (!root || !object)
+        return false;
+    let current = object;
+    while (current) {
+        if (current === root)
+            return true;
+        current = current.parent;
+    }
+    return false;
+}
 export var PrefabEditorMode;
 (function (PrefabEditorMode) {
     PrefabEditorMode["Edit"] = "edit";
@@ -42,6 +53,7 @@ const DEFAULT_PREFAB = {
     root: createNode('Root', {}, { id: 'root' })
 };
 const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode: initialMode = PrefabEditorMode.Edit, onChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
+    var _a, _b;
     const [mode, setMode] = useState(initialMode);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
@@ -54,7 +66,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const [historyIndex, setHistoryIndex] = useState(0);
     const changeOriginRef = useRef(null);
     const historyIndexRef = useRef(0);
-    const [selectedObject, setSelectedObject] = useState(null);
+    const [, bumpSelectedObjectVersion] = useReducer((value) => value + 1, 0);
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
     const controlsRef = useRef(null);
@@ -63,6 +75,11 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const getPrefab = useCallback(() => denormalizePrefab(prefabStore.getState()), [prefabStore]);
     const getObject = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
     const getRigidBody = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getRigidBody(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
+    const handleObjectRefChange = useCallback((nodeId) => {
+        if (nodeId !== selectedId)
+            return;
+        bumpSelectedObjectVersion();
+    }, [selectedId]);
     onChangeRef.current = onChange;
     const setSelection = useCallback((nodeId) => {
         const nextNode = nodeId ? prefabStore.getState().nodesById[nodeId] : null;
@@ -77,7 +94,6 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
                 return prev;
             if (nextMode === PrefabEditorMode.Play) {
                 setSelectedId(null);
-                setSelectedObject(null);
             }
             return nextMode;
         });
@@ -91,7 +107,6 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const loadPrefab = useCallback((prefab, options) => {
         changeOriginRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? "replace-silent" : "replace";
         prefabStore.getState().replacePrefab(prefab);
-        setSelectedObject(null);
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
             setHistory([prefab]);
@@ -154,17 +169,13 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
             if (state.nodesById[selectedId])
                 return;
             setSelectedId(null);
-            setSelectedObject(null);
         });
         return () => unsubscribe();
     }, [prefabStore, selectedId]);
-    useEffect(() => {
-        if (!selectedId) {
-            setSelectedObject(null);
-            return;
-        }
-        setSelectedObject(getObject(selectedId));
-    }, [getObject, selectedId]);
+    const selectedObject = selectedId ? getObject(selectedId) : null;
+    const transformObject = isObjectAttachedToRoot((_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : null, selectedObject)
+        ? selectedObject
+        : null;
     const addNode = useCallback((node, options) => {
         var _a;
         const { addChild, rootId } = prefabStore.getState();
@@ -196,7 +207,6 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         prefabStore.getState().replacePrefab(history[index]);
         historyIndexRef.current = index;
         setHistoryIndex(index);
-        setSelectedObject(null);
         setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
     };
     const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
@@ -342,7 +352,12 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         addModel,
         addTexture
     }), [addModel, addTexture, clearSelection, getPrefab, handleExportGLB, handleExportGLBData, handleScreenshot, loadPrefab, scene]);
-    const content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRoot, { ref: prefabRootRef, store: prefabStore, editMode: isEditMode, selectedId: selectedId, onSelect: setSelection, basePath: basePath }), children] }));
+    const content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRoot, { ref: prefabRootRef, store: prefabStore, editMode: isEditMode, selectedId: selectedId, onSelect: setSelection, onObjectRefChange: handleObjectRefChange, basePath: basePath }), children] }));
+    const handleCanvasCreated = useCallback((state) => {
+        var _a;
+        canvasRef.current = state.gl.domElement;
+        (_a = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onCreated) === null || _a === void 0 ? void 0 : _a.call(canvasProps, state);
+    }, [canvasProps]);
     return _jsx(PrefabStoreProvider, { store: prefabStore, children: _jsxs(EditorContext.Provider, { value: {
                 mode,
                 setMode: updateMode,
@@ -357,7 +372,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
                 onFocusNode: isEditMode ? handleFocusNode : undefined,
                 onScreenshot: handleScreenshot,
                 onExportGLB: handleExportGLB
-            }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { onPointerMissed: isEditMode
+            }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] } }, canvasProps, { onCreated: handleCanvasCreated, onPointerMissed: isEditMode
                         ? (event) => {
                             var _a, _b, _c, _d;
                             const button = (_c = (_a = event.button) !== null && _a !== void 0 ? _a : (_b = event.sourceEvent) === null || _b === void 0 ? void 0 : _b.button) !== null && _c !== void 0 ? _c : 0;
@@ -366,7 +381,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
                             }
                             (_d = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed) === null || _d === void 0 ? void 0 : _d.call(canvasProps, event);
                         }
-                        : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { debug: isEditMode, paused: isEditMode, children: content })) : content, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) });
+                        : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { debug: isEditMode, paused: isEditMode, children: content })) : content, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -18,6 +18,7 @@ export interface PrefabRootProps {
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
+    onObjectRefChange?: (id: string, object: Object3D | null) => void;
     basePath?: string;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<PrefabRootProps & import("react").RefAttributes<PrefabRootRef>>;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -45,7 +45,7 @@ function isNodeReady(node, loadedModels) {
         return true;
     return Boolean(loadedModels[model.properties.filename]);
 }
-export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onObjectRefChange, basePath = "" }, ref) => {
     var _a;
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
@@ -86,7 +86,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     }), [getObject]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-    }, []);
+        onObjectRefChange === null || onObjectRefChange === void 0 ? void 0 : onObjectRefChange(id, obj);
+    }, [onObjectRefChange]);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
@@ -94,15 +95,6 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         var _a;
         return (_a = rigidBodyRefs.current.get(id)) !== null && _a !== void 0 ? _a : null;
     }, []);
-    useEffect(() => {
-        const originalError = console.error;
-        console.error = (...args) => {
-            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph'))
-                return;
-            originalError.apply(console, args);
-        };
-        return () => { console.error = originalError; };
-    }, []);
     useEffect(() => {
         if (usesOwnedStore && data) {
             resolvedStore.getState().replacePrefab(data);
@@ -281,7 +273,8 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
         ? _jsx(CompositionChildren, { childIds: childIds, selectedId: selectedId, ctx: renderCtx, parentMatrix: world })
         : _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode });
     const inner = (_jsx("group", Object.assign({}, clickHandlers, { children: renderCompositionNode(gameObject, renderCtx, childNodes) })));
-    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner })) }));
+    const physicsInner = editMode ? _jsx("group", { visible: false, children: inner }) : inner;
+    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: physicsInner }, physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner })) }));
 }
 function getChildHostComponents(gameObject) {
     var _a;

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

@@ -129,9 +129,9 @@ function DirectionalLightView({ properties, children }) {
             directionalLightRef.current.target = targetRef.current;
             const nextShadowCamera = directionalLightRef.current.shadow.camera;
             shadowCameraRef.current = nextShadowCamera;
-            setShadowCamera(nextShadowCamera);
+            setShadowCamera(castShadow ? nextShadowCamera : null);
         }
-    }, []);
+    }, [castShadow]);
     useEffect(() => {
         var _a;
         const shadow = (_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;

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

@@ -55,7 +55,7 @@ function SpotLightView({ properties, children }) {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;
         }
-    }, []);
+    }, [castShadow]);
     useEffect(() => {
         var _a;
         const shadow = (_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -48,7 +48,6 @@
     "vite": "^7.3.1"
   },
   "dependencies": {
-    "react-error-boundary": "^6.1.0",
     "zustand": "^5.0.12"
   }
 }