react-three-game 0.0.17 → 0.0.19

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

@@ -21,12 +21,20 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
 function ModelComponentView({ properties, loadedModels, children }) {
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced)
-        return children || null;
+        return _jsx(_Fragment, { children: children });
     if (loadedModels && loadedModels[properties.filename]) {
-        return _jsxs(_Fragment, { children: [_jsx("primitive", { object: loadedModels[properties.filename].clone() }), children] });
+        const clonedModel = loadedModels[properties.filename].clone();
+        // Enable shadows on all meshes in the model
+        clonedModel.traverse((obj) => {
+            if (obj.isMesh) {
+                obj.castShadow = true;
+                obj.receiveShadow = true;
+            }
+        });
+        return _jsx("primitive", { object: clonedModel, children: children });
     }
-    // Optionally, render a placeholder if model is not loaded
-    return children || null;
+    // Model not loaded yet - render children only
+    return _jsx(_Fragment, { children: children });
 }
 const ModelComponent = {
     name: 'Model',

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 function SpotLightComponentEditor({ component, onUpdate }) {
     var _a, _b, _c, _d, _e, _f;
-    // Provide default values to prevent NaN
     const props = {
         color: (_a = component.properties.color) !== null && _a !== void 0 ? _a : '#ffffff',
         intensity: (_b = component.properties.intensity) !== null && _b !== void 0 ? _b : 1.0,
@@ -12,17 +12,22 @@ function SpotLightComponentEditor({ component, onUpdate }) {
     };
     return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.intensity, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'intensity': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Angle" }), _jsx("input", { type: "number", step: "0.1", min: "0", max: Math.PI, className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.angle, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'angle': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Penumbra" }), _jsx("input", { type: "number", step: "0.1", min: "0", max: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.penumbra, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'penumbra': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Distance" }), _jsx("input", { type: "number", step: "1", min: "0", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.distance, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'distance': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Cast Shadow" }), _jsx("input", { type: "checkbox", className: "h-4 w-4 bg-black/40 border border-cyan-500/30 cursor-pointer", checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'castShadow': e.target.checked })) })] })] });
 }
-// The view component for SpotLight
-function SpotLightView({ properties }) {
+function SpotLightView({ properties, editMode }) {
     var _a, _b, _c, _d, _e, _f;
-    // Provide defaults in case properties are missing
     const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
     const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
     const angle = (_c = properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6;
     const penumbra = (_d = properties.penumbra) !== null && _d !== void 0 ? _d : 0.5;
     const distance = (_e = properties.distance) !== null && _e !== void 0 ? _e : 100;
     const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
-    return (_jsx(_Fragment, { children: _jsx("spotLight", { color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow }) }));
+    const spotLightRef = useRef(null);
+    const targetRef = useRef(null);
+    useEffect(() => {
+        if (spotLightRef.current && targetRef.current) {
+            spotLightRef.current.target = targetRef.current;
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _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

@@ -3,6 +3,7 @@ import TransformComponent from './TransformComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
+import DirectionalLightComponent from './DirectionalLightComponent';
 import ModelComponent from './ModelComponent';
 export default [
     GeometryComponent,
@@ -10,5 +11,6 @@ export default [
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
+    DirectionalLightComponent,
     ModelComponent
 ];

package/dist/tools/prefabeditor/hooks/useModelLoader.d.ts

@@ -0,0 +1,10 @@
+import { Object3D } from 'three';
+/**
+ * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
+ * Returns the loaded model with proper caching and suspense support
+ */
+export declare function useModel(filename: string | undefined): Object3D | null;
+/**
+ * Preload a model to avoid suspense boundaries during runtime
+ */
+export declare function preloadModel(filename: string): void;

package/dist/tools/prefabeditor/hooks/useModelLoader.js

@@ -0,0 +1,40 @@
+import { useGLTF, useFBX } from '@react-three/drei';
+import { useMemo } from 'react';
+/**
+ * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
+ * Returns the loaded model with proper caching and suspense support
+ */
+export function useModel(filename) {
+    const isFBX = filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.fbx');
+    const isGLTF = (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.glb')) || (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.gltf'));
+    // Normalize path (ensure leading slash)
+    const normalizedPath = useMemo(() => {
+        if (!filename)
+            return '';
+        return filename.startsWith('/') ? filename : `/${filename}`;
+    }, [filename]);
+    // Load models using drei hooks (these handle caching automatically)
+    const gltf = useGLTF(isGLTF && normalizedPath ? normalizedPath : '', true);
+    const fbx = useFBX(isFBX && normalizedPath ? normalizedPath : '');
+    // Return the appropriate model
+    if (!filename)
+        return null;
+    if (isGLTF)
+        return gltf.scene;
+    if (isFBX)
+        return fbx;
+    return null;
+}
+/**
+ * Preload a model to avoid suspense boundaries during runtime
+ */
+export function preloadModel(filename) {
+    const normalizedPath = filename.startsWith('/') ? filename : `/${filename}`;
+    const isFBX = filename.toLowerCase().endsWith('.fbx');
+    if (isFBX) {
+        useFBX.preload(normalizedPath);
+    }
+    else {
+        useGLTF.preload(normalizedPath);
+    }
+}