react-three-game 0.0.57 → 0.0.59

package/src/tools/dragdrop/modelLoader.ts

@@ -1,14 +1,16 @@
-import { GLTFLoader, FBXLoader, DRACOLoader } from "three/examples/jsm/Addons.js";
+import type { Object3D } from "three";
+import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+
+export type LoadedModel = Object3D;
 
 export type ModelLoadResult = {
     success: boolean;
-    model?: any;
-    error?: any;
+    model?: LoadedModel;
+    error?: unknown;
 };
 
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
 
-// Singleton loader instances
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 
@@ -17,37 +19,76 @@ 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.
- */
+type ModelFileKind = "gltf" | "fbx";
+
+function normalizeModelPath(name: string) {
+    return name.split(/[?#]/, 1)[0].toLowerCase();
+}
+
+function getModelFileKind(name: string): ModelFileKind | null {
+    const normalizedName = normalizeModelPath(name);
+
+    if (normalizedName.endsWith(".glb") || normalizedName.endsWith(".gltf")) {
+        return "gltf";
+    }
+
+    if (normalizedName.endsWith(".fbx")) {
+        return "fbx";
+    }
+
+    return null;
+}
+
+export function canParseModelFile(file: File | string) {
+    const filename = typeof file === "string" ? file : file.name;
+    return getModelFileKind(filename) !== null;
+}
+
+function parseModelBuffer(arrayBuffer: ArrayBuffer, sourceName: string): Promise<ModelLoadResult> {
+    const modelFileKind = getModelFileKind(sourceName);
+
+    if (modelFileKind === "gltf") {
+        return new Promise(resolve => {
+            gltfLoader.parse(
+                arrayBuffer,
+                "",
+                gltf => {
+                    resolve({ success: true, model: gltf.scene });
+                },
+                error => {
+                    resolve({ success: false, error });
+                },
+            );
+        });
+    }
+
+    if (modelFileKind === "fbx") {
+        try {
+            const model = fbxLoader.parse(arrayBuffer, "");
+            return Promise.resolve({ success: true, model });
+        } catch (error) {
+            return Promise.resolve({ success: false, error });
+        }
+    }
+
+    return Promise.resolve({ success: false, error: new Error(`Unsupported file format: ${sourceName}`) });
+}
+
 export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
         const reader = new FileReader();
-        reader.onload = (event) => {
+
+        reader.onload = event => {
             const arrayBuffer = event.target?.result as ArrayBuffer;
+
             if (!arrayBuffer) {
-                resolve({ success: false, error: new Error('Failed to read file') });
+                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}`) });
-            }
+
+            void parseModelBuffer(arrayBuffer, file.name).then(resolve);
         };
+
         reader.onerror = () => resolve({ success: false, error: reader.error });
         reader.readAsArrayBuffer(file);
     });
@@ -55,45 +96,49 @@ export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
 
 export async function loadModel(
     filename: string,
-    onProgress?: ProgressCallback
+    onProgress?: ProgressCallback,
 ): Promise<ModelLoadResult> {
     try {
-        // Use filename directly (should already include leading /)
         const fullPath = filename;
+        const modelFileKind = getModelFileKind(filename);
 
-        if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
-            return new Promise((resolve) => {
+        if (modelFileKind === "gltf") {
+            return new Promise(resolve => {
                 gltfLoader.load(
                     fullPath,
-                    (gltf) => resolve({ success: true, model: gltf.scene }),
-                    (progressEvent) => {
-                        if (onProgress) {
-                            // Use loaded as total if total is not available
-                            const total = progressEvent.total || progressEvent.loaded;
-                            onProgress(filename, progressEvent.loaded, total);
+                    gltf => resolve({ success: true, model: gltf.scene }),
+                    progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
+
+                        const total = progressEvent.total || progressEvent.loaded;
+                        onProgress(filename, progressEvent.loaded, total);
                     },
-                    (error) => resolve({ success: false, error })
+                    error => resolve({ success: false, error }),
                 );
             });
-        } else if (filename.endsWith('.fbx')) {
-            return new Promise((resolve) => {
+        }
+
+        if (modelFileKind === "fbx") {
+            return new Promise(resolve => {
                 fbxLoader.load(
                     fullPath,
-                    (model) => resolve({ success: true, model }),
-                    (progressEvent) => {
-                        if (onProgress) {
-                            // Use loaded as total if total is not available
-                            const total = progressEvent.total || progressEvent.loaded;
-                            onProgress(filename, progressEvent.loaded, total);
+                    model => resolve({ success: true, model }),
+                    progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
+
+                        const total = progressEvent.total || progressEvent.loaded;
+                        onProgress(filename, progressEvent.loaded, total);
                     },
-                    (error) => resolve({ success: false, error })
+                    error => resolve({ success: false, error }),
                 );
             });
-        } else {
-            return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
         }
+
+        return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
     } catch (error) {
         return { success: false, error };
     }

package/src/tools/dragdrop/page.tsx

@@ -3,15 +3,18 @@
 import { Physics, RigidBody } from "@react-three/rapier";
 import { OrbitControls } from "@react-three/drei";
 import { useState } from "react";
-import { DragDropLoader } from "./DragDropLoader";
+import { DragDropLoader } from "./index";
 import GameCanvas from "../../shared/GameCanvas";
 
 export default function Home() {
     const [models, setModels] = useState<any[]>([]);
 
     return (
-        <>
-            <DragDropLoader onModelLoaded={model => setModels(prev => [...prev, model])} />
+        <DragDropLoader
+            onModelLoaded={model => setModels(prev => [...prev, model])}
+            className="w-full items-center justify-items-center min-h-screen"
+            style={{ height: "100vh" }}
+        >
             <div className="w-full items-center justify-items-center min-h-screen" style={{ height: "100vh" }}>
                 <GameCanvas>
                     <Physics>
@@ -37,6 +40,6 @@ export default function Home() {
                     </Physics>
                 </GameCanvas>
             </div>
-        </>
+        </DragDropLoader>
     );
 }

package/src/tools/prefabeditor/EditorTree.tsx

@@ -1,10 +1,11 @@
 import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
-import { base, colors, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { base, colors, tree } from './styles';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
 import { useEditorContext } from './EditorContext';
 import { Dropdown } from './Dropdown';
+import { FileMenu, MenuTriggerButton, TreeContextMenu, TreeContextMenuState, TreeNodeMenu } from './EditorTreeMenus';
 
 type DropPosition = 'before' | 'inside';
 
@@ -100,6 +101,7 @@ export default function EditorTree({
     const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
     const [collapsed, setCollapsed] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
+    const [contextMenu, setContextMenu] = useState<TreeContextMenuState>(null);
 
     if (!prefabData || !setPrefabData) return null;
 
@@ -165,6 +167,30 @@ export default function EditorTree({
         }));
     };
 
+    const closeContextMenu = () => setContextMenu(null);
+
+    const openContextMenu = (nodeId: string, x: number, y: number) => {
+        setSelectedId(nodeId);
+        setContextMenu({ nodeId, x, y });
+    };
+
+    const handleFocus = (nodeId: string) => {
+        setSelectedId(nodeId);
+        onFocusNode?.(nodeId);
+    };
+
+    const renderTreeNodeMenu = (nodeId: string, isRoot: boolean, onClose: () => void) => (
+        <TreeNodeMenu
+            isRoot={isRoot}
+            nodeId={nodeId}
+            onAddChild={handleAddChild}
+            onFocus={handleFocus}
+            onDuplicate={isRoot ? undefined : handleDuplicate}
+            onDelete={isRoot ? undefined : handleDelete}
+            onClose={onClose}
+        />
+    );
+
     const handleDragStart = (e: React.DragEvent, id: string) => {
         if (id === prefabData.root.id) return e.preventDefault();
         e.dataTransfer.effectAllowed = "move";
@@ -240,6 +266,11 @@ export default function EditorTree({
                     }}
                     draggable={!isRoot}
                     onClick={(e) => { e.stopPropagation(); setSelectedId(node.id); }}
+                    onContextMenu={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        openContextMenu(node.id, e.clientX, e.clientY);
+                    }}
                     onDragStart={(e) => handleDragStart(e, node.id)}
                     onDragEnd={() => { setDraggedId(null); setDropTarget(null); }}
                     onDragOver={(e) => handleDragOver(e, node.id, isRoot)}
@@ -269,8 +300,10 @@ export default function EditorTree({
                             <Dropdown
                                 placement="bottom-end"
                                 trigger={({ ref, toggle }) => (
-                                    <button
-                                        ref={ref}
+                                    <MenuTriggerButton
+                                        buttonRef={ref}
+                                        onToggle={toggle}
+                                        title="Node Actions"
                                         style={{
                                             background: 'none',
                                             border: 'none',
@@ -280,32 +313,12 @@ export default function EditorTree({
                                             opacity: 0.7,
                                             color: 'inherit',
                                         }}
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            toggle();
-                                        }}
-                                        title="Node Actions"
                                     >
                                         ⋯
-                                    </button>
+                                    </MenuTriggerButton>
                                 )}
                             >
-                                {(close) => (
-                                    <div style={{ ...menu.container, position: 'static' }} onClick={(e) => e.stopPropagation()}>
-                                        <button style={menu.item} onClick={() => { handleAddChild(node.id); close(); }}>
-                                            Add Child
-                                        </button>
-                                        <button style={menu.item} onClick={() => { setSelectedId(node.id); onFocusNode?.(node.id); close(); }}>
-                                            Focus Camera
-                                        </button>
-                                        <button style={menu.item} onClick={() => { handleDuplicate(node.id); close(); }}>
-                                            Duplicate
-                                        </button>
-                                        <button style={{ ...menu.item, ...menu.danger }} onClick={() => { handleDelete(node.id); close(); }}>
-                                            Delete
-                                        </button>
-                                    </div>
-                                )}
+                                {(close) => renderTreeNodeMenu(node.id, false, close)}
                             </Dropdown>
                             <button
                                 style={{
@@ -331,8 +344,10 @@ export default function EditorTree({
                         <Dropdown
                             placement="bottom-end"
                             trigger={({ ref, toggle }) => (
-                                <button
-                                    ref={ref}
+                                <MenuTriggerButton
+                                    buttonRef={ref}
+                                    onToggle={toggle}
+                                    title="Scene Actions"
                                     style={{
                                         background: 'none',
                                         border: 'none',
@@ -342,26 +357,12 @@ export default function EditorTree({
                                         opacity: 0.7,
                                         color: 'inherit',
                                     }}
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        toggle();
-                                    }}
-                                    title="Scene Actions"
                                 >
                                     ⋯
-                                </button>
+                                </MenuTriggerButton>
                             )}
                         >
-                            {(close) => (
-                                <div style={{ ...menu.container, position: 'static' }} onClick={(e) => e.stopPropagation()}>
-                                    <button style={menu.item} onClick={() => { handleAddChild(node.id); close(); }}>
-                                        Add Child
-                                    </button>
-                                    <button style={menu.item} onClick={() => { setSelectedId(node.id); onFocusNode?.(node.id); close(); }}>
-                                        Focus Camera
-                                    </button>
-                                </div>
-                            )}
+                            {(close) => renderTreeNodeMenu(node.id, true, close)}
                         </Dropdown>
                     )}
                 </div>
@@ -399,14 +400,14 @@ export default function EditorTree({
                             <Dropdown
                                 placement="bottom-end"
                                 trigger={({ ref, toggle }) => (
-                                    <button
-                                        ref={ref}
+                                    <MenuTriggerButton
+                                        buttonRef={ref}
+                                        onToggle={toggle}
+                                        title="Menu"
                                         style={{ ...base.btn, padding: '2px 6px', fontSize: 10 }}
-                                        onClick={(e) => { e.stopPropagation(); toggle(); }}
-                                        title="File"
                                     >
                                         ⋮
-                                    </button>
+                                    </MenuTriggerButton>
                                 )}
                             >
                                 {(close) => (
@@ -439,83 +440,13 @@ export default function EditorTree({
                     </>
                 )}
             </div>
+            <TreeContextMenu
+                contextMenu={contextMenu}
+                onClose={closeContextMenu}
+            >
+                {(nodeId, close) => renderTreeNodeMenu(nodeId, nodeId === prefabData.root.id, close)}
+            </TreeContextMenu>
 
         </>
     );
 }
-
-function FileMenu({
-    prefabData,
-    setPrefabData,
-    onClose
-}: {
-    prefabData: Prefab;
-    setPrefabData: Dispatch<SetStateAction<Prefab>>;
-    onClose: () => void;
-}) {
-    const { onScreenshot, onExportGLB } = useEditorContext();
-
-    const handleLoad = async () => {
-        const loadedPrefab = await loadJson();
-        if (!loadedPrefab) return;
-        setPrefabData(loadedPrefab);
-        onClose();
-    };
-
-    const handleSave = () => {
-        saveJson(prefabData, "prefab");
-        onClose();
-    };
-
-    const handleLoadIntoScene = async () => {
-        const loadedPrefab = await loadJson();
-        if (!loadedPrefab) return;
-
-        setPrefabData(prev => ({
-            ...prev,
-            root: updateNodeById(prev.root, prev.root.id, root => ({
-                ...root,
-                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
-            }))
-        }));
-        onClose();
-    };
-
-    return (
-        <div
-            style={{ ...menu.container, position: 'static' }}
-            onClick={(e) => e.stopPropagation()}
-        >
-            <button
-                style={menu.item}
-                onClick={handleLoad}
-            >
-                📥 Load Prefab JSON
-            </button>
-            <button
-                style={menu.item}
-                onClick={handleSave}
-            >
-                💾 Save Prefab JSON
-            </button>
-            <button
-                style={menu.item}
-                onClick={handleLoadIntoScene}
-            >
-                📂 Load into Scene
-            </button>
-            <button
-                style={menu.item}
-                onClick={() => { onScreenshot?.(); onClose(); }}
-            >
-                📸 Screenshot
-            </button>
-            <button
-                style={menu.item}
-                onClick={() => { onExportGLB?.(); onClose(); }}
-            >
-                📦 Export GLB
-            </button>
-        </div>
-    );
-}