react-three-game 0.0.96 → 0.0.98

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -33,32 +33,11 @@ export function normalizeRepeatAxes(value) {
     }, []);
     return normalized.length > 0 ? normalized : DEFAULT_REPEAT_AXES;
 }
-function toVector3Tuple(value, fallback) {
-    if (!Array.isArray(value) || value.length !== 3)
-        return fallback;
-    return value.map((entry, index) => {
-        const next = typeof entry === 'number' ? entry : Number(entry);
-        return Number.isFinite(next) ? next : fallback[index];
-    });
-}
 export function getRepeatAxesFromModelProperties(properties) {
-    var _a;
     if (Array.isArray(properties.repeatAxes)) {
         return normalizeRepeatAxes(properties.repeatAxes);
     }
-    const repeatCount = toVector3Tuple(properties.repeatCount, [1, 1, 1]).map(value => Math.max(1, Math.floor(value)));
-    const repeatOffset = toVector3Tuple(properties.repeatOffset, [1, 1, 1]);
-    const legacyAxes = [];
-    if ((_a = properties.repeatX) !== null && _a !== void 0 ? _a : true) {
-        legacyAxes.push({ axis: 'x', count: repeatCount[0], offset: repeatOffset[0] });
-    }
-    if (properties.repeatY) {
-        legacyAxes.push({ axis: 'y', count: repeatCount[1], offset: repeatOffset[1] });
-    }
-    if (properties.repeatZ) {
-        legacyAxes.push({ axis: 'z', count: repeatCount[2], offset: repeatOffset[2] });
-    }
-    return legacyAxes.length > 0 ? legacyAxes : DEFAULT_REPEAT_AXES;
+    return DEFAULT_REPEAT_AXES;
 }
 // Helper functions for comparison
 function arrayEquals(a, b) {

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -34,7 +34,10 @@ function isObjectAttachedToRoot(root, object) {
 function SelectionHelper({ object }) {
     const objectRef = useRef(null);
     objectRef.current = object;
-    useHelper(object ? objectRef : null, BoxHelper, "cyan");
+    const helperTarget = objectRef.current
+        ? { current: objectRef.current }
+        : null;
+    useHelper(helperTarget, BoxHelper, "cyan");
     return null;
 }
 export const EditorContext = createContext(null);

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -361,9 +361,6 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
     const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
     const localTransform = getNodeTransformProps(gameObject);
     const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
-    const nodeVisible = isVisible && !(gameObject === null || gameObject === void 0 ? void 0 : gameObject.hidden);
-    const metadataProps = gameObject ? getNodeMetadataProps(gameObject) : { name: '', userData: {} };
-    const groupProps = Object.assign(Object.assign({}, metadataProps), { visible: nodeVisible, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale });
     const modelUrl = (_b = (_a = analyzedComponents.model) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl), [gameObject, modelUrl, parentMatrix]);
     const groupRef = useRef(null);
@@ -381,6 +378,8 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
     });
     if (!gameObject)
         return null;
+    const nodeVisible = isVisible && !gameObject.hidden;
+    const groupProps = Object.assign(Object.assign({}, getNodeMetadataProps(gameObject)), { visible: nodeVisible, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale });
     const renderedInstances = instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, visible: nodeVisible, locked: isLocked, onClick: onClick }, instance.id)));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: handleGroupRef }, groupProps, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), renderedInstances] }));
@@ -393,8 +392,6 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
     const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
     const isSelected = selectedId === nodeId;
     const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
-    const nodeVisible = isVisible && !(gameObject === null || gameObject === void 0 ? void 0 : gameObject.hidden);
-    const metadataProps = gameObject ? getNodeMetadataProps(gameObject) : { name: '', userData: {} };
     const groupRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
         groupRef.current = object;
@@ -415,6 +412,10 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
         }
         : undefined;
     const world = parentMatrix.clone().multiply(compose(gameObject));
+    if (!gameObject)
+        return null;
+    const nodeVisible = isVisible && !gameObject.hidden;
+    const metadataProps = getNodeMetadataProps(gameObject);
     const transform = getNodeTransformProps(gameObject);
     const transformProps = {
         position: transform.position,
@@ -423,8 +424,6 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
     };
     const groupProps = Object.assign(Object.assign({}, metadataProps), transformProps);
     const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, onEditNodeClick: onEditNodeClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode, isVisible: nodeVisible });
-    if (!gameObject)
-        return null;
     const inner = renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes);
     const editAnchor = editMode ? (_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) })) : null;
     const standardNode = (_jsxs("group", Object.assign({ ref: handleGroupRef }, groupProps, { visible: nodeVisible }, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })));

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

@@ -1,3 +1,3 @@
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 declare const CameraComponent: Component;
 export default CameraComponent;

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

@@ -39,10 +39,13 @@ function CameraComponentView({ properties, children }) {
     const halfWidth = halfHeight * aspect;
     const perspectiveCameraRef = useRef(null);
     const orthographicCameraRef = useRef(null);
-    const activeCameraRef = projection === 'orthographic'
-        ? orthographicCameraRef
-        : perspectiveCameraRef;
-    useHelper(editMode && isSelected ? activeCameraRef : null, CameraHelper);
+    const activeCamera = projection === 'orthographic'
+        ? orthographicCameraRef.current
+        : perspectiveCameraRef.current;
+    const helperTarget = editMode && isSelected && activeCamera
+        ? { current: activeCamera }
+        : null;
+    useHelper(helperTarget, CameraHelper);
     useFrame(() => {
         if (!editMode || !isSelected)
             return;

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

@@ -1,11 +1,13 @@
-import { FC } from "react";
-import { ComponentData, GameObject } from "../types";
+import type { FC } from "react";
+import type { ComponentData, GameObject } from "../types";
 export type AssetRef = {
     type: "model" | "texture" | "sound";
     path: string;
 };
+export declare function assetRef(type: AssetRef["type"], path: unknown): AssetRef | null;
+export declare function assetRefs(...refs: Array<AssetRef | null | undefined>): AssetRef[];
 /** Props every component View receives from the renderer. */
-export interface ComponentViewProps<P = Record<string, any>> {
+export interface ComponentViewProps<P = Record<string, unknown>> {
     /** This component's own data from the prefab JSON. */
     properties: P;
     /** Children to render for components that wrap the current subtree. */
@@ -22,15 +24,15 @@ export interface Component {
     Editor: FC<{
         node?: GameObject;
         component: ComponentData;
-        onUpdate: (newComp: any) => void;
+        onUpdate: (newComp: Record<string, unknown>) => void;
         basePath?: string;
     }>;
-    defaultProperties: any;
+    defaultProperties: Record<string, unknown>;
     View?: FC<ComponentViewProps>;
     /** Declare which asset paths this component references (for asset loading). */
-    getAssetRefs?: (properties: Record<string, any>) => AssetRef[];
+    getAssetRefs?: (properties: Record<string, unknown>) => AssetRef[];
 }
 export declare function registerComponent(component: Component): void;
 export declare function getComponentDef(name: string): Component | undefined;
 export declare function getAllComponentDefs(): Record<string, Component>;
-export declare function getComponentAssetRefs(componentType: string, properties: Record<string, any>): AssetRef[];
+export declare function getComponentAssetRefs(componentType: string, properties: Record<string, unknown>): AssetRef[];

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

@@ -1,3 +1,9 @@
+export function assetRef(type, path) {
+    return typeof path === "string" ? { type, path } : null;
+}
+export function assetRefs(...refs) {
+    return refs.filter((ref) => ref != null);
+}
 const REGISTRY = {};
 export function registerComponent(component) {
     REGISTRY[component.name] = component;

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

@@ -1,3 +1,3 @@
-import { Component } from "./ComponentRegistry";
+import type { Component } from "./ComponentRegistry";
 declare const DirectionalLightComponent: Component;
 export default DirectionalLightComponent;

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

@@ -122,7 +122,10 @@ function DirectionalLightView({ properties, children }) {
     const targetRef = useRef(null);
     const shadowCameraRef = useRef(null);
     const [shadowCamera, setShadowCamera] = useState(null);
-    useHelper(editMode && isSelected && castShadow ? shadowCameraRef : null, CameraHelper);
+    const helperTarget = editMode && isSelected && castShadow && shadowCameraRef.current
+        ? { current: shadowCameraRef.current }
+        : null;
+    useHelper(helperTarget, CameraHelper);
     // Use a local target object so node transforms rotate the light direction naturally.
     useEffect(() => {
         if (directionalLightRef.current && targetRef.current) {
@@ -131,7 +134,7 @@ function DirectionalLightView({ properties, children }) {
             shadowCameraRef.current = nextShadowCamera;
             setShadowCamera(castShadow ? nextShadowCamera : null);
         }
-    }, [castShadow]);
+    });
     useEffect(() => {
         var _a;
         const shadow = (_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
@@ -139,19 +142,7 @@ function DirectionalLightView({ properties, children }) {
             return;
         shadow.needsUpdate = true;
         shadow.camera.updateProjectionMatrix();
-    }, [
-        castShadow,
-        shadowMapSize,
-        shadowBias,
-        shadowNormalBias,
-        shadowAutoUpdate,
-        shadowCameraNear,
-        shadowCameraFar,
-        shadowCameraTop,
-        shadowCameraBottom,
-        shadowCameraLeft,
-        shadowCameraRight,
-    ]);
+    });
     useFrame(() => {
         if (!directionalLightRef.current || !targetRef.current)
             return;

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

@@ -13,11 +13,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
+import { assetRef, assetRefs } from './ComponentRegistry';
 import { FieldRenderer, Label, NumberInput } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
 import { TexturePicker } from '../../assetviewer/page';
-import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
+import { RepeatWrapping, ClampToEdgeWrapping, NoColorSpace, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
 function Vector2Editor({ label, value, onChange, min, max, step, }) {
     var _a, _b;
     return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs(Label, { children: [label, " X"] }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, onChange: x => { var _a; return onChange([x, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 0]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs(Label, { children: [label, " Y"] }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 0, onChange: y => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, y]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
@@ -188,7 +189,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
@@ -234,7 +235,7 @@ function MaterialComponentView({ properties: rawProps }) {
             repeat,
             repeatCount,
             offset,
-            colorSpace: LinearSRGBColorSpace,
+            colorSpace: NoColorSpace,
             generateMipmaps,
             minFilter: resolvedMinFilter,
             magFilter: resolvedMagFilter,
@@ -255,16 +256,22 @@ function MaterialComponentView({ properties: rawProps }) {
     if (!properties) {
         return _jsx("meshStandardNodeMaterial", { attach: "material", color: "red", wireframe: true });
     }
-    const materialKey = `${materialType}:${textureName !== null && textureName !== void 0 ? textureName : 'none'}:${normalMapTextureName !== null && normalMapTextureName !== void 0 ? normalMapTextureName : 'none'}`;
+    const materialKey = [
+        materialType,
+        textureName !== null && textureName !== void 0 ? textureName : 'none',
+        (_l = texture === null || texture === void 0 ? void 0 : texture.uuid) !== null && _l !== void 0 ? _l : 'texture-pending',
+        normalMapTextureName !== null && normalMapTextureName !== void 0 ? normalMapTextureName : 'none',
+        (_m = normalMapTexture === null || normalMapTexture === void 0 ? void 0 : normalMapTexture.uuid) !== null && _m !== void 0 ? _m : 'normal-pending',
+    ].join(':');
     const sharedProps = Object.assign(Object.assign({ map: finalTexture, side: resolvedSide }, materialProps), overrides);
     if (materialType === 'basic') {
         return _jsx("meshBasicNodeMaterial", Object.assign({ attach: "material" }, sharedProps), materialKey);
     }
     if (materialType === 'sprite') {
         const spriteTransparent = materialSource.transparent !== false;
-        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture, color: (_l = materialSource.color) !== null && _l !== void 0 ? _l : '#ffffff', opacity: (_m = materialSource.opacity) !== null && _m !== void 0 ? _m : 1, transparent: spriteTransparent, alphaTest: (_o = materialSource.alphaTest) !== null && _o !== void 0 ? _o : 0, depthTest: (_p = materialSource.depthTest) !== null && _p !== void 0 ? _p : false, depthWrite: (_q = materialSource.depthWrite) !== null && _q !== void 0 ? _q : false, toneMapped: (_r = materialSource.toneMapped) !== null && _r !== void 0 ? _r : true }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true }), materialKey));
+        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture, color: (_o = materialSource.color) !== null && _o !== void 0 ? _o : '#ffffff', opacity: (_p = materialSource.opacity) !== null && _p !== void 0 ? _p : 1, transparent: spriteTransparent, alphaTest: (_q = materialSource.alphaTest) !== null && _q !== void 0 ? _q : 0, depthTest: (_r = materialSource.depthTest) !== null && _r !== void 0 ? _r : false, depthWrite: (_s = materialSource.depthWrite) !== null && _s !== void 0 ? _s : false, toneMapped: (_t = materialSource.toneMapped) !== null && _t !== void 0 ? _t : true }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true }), materialKey));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_s = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _s !== void 0 ? _s : 1, (_t = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _t !== void 0 ? _t : 1] : undefined }), materialKey));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_u = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _u !== void 0 ? _u : 1, (_v = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _v !== void 0 ? _v : 1] : undefined }), materialKey));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -284,13 +291,6 @@ const MaterialComponent = {
         metalness: 0,
         roughness: 1
     },
-    getAssetRefs: (properties) => {
-        const refs = [];
-        if (properties.texture)
-            refs.push({ type: 'texture', path: properties.texture });
-        if (properties.normalMapTexture)
-            refs.push({ type: 'texture', path: properties.normalMapTexture });
-        return refs;
-    },
+    getAssetRefs: (properties) => assetRefs(assetRef('texture', properties.texture), assetRef('texture', properties.normalMapTexture)),
 };
 export default MaterialComponent;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ModelPicker } from '../../assetviewer/page';
 import { useMemo } from 'react';
 import { Mesh } from 'three';
+import { assetRef, assetRefs } from './ComponentRegistry';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput, StringField } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
 import { useEditorContext } from '../PrefabEditor';
@@ -70,10 +71,6 @@ const ModelComponent = {
     Editor: ModelComponentEditor,
     View: ModelComponentView,
     defaultProperties: {},
-    getAssetRefs: (properties) => {
-        if (properties.filename)
-            return [{ type: 'model', path: properties.filename }];
-        return [];
-    },
+    getAssetRefs: (properties) => assetRefs(assetRef('model', properties.filename)),
 };
 export default ModelComponent;

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

@@ -1,3 +1,3 @@
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 declare const PointLightComponent: Component;
 export default PointLightComponent;

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

@@ -37,7 +37,10 @@ function PointLightView({ properties, children }) {
     const shadowCameraNear = merged.shadowCameraNear;
     const shadowCameraFar = merged.shadowCameraFar;
     const lightRef = useRef(null);
-    useHelper(editMode && isSelected ? lightRef : null, PointLightHelper, 0.5, color);
+    const helperTarget = editMode && isSelected && lightRef.current
+        ? { current: lightRef.current }
+        : null;
+    useHelper(helperTarget, PointLightHelper, 0.5, color);
     useEffect(() => {
         var _a;
         const shadow = (_a = lightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
@@ -45,7 +48,7 @@ function PointLightView({ properties, children }) {
             return;
         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] }));
 }
 const PointLightComponent = {

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

@@ -1,3 +1,3 @@
-import { Component } from "./ComponentRegistry";
+import type { Component } from "./ComponentRegistry";
 declare const SpotLightComponent: Component;
 export default SpotLightComponent;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { assetRef, assetRefs } from "./ComponentRegistry";
 import { useHelper } from "@react-three/drei";
 import { useRef, useEffect } from "react";
 import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
@@ -50,12 +51,15 @@ function SpotLightView({ properties, children }) {
     const textureMap = merged.map ? (_a = getTexture(merged.map)) !== null && _a !== void 0 ? _a : undefined : undefined;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
+    const helperTarget = editMode && isSelected && spotLightRef.current
+        ? { current: spotLightRef.current }
+        : null;
+    useHelper(helperTarget, SpotLightHelper, color);
     useEffect(() => {
         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;
@@ -63,7 +67,7 @@ function SpotLightView({ properties, children }) {
             return;
         shadow.needsUpdate = true;
         shadow.camera.updateProjectionMatrix();
-    }, [castShadow, shadowMapSize, shadowBias, shadowNormalBias, shadowAutoUpdate, shadowCameraNear, shadowCameraFar]);
+    });
     useFrame(() => {
         var _a;
         if ((_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.target) {
@@ -77,10 +81,6 @@ const SpotLightComponent = {
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
     defaultProperties: {},
-    getAssetRefs: (properties) => {
-        if (properties.map)
-            return [{ type: 'texture', path: properties.map }];
-        return [];
-    },
+    getAssetRefs: (properties) => assetRefs(assetRef('texture', properties.map)),
 };
 export default SpotLightComponent;

package/package.json

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