react-three-game 0.0.55 → 0.0.57

package/dist/tools/prefabeditor/utils.js

@@ -8,12 +8,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-/** Save a prefab as JSON file */
+import { Box3, PerspectiveCamera, Quaternion, Vector3 } from 'three';
+/** Save a prefab as JSON file, showing a Save As dialog when supported */
 export function saveJson(data, filename) {
-    const a = document.createElement('a');
-    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
-    a.download = `${filename || 'prefab'}.json`;
-    a.click();
+    return __awaiter(this, void 0, void 0, function* () {
+        const json = JSON.stringify(data, null, 2);
+        if ('showSaveFilePicker' in window) {
+            try {
+                const handle = yield window.showSaveFilePicker({
+                    suggestedName: `${filename || 'prefab'}.json`,
+                    types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
+                });
+                const writable = yield handle.createWritable();
+                yield writable.write(json);
+                yield writable.close();
+                return;
+            }
+            catch (e) {
+                if ((e === null || e === void 0 ? void 0 : e.name) === 'AbortError')
+                    return; // user cancelled
+            }
+        }
+        // Fallback for browsers without File System Access API
+        const a = document.createElement('a');
+        a.href = "data:text/json;charset=utf-8," + encodeURIComponent(json);
+        a.download = `${filename || 'prefab'}.json`;
+        a.click();
+    });
 }
 /** Load a prefab from JSON file */
 export function loadJson() {
@@ -85,6 +106,33 @@ export function exportGLBData(sceneRoot) {
         return result;
     });
 }
+export function focusCameraOnObject(object, camera, target, update) {
+    const bounds = new Box3().setFromObject(object);
+    const center = new Vector3();
+    const size = new Vector3();
+    const quaternion = new Quaternion();
+    object.getWorldQuaternion(quaternion);
+    if (bounds.isEmpty()) {
+        object.getWorldPosition(center);
+        size.setScalar(1);
+    }
+    else {
+        bounds.getCenter(center);
+        bounds.getSize(size);
+    }
+    const radius = Math.max(size.length() * 0.5, 1);
+    const forward = new Vector3(0, 0, 1).applyQuaternion(quaternion).normalize();
+    const worldUp = new Vector3(0, 1, 0);
+    const elevatedDirection = forward.clone().addScaledVector(worldUp, 0.65).normalize();
+    const distance = camera instanceof PerspectiveCamera
+        ? Math.max(radius / Math.tan((camera.fov * Math.PI) / 360) * 1.8, radius * 3.5)
+        : radius * 4.5;
+    const nextPosition = center.clone().add(elevatedDirection.multiplyScalar(distance));
+    camera.position.copy(nextPosition);
+    camera.lookAt(center);
+    target.copy(center);
+    update === null || update === void 0 ? void 0 : update();
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;
@@ -149,7 +197,7 @@ export function deleteNode(root, id) {
 /** Deep clone a node with new IDs */
 export function cloneNode(node) {
     var _a, _b;
-    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), name: `${(_a = node.name) !== null && _a !== void 0 ? _a : "Node"} Copy`, children: (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(cloneNode) });
+    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), name: `${(_a = node.name) !== null && _a !== void 0 ? _a : node.id} Copy`, children: (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(cloneNode) });
 }
 /** Recursively update all IDs in a node tree */
 export function regenerateIds(node) {
@@ -180,3 +228,41 @@ export function updateNodeById(root, id, updater) {
         return root;
     return Object.assign(Object.assign({}, root), { children: newChildren });
 }
+/** Create a GameObject node for a 3D model file */
+export function createModelNode(filename, name) {
+    return {
+        id: crypto.randomUUID(),
+        name: name !== null && name !== void 0 ? name : filename.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: {
+            transform: {
+                type: 'Transform',
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            },
+            model: {
+                type: 'Model',
+                properties: { filename, instanced: false }
+            }
+        }
+    };
+}
+/** Create a GameObject node for an image as a textured plane */
+export function createImageNode(texturePath, name) {
+    return {
+        id: crypto.randomUUID(),
+        name: name !== null && name !== void 0 ? name : texturePath.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: {
+            transform: {
+                type: 'Transform',
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            },
+            geometry: {
+                type: 'Geometry',
+                properties: { geometryType: 'plane', args: [1, 1] }
+            },
+            material: {
+                type: 'Material',
+                properties: { color: '#ffffff', texture: texturePath }
+            }
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/react-three-game-skill/react-three-game/rules/LIGHTING.md

@@ -0,0 +1,6 @@
+For large scenes, bake the shadows.
+
+// trigger a shadow update when needed
+envMesh.castShadow = true;
+directionalLight.current.shadow.autoUpdate = false;
+directionalLight.current.shadow.needsUpdate = true;

package/src/index.ts

@@ -15,13 +15,20 @@ export { registerComponent } from './tools/prefabeditor/components/ComponentRegi
 // Prefab Editor - Input Components
 export {
   FieldRenderer,
+  FieldGroup,
   Input,
   Label,
   Vector3Input,
+  Vector3Field,
+  NumberField,
   ColorInput,
+  ColorField,
   StringInput,
+  StringField,
   BooleanInput,
+  BooleanField,
   SelectInput,
+  SelectField,
 } from './tools/prefabeditor/components/Input';
 
 // Prefab Editor - Styles & Utils

package/src/shared/ContactShadow.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useMemo } from "react";
+import * as THREE from "three/webgpu";
+import {
+    float,
+    uv,
+    vec3,
+    smoothstep,
+    uniform,
+    length,
+} from "three/tsl";
+
+interface ContactShadowProps {
+    opacity?: number;
+    blur?: number;
+    scale?: number;
+    yOffset?: number;
+}
+
+const ContactShadow = ({
+    opacity = 0.4,
+    blur = 2.5,
+    scale = 1.2,
+    yOffset = 0.05,
+}: ContactShadowProps) => {
+    const material = useMemo(() => {
+        const mat = new THREE.MeshBasicNodeMaterial();
+        mat.transparent = true;
+        mat.depthWrite = false;
+        mat.depthTest = true;
+        mat.side = THREE.DoubleSide;
+        mat.polygonOffset = true;
+        mat.polygonOffsetFactor = -1;
+        mat.polygonOffsetUnits = -1;
+
+        const uOpacity = uniform(opacity);
+        const uBlur = uniform(blur);
+
+        // UVs centered around origin
+        const centeredUV = uv().sub(0.5).mul(2.0);
+
+        // IMPORTANT: use functional length(), not .length()
+        const dist = length(centeredUV);
+
+        const innerRadius = float(0.0);
+        const outerRadius = float(1.0);
+        const blurAmount = uBlur.div(10.0);
+
+        const alpha = smoothstep(
+            outerRadius,
+            innerRadius.add(blurAmount),
+            dist
+        ).mul(uOpacity);
+
+        mat.colorNode = vec3(0.0, 0.0, 0.0);
+        mat.opacityNode = alpha;
+
+        return mat;
+    }, [opacity, blur]);
+
+    return (
+        <mesh
+            rotation={[-Math.PI / 2, 0, 0]}
+            position={[0, yOffset, 0]}
+            material={material}
+            renderOrder={1}
+        >
+            <planeGeometry args={[scale, scale]} />
+        </mesh>
+    );
+};
+
+export default ContactShadow;

package/src/shared/GameCanvas.tsx

@@ -40,9 +40,6 @@ export default function GameCanvas({ loader = false, children, glConfig, ...prop
                 });
                 return renderer
             }}
-            camera={{
-                position: [0, 1, 5],
-            }}
             {...props}
         >
             <Suspense>

package/src/tools/assetviewer/page.tsx

@@ -1,15 +1,26 @@
-import { Canvas, useLoader } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
 import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
-import { Suspense, useEffect, useState, useRef } from "react";
+import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
 import { loadModel } from "../dragdrop/modelLoader";
 
+class ErrorBoundary extends ReactComponent<{ onError?: () => void; children: React.ReactNode }, { hasError: boolean }> {
+    constructor(props: any) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() { return { hasError: true }; }
+    componentDidCatch() { this.props.onError?.(); }
+    render() { return this.state.hasError ? null : this.props.children; }
+}
+
 // view models and textures in manifest, onselect callback
 
 const styles: Record<string, any> = {
     errorIcon: { color: '#fca5a5', fontSize: 12 }, // text-red-400 text-xs
     flexFillRelative: { flex: 1, position: 'relative' },
-    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', color: '#f9fafb', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    textLight: { color: '#f9fafb' },
     iconLarge: { fontSize: 20 }
 };
 
@@ -49,6 +60,7 @@ function FolderTile({ name, onClick }: { name: string; onClick: () => void }) {
                 maxWidth: 60,
                 aspectRatio: '1 / 1',
                 backgroundColor: '#1f2937', /* gray-800 */
+                color: '#f9fafb',
                 cursor: 'pointer',
                 display: 'flex',
                 flexDirection: 'column',
@@ -100,7 +112,7 @@ function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListVie
     const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
 
     return (
-        <div>
+        <div style={styles.textLight}>
             {currentPath && (
                 <button
                     onClick={() => {
@@ -140,17 +152,19 @@ interface TextureListViewerProps {
 
 export function TextureListViewer({ files, selected, onSelect, basePath = "" }: TextureListViewerProps) {
     return (
-        <>
-            <AssetListViewer
-                files={files}
-                selected={selected}
-                onSelect={onSelect}
-                renderCard={(file, onSelectHandler) => (
-                    <TextureCard file={file} basePath={basePath} onSelect={onSelectHandler} />
-                )}
-            />
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+            <div style={{ width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }}>
+                <AssetListViewer
+                    files={files}
+                    selected={selected}
+                    onSelect={onSelect}
+                    renderCard={(file, onSelectHandler) => (
+                        <TextureCard file={file} basePath={basePath} onSelect={onSelectHandler} />
+                    )}
+                />
+            </div>
             <SharedCanvas />
-        </>
+        </div>
     );
 }
 
@@ -175,7 +189,7 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
     return (
         <div
             ref={ref}
-            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
+            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
@@ -184,21 +198,19 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
                 {isInView ? (
                     <View style={{ width: '100%', height: '100%' }}>
                         <PerspectiveCamera makeDefault position={[0, 0, 2.5]} fov={50} />
-                        <Suspense fallback={null}>
-                            <ambientLight intensity={0.8} />
-                            <pointLight position={[5, 5, 5]} intensity={0.5} />
-                            <TextureSphere url={fullPath} onError={() => setError(true)} />
-                            <OrbitControls
-                                enableZoom={false}
-                                enablePan={false}
-                                autoRotate={isHovered}
-                                autoRotateSpeed={2}
-                            />
-                        </Suspense>
+                        <ambientLight intensity={0.8} />
+                        <pointLight position={[5, 5, 5]} intensity={0.5} />
+                        <TextureSphere url={fullPath} onError={() => setError(true)} />
+                        <OrbitControls
+                            enableZoom={false}
+                            enablePan={false}
+                            autoRotate={isHovered}
+                            autoRotateSpeed={2}
+                        />
                     </View>
                 ) : null}
             </div>
-            <div style={{ backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
+            <div style={styles.bottomLabel}>
                 {file.split('/').pop()}
             </div>
         </div>
@@ -206,10 +218,23 @@ function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect
 }
 
 function TextureSphere({ url, onError }: { url: string; onError?: () => void }) {
-    const texture = useLoader(TextureLoader, url, undefined, (error) => {
-        console.error('Failed to load texture:', url, error);
-        onError?.();
-    });
+    const [texture, setTexture] = useState<any>(null);
+
+    useEffect(() => {
+        setTexture(null);
+        const loader = new TextureLoader();
+        loader.load(
+            url,
+            (tex) => setTexture(tex),
+            undefined,
+            (err) => {
+                console.warn('Failed to load texture:', url, err);
+                onError?.();
+            }
+        );
+    }, [url]);
+
+    if (!texture) return null;
     return (
         <mesh position={[0, 0, 0]}>
             <sphereGeometry args={[1, 32, 32]} />
@@ -227,17 +252,19 @@ interface ModelListViewerProps {
 
 export function ModelListViewer({ files, selected, onSelect, basePath = "" }: ModelListViewerProps) {
     return (
-        <>
-            <AssetListViewer
-                files={files}
-                selected={selected}
-                onSelect={onSelect}
-                renderCard={(file, onSelectHandler) => (
-                    <ModelCard file={file} basePath={basePath} onSelect={onSelectHandler} />
-                )}
-            />
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+            <div style={{ width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }}>
+                <AssetListViewer
+                    files={files}
+                    selected={selected}
+                    onSelect={onSelect}
+                    renderCard={(file, onSelectHandler) => (
+                        <ModelCard file={file} basePath={basePath} onSelect={onSelectHandler} />
+                    )}
+                />
+            </div>
             <SharedCanvas />
-        </>
+        </div>
     );
 }
 
@@ -261,7 +288,7 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             ref={ref}
-            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
+            style={{ maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
             onClick={() => onSelect(file)}
         >
             <div style={styles.flexFillRelative}>
@@ -277,7 +304,7 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
                     </View>
                 ) : null}
             </div>
-            <div style={{ backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
+            <div style={styles.bottomLabel}>
                 {file.split('/').pop()}
             </div>
         </div>
@@ -335,10 +362,10 @@ function SoundCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
     return (
         <div
             onClick={() => onSelect(file)}
-            style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
+            style={{ aspectRatio: '1 / 1', backgroundColor: '#374151', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
         >
             <div style={styles.iconLarge}>🔊</div>
-            <div style={{ fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }}>{fileName}</div>
+            <div style={{ color: '#f9fafb', fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }}>{fileName}</div>
         </div>
     );
 }
@@ -375,14 +402,19 @@ export function SharedCanvas() {
         <Canvas
             shadows
             dpr={[1, 1.5]}
+            gl={{ alpha: true }}
             camera={{ position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }}
+            onCreated={({ gl }) => {
+                gl.setClearAlpha(0);
+            }}
             style={{
-                position: 'absolute',
+                position: 'fixed',
                 top: 0,
                 left: 0,
                 width: '100vw',
                 height: '100vh',
                 pointerEvents: 'none',
+                background: 'transparent',
             }}
             eventSource={typeof document !== 'undefined' ? document.getElementById('root') || undefined : undefined}
             eventPrefix="client"

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,54 +1,22 @@
 // DragDropLoader.tsx
 import { useEffect, ChangeEvent } from "react";
-import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+import { parseModelFromFile } from "./modelLoader";
 
 interface DragDropLoaderProps {
     onModelLoaded: (model: any, filename: string) => void;
 }
 
-// Shared file handling logic
 function handleFiles(files: File[], onModelLoaded: (model: any, filename: string) => void) {
-    files.forEach((file) => {
-        if (file.name.endsWith(".glb") || file.name.endsWith(".gltf")) {
-            loadGLTFFile(file, onModelLoaded);
-        } else if (file.name.endsWith(".fbx")) {
-            loadFBXFile(file, onModelLoaded);
+    files.forEach(async (file) => {
+        const result = await parseModelFromFile(file);
+        if (result.success && result.model) {
+            onModelLoaded(result.model, file.name);
+        } else {
+            console.error("Model parse error:", result.error);
         }
     });
 }
 
-function loadGLTFFile(file: File, onModelLoaded: (model: any, filename: string) => void) {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        const arrayBuffer = event.target?.result;
-        if (arrayBuffer) {
-            const loader = new GLTFLoader();
-            const dracoLoader = new DRACOLoader();
-            dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
-            loader.setDRACOLoader(dracoLoader);
-            loader.parse(arrayBuffer as ArrayBuffer, "", (gltf) => {
-                onModelLoaded(gltf.scene, file.name);
-            }, (error) => {
-                console.error("GLTFLoader parse error", error);
-            });
-        }
-    };
-    reader.readAsArrayBuffer(file);
-}
-
-function loadFBXFile(file: File, onModelLoaded: (model: any, filename: string) => void) {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-        const arrayBuffer = event.target?.result;
-        if (arrayBuffer) {
-            const loader = new FBXLoader();
-            const model = loader.parse(arrayBuffer as ArrayBuffer, "");
-            onModelLoaded(model, file.name);
-        }
-    };
-    reader.readAsArrayBuffer(file);
-}
-
 export function DragDropLoader({ onModelLoaded }: DragDropLoaderProps) {
     useEffect(() => {
         function handleDrop(e: DragEvent) {

package/src/tools/dragdrop/modelLoader.ts

@@ -17,6 +17,42 @@ gltfLoader.setDRACOLoader(dracoLoader);
 
 const fbxLoader = new FBXLoader();
 
+/**
+ * Parse a model from a File object (e.g. from drag-drop or file picker).
+ * Returns the parsed Three.js Object3D scene.
+ */
+export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const arrayBuffer = event.target?.result as ArrayBuffer;
+            if (!arrayBuffer) {
+                resolve({ success: false, error: new Error('Failed to read file') });
+                return;
+            }
+            const name = file.name.toLowerCase();
+            if (name.endsWith('.glb') || name.endsWith('.gltf')) {
+                gltfLoader.parse(arrayBuffer, '', (gltf) => {
+                    resolve({ success: true, model: gltf.scene });
+                }, (error) => {
+                    resolve({ success: false, error });
+                });
+            } else if (name.endsWith('.fbx')) {
+                try {
+                    const model = fbxLoader.parse(arrayBuffer, '');
+                    resolve({ success: true, model });
+                } catch (error) {
+                    resolve({ success: false, error });
+                }
+            } else {
+                resolve({ success: false, error: new Error(`Unsupported file format: ${file.name}`) });
+            }
+        };
+        reader.onerror = () => resolve({ success: false, error: reader.error });
+        reader.readAsArrayBuffer(file);
+    });
+}
+
 export async function loadModel(
     filename: string,
     onProgress?: ProgressCallback