react-three-game 0.0.62 → 0.0.63

package/README.md

@@ -3,7 +3,7 @@
 JSON-first 3D game engine. React Three Fiber + WebGPU + Rapier Physics.
 
 ```bash
-npm i react-three-game @react-three/fiber @react-three/rapier three
+npm i react-three-game @react-three/drei @react-three/fiber @react-three/rapier three
 ```
 
 ![Prefab Editor](assets/editor.gif)
@@ -102,8 +102,10 @@ interface GameObject {
 ## Custom Components
 
 ```tsx
+import { useRef } from 'react';
 import { Component, registerComponent, FieldRenderer, FieldDefinition } from 'react-three-game';
 import { useFrame } from '@react-three/fiber';
+import type { Group } from 'three';
 
 const rotatorFields: FieldDefinition[] = [
   { name: 'speed', type: 'number', label: 'Speed', step: 0.1 },
@@ -214,6 +216,7 @@ export function EmbeddedEditor({ prefab, onPrefabChange }: {
         showUI={false}
         physics={false}
         enableWindowDrop={false}
+        canvasProps={{ style: { height: '100%', width: '100%' } }}
       />
     </div>
   );
@@ -226,6 +229,7 @@ export function EmbeddedEditor({ prefab, onPrefabChange }: {
 - `addModel(path, model, options?)` creates a model node and injects the runtime asset in one step.
 - `addTexture(path, texture, options?)` creates a textured plane node and injects the runtime texture in one step.
 - `exportGLBData()` returns the GLB `ArrayBuffer` without triggering a download.
+- `canvasProps` forwards canvas-level sizing, camera, event, and style props to `GameCanvas`.
 - `setPrefab(prefab)` remains as a backward-compatible alias for `replacePrefab(prefab)`.
 
 Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.

package/dist/shared/GameCanvas.d.ts

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

package/dist/shared/GameCanvas.js

@@ -31,9 +31,9 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 export default function GameCanvas(_a) {
-    var { loader = false, children, glConfig, canvasRef, onCreated } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated"]);
+    var { loader = false, children, glConfig, canvasRef, onCreated, style } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated", "style"]);
     const [frameloop, setFrameloop] = useState("never");
-    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: { touchAction: 'none', userSelect: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none' }, style), shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
                     // @ts-expect-error futuristic
                     shadowMap: true, antialias: true }, glConfig));

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

@@ -1,3 +1,4 @@
+import GameCanvas from "../../shared/GameCanvas";
 import { Object3D, Texture } from "three";
 import { GameObject, Prefab } from "./types";
 import { PrefabRootRef } from "./PrefabRoot";
@@ -25,6 +26,7 @@ export interface PrefabEditorProps {
     onPrefabChange?: (prefab: Prefab) => void;
     showUI?: boolean;
     enableWindowDrop?: boolean;
+    canvasProps?: Omit<React.ComponentProps<typeof GameCanvas>, 'children' | 'canvasRef'>;
     uiPlugins?: React.ReactNode[] | React.ReactNode;
     children?: React.ReactNode;
 }

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -30,7 +30,7 @@ const DEFAULT_PREFAB = {
         }
     }
 };
-const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, showUI = true, enableWindowDrop = true, uiPlugins, children }, ref) => {
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
@@ -46,6 +46,8 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const canvasRef = useRef(null);
     const onPrefabChangeRef = useRef(onPrefabChange);
     const pendingPrefabChangeRef = useRef(null);
+    const [injectedModels, setInjectedModels] = useState({});
+    const [injectedTextures, setInjectedTextures] = useState({});
     useEffect(() => {
         onPrefabChangeRef.current = onPrefabChange;
     }, [onPrefabChange]);
@@ -55,6 +57,8 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         lastDataRef.current = JSON.stringify(prefab);
         pendingPrefabChangeRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? null : prefab;
         setSelectedId(null);
+        setInjectedModels({});
+        setInjectedTextures({});
         setHistory([prefab]);
         setHistoryIndex(0);
         setLoadedPrefab(prefab);
@@ -91,17 +95,15 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         return node;
     };
     const addModel = (path, model, options) => {
-        var _a;
         const node = createModelNode(path, options === null || options === void 0 ? void 0 : options.name);
         insertPrefabNode(node, options);
-        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(path, model);
+        setInjectedModels(prev => (Object.assign(Object.assign({}, prev), { [path]: model })));
         return node;
     };
     const addTexture = (path, texture, options) => {
-        var _a;
         const node = createImageNode(path, options === null || options === void 0 ? void 0 : options.name);
         insertPrefabNode(node, options);
-        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectTexture(path, texture);
+        setInjectedTextures(prev => (Object.assign(Object.assign({}, prev), { [path]: texture })));
         return node;
     };
     const applyHistory = (index) => {
@@ -225,7 +227,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         addTexture,
         rootRef: prefabRootRef
     }), [loadedPrefab]);
-    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath }), children] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
     return _jsxs(EditorContext.Provider, { value: {
             transformMode,
             setTransformMode,
@@ -238,7 +240,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             onFocusNode: handleFocusNode,
             onScreenshot: handleScreenshot,
             onExportGLB: handleExportGLB
-        }, children: [_jsx(GameCanvas, { camera: { position: [0, 5, 15] }, canvasRef: canvasRef, children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content }), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] }))] });
+        }, children: [_jsx(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, 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

@@ -4,8 +4,6 @@ import { Prefab, GameObject as GameObjectType } from "./types";
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
-    injectModel: (filename: string, model: Object3D) => void;
-    injectTexture: (filename: string, texture: Texture) => void;
     focusNode: (nodeId: string) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
@@ -16,6 +14,8 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     basePath?: string;
+    injectedModels?: Record<string, Object3D>;
+    injectedTextures?: Record<string, Texture>;
 } & import("react").RefAttributes<PrefabRootRef>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -9,7 +9,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, useHelper } from "@react-three/drei";
-import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
 import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
 import components from "./components";
@@ -19,7 +19,7 @@ import { focusCameraOnObject, updateNode } from "./utils";
 import { EditorContext } from "./EditorContext";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "", injectedModels = {}, injectedTextures = {} }, ref) => {
     var _a, _b, _c, _d;
     // optional editor context
     const editorContext = useContext(EditorContext);
@@ -37,18 +37,11 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     const [selectedObject, setSelectedObject] = useState(null);
     const rootRef = useRef(null);
     const controlsRef = useRef(null);
-    const injectModel = useCallback((filename, model) => {
-        setModels(m => (Object.assign(Object.assign({}, m), { [filename]: model })));
-    }, []);
-    const injectTexture = useCallback((filename, texture) => {
-        loading.current.add(filename);
-        setTextures(t => (Object.assign(Object.assign({}, t), { [filename]: texture })));
-    }, []);
+    const availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
+    const availableTextures = useMemo(() => (Object.assign(Object.assign({}, textures), injectedTextures)), [textures, injectedTextures]);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
         rigidBodyRefs: rigidBodyRefs.current,
-        injectModel,
-        injectTexture,
         focusNode: (nodeId) => {
             const object = objectRefs.current[nodeId];
             const controls = controlsRef.current;
@@ -57,7 +50,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 return;
             focusCameraOnObject(object, camera, controls.target, () => { var _a; return (_a = controls.update) === null || _a === void 0 ? void 0 : _a.call(controls); });
         }
-    }), [injectModel, injectTexture]);
+    }), []);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
         if (id === selectedId)
@@ -107,7 +100,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 texturesToLoad.add(node.components.material.properties.normalMapTexture);
         });
         modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
-            if (models[file] || loading.current.has(file))
+            if (availableModels[file] || loading.current.has(file))
                 return;
             loading.current.add(file);
             const path = file.startsWith("/")
@@ -121,7 +114,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         }));
         const loader = new TextureLoader();
         texturesToLoad.forEach(file => {
-            if (textures[file] || loading.current.has(file) || failedTextures.current.has(file))
+            if (availableTextures[file] || loading.current.has(file) || failedTextures.current.has(file))
                 return;
             loading.current.add(file);
             // Handle full URLs (http/https) or regular paths
@@ -139,8 +132,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 failedTextures.current.add(file);
             });
         });
-    }, [data, models, textures]);
-    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] }));
+    }, [data, availableModels, availableTextures, basePath]);
+    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: availableModels, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] }));
 });
 export function GameObjectRenderer(props) {
     var _a, _b, _c;

package/package.json

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