react-three-game 0.0.60 → 0.0.61

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,159 +0,0 @@
-import { ChangeEvent, useRef } from "react";
-import type { DragEvent, HTMLAttributes, MouseEvent, ReactNode } from "react";
-import type { LoadedModel, LoadedTexture } from "./modelLoader";
-import { canParseModelFile, canParseTextureFile, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
-
-export interface AssetLoadOptions {
-    onModelLoaded?: (model: LoadedModel, filename: string, file: File) => void | Promise<void>;
-    onTextureLoaded?: (texture: LoadedTexture, filename: string, file: File) => void | Promise<void>;
-    onUnhandledFile?: (file: File) => void | Promise<void>;
-    onFilesLoaded?: (files: File[]) => void | Promise<void>;
-    onLoadError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
-}
-
-type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onDragOver">;
-
-export interface DragDropLoaderProps extends AssetLoadOptions, DivProps {
-    children?: ReactNode;
-}
-
-export interface FilePickerProps extends AssetLoadOptions, DivProps {
-    accept?: string;
-    children?: ReactNode;
-    multiple?: boolean;
-}
-
-const DEFAULT_ACCEPT = ".glb,.gltf,.fbx,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg";
-
-function getFiles(fileList?: FileList | null) {
-    return fileList ? Array.from(fileList) : [];
-}
-
-export async function loadFiles(
-    files: File[],
-    { onModelLoaded, onTextureLoaded, onUnhandledFile, onFilesLoaded, onLoadError }: AssetLoadOptions,
-) {
-    await Promise.all(
-        files.map(async (file) => {
-            const shouldParseModel = canParseModelFile(file);
-            const shouldParseTexture = canParseTextureFile(file);
-
-            if (shouldParseModel) {
-                const result = await parseModelFromFile(file);
-
-                if (result.success && result.model) {
-                    await onModelLoaded?.(result.model, file.name, file);
-                    return;
-                }
-
-                if (onLoadError) {
-                    await onLoadError(result.error, file.name, file);
-                    return;
-                }
-
-                console.error("Model parse error:", result.error);
-                return;
-            }
-
-            if (shouldParseTexture) {
-                const result = await parseTextureFromFile(file);
-
-                if (result.success && result.texture) {
-                    await onTextureLoaded?.(result.texture, file.name, file);
-                    return;
-                }
-
-                if (onLoadError) {
-                    await onLoadError(result.error, file.name, file);
-                    return;
-                }
-
-                console.error("Texture parse error:", result.error);
-                return;
-            }
-
-            if (onUnhandledFile) {
-                await onUnhandledFile(file);
-            }
-        }),
-    );
-
-    await onFilesLoaded?.(files);
-}
-
-function reportFileLoadError(error: unknown) {
-    console.error("File load error:", error);
-}
-
-function createLoadHandlers(options: AssetLoadOptions) {
-    return {
-        onFilesLoaded: options.onFilesLoaded,
-        onModelLoaded: options.onModelLoaded,
-        onTextureLoaded: options.onTextureLoaded,
-        onUnhandledFile: options.onUnhandledFile,
-        onLoadError: options.onLoadError,
-    } satisfies AssetLoadOptions;
-}
-
-export function DragDropLoader({
-    children,
-    ...divProps
-}: DragDropLoaderProps) {
-    const loadOptions = createLoadHandlers(divProps);
-
-    function handleDrop(event: DragEvent<HTMLDivElement>) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        void loadFiles(getFiles(event.dataTransfer?.files), loadOptions).catch(reportFileLoadError);
-    }
-
-    function handleDragOver(event: DragEvent<HTMLDivElement>) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-
-    return (
-        <div {...divProps} onDrop={handleDrop} onDragOver={handleDragOver}>
-            {children}
-        </div>
-    );
-}
-
-export function FilePicker({
-    accept = DEFAULT_ACCEPT,
-    children,
-    multiple = true,
-    ...divProps
-}: FilePickerProps) {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const { onClick, ...wrapperProps } = divProps;
-    const loadOptions = createLoadHandlers(divProps);
-
-    function onChange(event: ChangeEvent<HTMLInputElement>) {
-        void loadFiles(getFiles(event.target.files), loadOptions).catch(reportFileLoadError);
-        event.target.value = "";
-    }
-
-    function handleClick(event: MouseEvent<HTMLDivElement>) {
-        onClick?.(event);
-
-        if (!event.defaultPrevented) {
-            inputRef.current?.click();
-        }
-    }
-
-    return (
-        <div {...wrapperProps} onClick={handleClick}>
-            <input
-                ref={inputRef}
-                type="file"
-                accept={accept}
-                multiple={multiple}
-                onChange={onChange}
-                hidden
-            />
-            {children ?? "Select Files"}
-        </div>
-    );
-}

package/src/tools/dragdrop/index.ts

@@ -1,4 +0,0 @@
-export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
-export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
-export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
-export type { LoadedModel, LoadedTexture, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";

package/src/tools/dragdrop/modelLoader.ts

@@ -1,204 +0,0 @@
-import type { Object3D, Texture } from "three";
-import { SRGBColorSpace, TextureLoader } from "three";
-import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
-
-export type LoadedModel = Object3D;
-export type LoadedTexture = Texture;
-
-export type ModelLoadResult = {
-    success: boolean;
-    model?: LoadedModel;
-    error?: unknown;
-};
-
-export type TextureLoadResult = {
-    success: boolean;
-    texture?: LoadedTexture;
-    error?: unknown;
-};
-
-export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
-
-const dracoLoader = new DRACOLoader();
-dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
-
-const gltfLoader = new GLTFLoader();
-gltfLoader.setDRACOLoader(dracoLoader);
-
-const fbxLoader = new FBXLoader();
-const textureLoader = new TextureLoader();
-
-type ModelFileKind = "gltf" | "fbx";
-const TEXTURE_FILE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp", ".svg"] as const;
-
-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;
-}
-
-export function canParseTextureFile(file: File | string) {
-    const filename = typeof file === "string" ? file : file.name;
-    const normalizedName = normalizeModelPath(filename);
-
-    return TEXTURE_FILE_EXTENSIONS.some(extension => normalizedName.endsWith(extension));
-}
-
-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 => {
-        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;
-            }
-
-            void parseModelBuffer(arrayBuffer, file.name).then(resolve);
-        };
-
-        reader.onerror = () => resolve({ success: false, error: reader.error });
-        reader.readAsArrayBuffer(file);
-    });
-}
-
-export function parseTextureFromFile(file: File): Promise<TextureLoadResult> {
-    return new Promise(resolve => {
-        const url = URL.createObjectURL(file);
-
-        textureLoader.load(
-            url,
-            texture => {
-                texture.colorSpace = SRGBColorSpace;
-                resolve({ success: true, texture });
-                URL.revokeObjectURL(url);
-            },
-            undefined,
-            error => {
-                resolve({ success: false, error });
-                URL.revokeObjectURL(url);
-            },
-        );
-    });
-}
-
-export async function loadModel(
-    filename: string,
-    onProgress?: ProgressCallback,
-): Promise<ModelLoadResult> {
-    try {
-        const fullPath = filename;
-        const modelFileKind = getModelFileKind(filename);
-
-        if (modelFileKind === "gltf") {
-            return new Promise(resolve => {
-                gltfLoader.load(
-                    fullPath,
-                    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 }),
-                );
-            });
-        }
-
-        if (modelFileKind === "fbx") {
-            return new Promise(resolve => {
-                fbxLoader.load(
-                    fullPath,
-                    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 }),
-                );
-            });
-        }
-
-        return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
-    } catch (error) {
-        return { success: false, error };
-    }
-}
-
-export async function loadTexture(filename: string): Promise<TextureLoadResult> {
-    try {
-        if (!canParseTextureFile(filename)) {
-            return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
-        }
-
-        return await new Promise(resolve => {
-            textureLoader.load(
-                filename,
-                texture => {
-                    texture.colorSpace = SRGBColorSpace;
-                    resolve({ success: true, texture });
-                },
-                undefined,
-                error => resolve({ success: false, error }),
-            );
-        });
-    } catch (error) {
-        return { success: false, error };
-    }
-}

package/src/tools/dragdrop/page.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { Physics, RigidBody } from "@react-three/rapier";
-import { OrbitControls } from "@react-three/drei";
-import { useState } from "react";
-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])}
-            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>
-                        <RigidBody>
-                            <mesh castShadow>
-                                <boxGeometry args={[1, 1, 1]} />
-                                <meshStandardMaterial color="orange" />
-                            </mesh>
-                        </RigidBody>
-                        <RigidBody type="fixed">
-                            <mesh position={[0, -2, 0]} scale={[10, 0.1, 10]} receiveShadow>
-                                <boxGeometry />
-                                <meshStandardMaterial color="gray" />
-                            </mesh>
-                        </RigidBody>
-                        {/* Render loaded models */}
-                        {models.map((model, idx) => (
-                            <primitive object={model} key={idx} position={[0, 0, 0]} />
-                        ))}
-                        <ambientLight intensity={0.5} />
-                        <pointLight position={[10, 10, 10]} castShadow intensity={1000} />
-                        <OrbitControls />
-                    </Physics>
-                </GameCanvas>
-            </div>
-        </DragDropLoader>
-    );
-}

package/src/tools/prefabeditor/Dropdown.tsx

@@ -1,112 +0,0 @@
-import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-type Placement = 'bottom-start' | 'bottom-end' | 'left-start' | 'right-start';
-
-export function Dropdown({
-    trigger,
-    children,
-    placement = 'bottom-end',
-    offset = 6,
-    zIndex = 1000,
-}: {
-    trigger: (props: { ref: React.RefObject<HTMLButtonElement | null>; isOpen: boolean; toggle: () => void; close: () => void; }) => ReactNode;
-    children: ReactNode | ((close: () => void) => ReactNode);
-    placement?: Placement;
-    offset?: number;
-    zIndex?: number;
-}) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
-    const triggerRef = useRef<HTMLButtonElement>(null);
-    const panelRef = useRef<HTMLDivElement>(null);
-
-    const close = () => setIsOpen(false);
-    const toggle = () => setIsOpen(prev => !prev);
-
-    useLayoutEffect(() => {
-        if (!isOpen || !triggerRef.current || !panelRef.current || typeof window === 'undefined') return;
-
-        const updatePosition = () => {
-            const triggerRect = triggerRef.current?.getBoundingClientRect();
-            const panelRect = panelRef.current?.getBoundingClientRect();
-            if (!triggerRect || !panelRect) return;
-
-            let left = triggerRect.left;
-            let top = triggerRect.bottom + offset;
-
-            if (placement === 'bottom-end') {
-                left = triggerRect.right - panelRect.width;
-                top = triggerRect.bottom + offset;
-            } else if (placement === 'bottom-start') {
-                left = triggerRect.left;
-                top = triggerRect.bottom + offset;
-            } else if (placement === 'left-start') {
-                left = triggerRect.left - panelRect.width - offset;
-                top = triggerRect.top;
-            } else if (placement === 'right-start') {
-                left = triggerRect.right + offset;
-                top = triggerRect.top;
-            }
-
-            left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8));
-            top = Math.max(8, Math.min(top, window.innerHeight - panelRect.height - 8));
-
-            setPosition({ left, top });
-        };
-
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        window.addEventListener('scroll', updatePosition, true);
-
-        return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
-        };
-    }, [isOpen, placement, offset]);
-
-    useEffect(() => {
-        if (!isOpen) return;
-
-        const handlePointerDown = (event: PointerEvent) => {
-            const target = event.target as Node | null;
-            if (!target) return;
-            if (triggerRef.current?.contains(target)) return;
-            if (panelRef.current?.contains(target)) return;
-            close();
-        };
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === 'Escape') close();
-        };
-
-        document.addEventListener('pointerdown', handlePointerDown);
-        document.addEventListener('keydown', handleKeyDown);
-
-        return () => {
-            document.removeEventListener('pointerdown', handlePointerDown);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isOpen]);
-
-    return (
-        <>
-            {trigger({ ref: triggerRef, isOpen, toggle, close })}
-            {isOpen && typeof document !== 'undefined' && createPortal(
-                <div
-                    ref={panelRef}
-                    onMouseLeave={close}
-                    style={{
-                        position: 'fixed',
-                        left: position?.left ?? -9999,
-                        top: position?.top ?? -9999,
-                        zIndex,
-                    }}
-                >
-                    {typeof children === 'function' ? children(close) : children}
-                </div>,
-                document.body
-            )}
-        </>
-    );
-}

package/src/tools/prefabeditor/EditorContext.tsx

@@ -1,25 +0,0 @@
-import { createContext, useContext } from "react";
-
-interface EditorContextType {
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
-    snapResolution: number;
-    setSnapResolution: (resolution: number) => void;
-    positionSnap: number;
-    setPositionSnap: (resolution: number) => void;
-    rotationSnap: number;
-    setRotationSnap: (resolution: number) => void;
-    onFocusNode?: (nodeId: string) => void;
-    onScreenshot?: () => void;
-    onExportGLB?: () => void;
-}
-
-export const EditorContext = createContext<EditorContextType | null>(null);
-
-export function useEditorContext() {
-    const context = useContext(EditorContext);
-    if (!context) {
-        throw new Error("useEditorContext must be used within EditorContext.Provider");
-    }
-    return context;
-}