react-three-game 0.0.75 → 0.0.77

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

@@ -28,18 +28,12 @@ extend({
     MeshStandardNodeMaterial: MeshStandardNodeMaterial,
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
-function applyCanvasInteractionGuards(canvas) {
-    canvas.style.touchAction = 'none';
-    canvas.style.userSelect = 'none';
-    canvas.style.setProperty('-webkit-touch-callout', 'none');
-    canvas.style.setProperty('-webkit-user-drag', 'none');
-    canvas.style.setProperty('-webkit-tap-highlight-color', 'transparent');
-}
 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' }, style), shadows: { type: PCFShadowMap }, dpr: [1, 1.5], frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
-                const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
+    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;
+                const renderer = new WebGPURenderer(Object.assign({ canvas: canvasElement, 
                     // @ts-expect-error futuristic
                     shadowMap: true, antialias: true }, glConfig));
                 yield renderer.init().then(() => {
@@ -47,10 +41,6 @@ export default function GameCanvas(_a) {
                 });
                 return renderer;
             }), onCreated: (state) => {
-                applyCanvasInteractionGuards(state.gl.domElement);
-                if (canvasRef) {
-                    canvasRef.current = state.gl.domElement;
-                }
                 onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
             } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
 }

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

@@ -165,6 +165,12 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         }
         setSelectedObject(getObject(selectedId));
     }, [getObject, selectedId]);
+    const handleObjectRefChange = useCallback((nodeId, obj) => {
+        if (nodeId !== selectedId) {
+            return;
+        }
+        setSelectedObject(current => current === obj ? current : obj);
+    }, [selectedId]);
     const addNode = useCallback((node, options) => {
         var _a;
         const { addChild, rootId } = prefabStore.getState();
@@ -342,7 +348,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 +368,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;

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, obj: 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

@@ -118,6 +118,7 @@ function DirectionalLightView({ properties, children }) {
     const shadowCameraLeft = merged.shadowCameraLeft;
     const shadowCameraRight = merged.shadowCameraRight;
     const targetOffset = merged.targetOffset;
+    const lightInstanceKey = castShadow ? 'shadow-on' : 'shadow-off';
     const directionalLightRef = useRef(null);
     const targetRef = useRef(null);
     const shadowCameraRef = useRef(null);
@@ -129,9 +130,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;
@@ -161,7 +162,7 @@ function DirectionalLightView({ properties, children }) {
             shadowCamera.updateMatrixWorld();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate }, lightInstanceKey), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
                                     const points = [
                                         new Vector3(0, 0, 0),
                                         new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])

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

@@ -36,6 +36,7 @@ function PointLightView({ properties, children }) {
     const shadowAutoUpdate = merged.shadowAutoUpdate;
     const shadowCameraNear = merged.shadowCameraNear;
     const shadowCameraFar = merged.shadowCameraFar;
+    const lightInstanceKey = castShadow ? 'shadow-on' : 'shadow-off';
     const lightRef = useRef(null);
     useHelper(editMode && isSelected ? lightRef : null, PointLightHelper, 0.5, color);
     useEffect(() => {
@@ -46,7 +47,7 @@ function PointLightView({ properties, children }) {
         shadow.needsUpdate = true;
         shadow.camera.updateProjectionMatrix();
     }, [castShadow, shadowMapSize, shadowBias, shadowNormalBias, shadowAutoUpdate, shadowCameraNear, shadowCameraFar]);
-    return (_jsxs(_Fragment, { children: [_jsx("pointLight", { ref: lightRef, color: color, intensity: intensity, distance: distance, decay: decay, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), editMode && isSelected ? (_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 10, 8] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] })) : null, children] }));
+    return (_jsxs(_Fragment, { children: [_jsx("pointLight", { ref: lightRef, color: color, intensity: intensity, distance: distance, decay: decay, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }, lightInstanceKey), editMode && isSelected ? (_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 10, 8] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] })) : null, children] }));
 }
 const PointLightComponent = {
     name: 'PointLight',

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

@@ -48,6 +48,7 @@ function SpotLightView({ properties, children }) {
     const shadowCameraFar = merged.shadowCameraFar;
     const targetOffset = merged.targetOffset;
     const textureMap = merged.map ? (_a = getTexture(merged.map)) !== null && _a !== void 0 ? _a : undefined : undefined;
+    const lightInstanceKey = castShadow ? 'shadow-on' : 'shadow-off';
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
     useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
@@ -55,7 +56,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;
@@ -70,7 +71,7 @@ function SpotLightView({ properties, children }) {
             spotLightRef.current.target.updateMatrixWorld();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, decay: decay, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] }));
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, decay: decay, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }, lightInstanceKey), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',