react-three-game 0.0.6 → 0.0.8

package/README.md

@@ -10,6 +10,8 @@ npm i react-three-game @react-three/fiber three
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-19-blue.svg)](https://react.dev/)
 
+![Prefab Editor](assets/editor.gif)
+
 ## Core Principle
 
 Scenes are JSON prefabs. Components are registered modules. Hierarchy is declarative.

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -167,12 +167,14 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     }
     // --- 3. Core content decided by component registry ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
-    // --- 4. Wrap with physics if needed ---
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
     // --- 5. Render children (always relative transforms) ---
     const children = ((_d = gameObject.children) !== null && _d !== void 0 ? _d : []).map((child) => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: worldMatrix }, child.id)));
+    // --- 4. Wrap with physics if needed ---
+    // Combine core and children so they both get wrapped by physics (if present)
+    const content = (_jsxs(_Fragment, { children: [core, children] }));
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, content, ctx);
     // --- 6. Final group wrapper ---
-    return (_jsxs("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: [physicsWrapped, children] }));
+    return (_jsx("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: physicsWrapped }));
 }
 // Helper: render an instanced GameInstance (terminal node)
 function renderInstancedNode(gameObject, worldMatrix, ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,7 +13,7 @@
   },
   "keywords": [],
   "author": "prnth",
-  "license": "ISC",
+  "license": "VPL",
   "type": "module",
   "peerDependencies": {
     "@react-three/fiber": "^9.0.0",

package/src/index.ts

@@ -0,0 +1,15 @@
+// Components
+export { default as GameCanvas } from './shared/GameCanvas';
+export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export {
+  default as AssetViewerPage,
+  TextureListViewer,
+  ModelListViewer,
+  SoundListViewer,
+  SharedCanvas,
+} from './tools/assetviewer/page';
+
+// Types
+export type { Prefab, GameObject } from './tools/prefabeditor/types';

package/src/shared/GameCanvas.tsx

@@ -0,0 +1,48 @@
+import { Canvas, extend } from "@react-three/fiber";
+import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
+import { Suspense, useState } from "react";
+import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.Nodes.js";
+import { Loader } from "@react-three/drei";
+
+// generic version
+// extend(THREE as any)
+
+extend({
+    MeshBasicNodeMaterial: MeshBasicNodeMaterial,
+    MeshStandardNodeMaterial: MeshStandardNodeMaterial,
+    SpriteNodeMaterial: SpriteNodeMaterial,
+});
+
+
+export default function GameCanvas({ loader = false, children, ...props }: { loader?: boolean, children: React.ReactNode, props?: WebGPURendererParameters }) {
+    const [frameloop, setFrameloop] = useState<"never" | "always">("never");
+    const [loading, setLoading] = useState(true);
+
+    return <>
+        <Canvas
+            shadows={{ type: PCFShadowMap, }}
+            frameloop={frameloop}
+            gl={async ({ canvas }) => {
+                const renderer = new WebGPURenderer({
+                    canvas: canvas as HTMLCanvasElement,
+                    // @ts-expect-error futuristic
+                    shadowMap: true,
+                    antialias: true,
+                    ...props,
+                });
+                await renderer.init().then(() => {
+                    setFrameloop("always");
+                });
+                return renderer
+            }}
+            camera={{
+                position: [0, 1, 5],
+            }}
+        >
+            <Suspense>
+                {children}
+            </Suspense>
+        </Canvas>
+        {loader ? <Loader /> : null}
+    </>;
+}

package/src/tools/assetviewer/page.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls, useGLTF, useFBX, Stage, View, PerspectiveCamera } from "@react-three/drei";
+import { Suspense, useEffect, useState, useRef } from "react";
+import * as React from "react";
+import { TextureLoader } from "three";
+
+// view models and textures in manifest, onselect callback
+
+function getItemsInPath(files: string[], currentPath: string) {
+    // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
+    const filesWithoutCategory = files.map(file => {
+        const parts = file.split('/').filter(Boolean);
+        return parts.length > 1 ? '/' + parts.slice(1).join('/') : '';
+    }).filter(Boolean);
+
+    const prefix = currentPath ? `/${currentPath}/` : '/';
+    const relevantFiles = filesWithoutCategory.filter(file => file.startsWith(prefix));
+
+    const folders = new Set<string>();
+    const filesInCurrentPath: string[] = [];
+
+    relevantFiles.forEach((file, index) => {
+        const relativePath = file.slice(prefix.length);
+        const parts = relativePath.split('/').filter(Boolean);
+
+        if (parts.length > 1) {
+            folders.add(parts[0]);
+        } else if (parts[0]) {
+            // Return the original file path
+            filesInCurrentPath.push(files[filesWithoutCategory.indexOf(file)]);
+        }
+    });
+
+    return { folders: Array.from(folders), filesInCurrentPath };
+}
+
+function FolderTile({ name, onClick }: { name: string; onClick: () => void }) {
+    return (
+        <div
+            onClick={onClick}
+            className="aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col items-center justify-center"
+        >
+            <div className="text-3xl">📁</div>
+            <div className="text-xs text-center truncate w-full px-1 mt-1">{name}</div>
+        </div>
+    );
+}
+
+function useInView() {
+    const [isInView, setIsInView] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                setIsInView(entry.isIntersecting);
+            },
+            { rootMargin: '100px' }
+        );
+
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, []);
+
+    return { ref, isInView };
+}
+
+export default function AssetViewerPage({ basePath = "" }: { basePath?: string } = {}) {
+    const [textures, setTextures] = useState<string[]>([]);
+    const [models, setModels] = useState<string[]>([]);
+    const [sounds, setSounds] = useState<string[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const base = basePath ? `${basePath}/` : '';
+        Promise.all([
+            fetch(`/${base}textures/manifest.json`).then(r => r.json()),
+            fetch(`/${base}models/manifest.json`).then(r => r.json()),
+            fetch(`/${base}sound/manifest.json`).then(r => r.json()).catch(() => [])
+        ]).then(([textureData, modelData, soundData]) => {
+            setTextures(textureData);
+            setModels(modelData);
+            setSounds(soundData);
+            setLoading(false);
+        });
+    }, [basePath]);
+
+    if (loading) {
+        return <div className="p-4 text-gray-300">Loading manifests...</div>;
+    }
+
+    return (
+        <>
+            <div className="p-2 text-gray-300 overflow-y-auto h-screen text-sm">
+                <h1 className="text-lg mb-2 font-bold">Asset Viewer</h1>
+
+                <h2 className="text-sm mt-4 mb-1 font-semibold">Textures ({textures.length})</h2>
+                <TextureListViewer files={textures} basePath={basePath} onSelect={(file) => console.log('Selected texture:', file)} />
+
+                <h2 className="text-sm mt-4 mb-1 font-semibold">Models ({models.length})</h2>
+                <ModelListViewer files={models} basePath={basePath} onSelect={(file) => console.log('Selected model:', file)} />
+
+                {sounds.length > 0 && (
+                    <>
+                        <h2 className="text-sm mt-4 mb-1 font-semibold">Sounds ({sounds.length})</h2>
+                        <SoundListViewer files={sounds} basePath={basePath} onSelect={(file) => console.log('Selected sound:', file)} />
+                    </>
+                )}
+            </div>
+            <SharedCanvas />
+        </>
+    );
+}
+
+interface AssetListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    renderCard: (file: string, onSelect: (file: string) => void) => React.ReactNode;
+}
+
+function AssetListViewer({ files, selected, onSelect, renderCard }: AssetListViewerProps) {
+    const [currentPath, setCurrentPath] = useState('');
+    const [showPicker, setShowPicker] = useState(false);
+    const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
+
+    const showCompactView = selected && !showPicker;
+
+    if (showCompactView) {
+        return (
+            <div className="flex gap-1 items-center">
+                {renderCard(selected, onSelect)}
+                <button
+                    onClick={() => setShowPicker(true)}
+                    className="px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs"
+                >
+                    Change
+                </button>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {currentPath && (
+                <button
+                    onClick={() => {
+                        const pathParts = currentPath.split('/').filter(Boolean);
+                        pathParts.pop();
+                        setCurrentPath(pathParts.join('/'));
+                    }}
+                    className="mb-1 px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs"
+                >
+                    ← Back
+                </button>
+            )}
+            <div className="grid grid-cols-3 gap-1">
+                {folders.map((folder) => (
+                    <FolderTile
+                        key={folder}
+                        name={folder}
+                        onClick={() => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder)}
+                    />
+                ))}
+                {filesInCurrentPath.map((file) => (
+                    <div key={file}>
+                        {renderCard(file, (f) => {
+                            onSelect(f);
+                            if (selected) setShowPicker(false);
+                        })}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+interface TextureListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    basePath?: string;
+}
+
+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} />
+                )}
+            />
+            <SharedCanvas />
+        </>
+    );
+}
+
+function TextureCard({ file, onSelect, basePath = "" }: { file: string; onSelect: (file: string) => void; basePath?: string }) {
+    const [error, setError] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+
+    if (error) {
+        return (
+            <div
+                ref={ref}
+                className="aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center"
+                onClick={() => onSelect(file)}
+            >
+                <div className="text-red-400 text-xs">✗</div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            ref={ref}
+            className="aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col"
+            onClick={() => onSelect(file)}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            <div className="flex-1 relative">
+                {isInView ? (
+                    <View className="w-full h-full">
+                        <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>
+                    </View>
+                ) : null}
+            </div>
+            <div className="bg-black/60 text-[10px] px-1 truncate text-center">
+                {file.split('/').pop()}
+            </div>
+        </div>
+    );
+}
+
+function TextureSphere({ url, onError }: { url: string; onError?: () => void }) {
+    const texture = useLoader(TextureLoader, url, undefined, (error) => {
+        console.error('Failed to load texture:', url, error);
+        onError?.();
+    });
+    return (
+        <mesh position={[0, 0, 0]}>
+            <sphereGeometry args={[1, 32, 32]} />
+            <meshStandardMaterial map={texture} />
+        </mesh>
+    );
+}
+
+interface ModelListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    basePath?: string;
+}
+
+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} />
+                )}
+            />
+            <SharedCanvas />
+        </>
+    );
+}
+
+function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect: (file: string) => void; basePath?: string }) {
+    const [error, setError] = useState(false);
+    const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+
+    if (error) {
+        return (
+            <div
+                ref={ref}
+                className="aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center"
+                onClick={() => onSelect(file)}
+            >
+                <div className="text-red-400 text-xs">✗</div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            ref={ref}
+            className="aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col"
+            onClick={() => onSelect(file)}
+        >
+            <div className="flex-1 relative">
+                {isInView ? (
+                    <View className="w-full h-full">
+                        <PerspectiveCamera makeDefault position={[0, 1, 3]} fov={50} />
+                        <Suspense fallback={null}>
+                            <Stage intensity={0.5} environment="city">
+                                <ModelPreview url={fullPath} onError={() => setError(true)} />
+                            </Stage>
+                            <OrbitControls enableZoom={false} />
+                        </Suspense>
+                    </View>
+                ) : null}
+            </div>
+            <div className="bg-black/60 text-[10px] px-1 truncate text-center">
+                {file.split('/').pop()}
+            </div>
+        </div>
+    );
+}
+
+function ModelPreview({ url, onError }: { url: string; onError?: () => void }) {
+    const isFbx = url.toLowerCase().endsWith('.fbx');
+    if (isFbx) return <FBXModel url={url} onError={onError} />;
+    return <GLTFModel url={url} onError={onError} />;
+}
+
+function GLTFModel({ url, onError }: { url: string; onError?: () => void }) {
+    const { scene } = useGLTF(url);
+    return <primitive object={scene} />;
+}
+
+function FBXModel({ url, onError }: { url: string; onError?: () => void }) {
+    const fbx = useFBX(url);
+    return <primitive object={fbx} scale={0.01} />;
+}
+
+interface SoundListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    basePath?: string;
+}
+
+export function SoundListViewer({ files, selected, onSelect, basePath = "" }: SoundListViewerProps) {
+    return (
+        <AssetListViewer
+            files={files}
+            selected={selected}
+            onSelect={onSelect}
+            renderCard={(file, onSelectHandler) => (
+                <SoundCard file={file} basePath={basePath} onSelect={onSelectHandler} />
+            )}
+        />
+    );
+}
+
+function SoundCard({ file, onSelect, basePath = "" }: { file: string; onSelect: (file: string) => void; basePath?: string }) {
+    const fileName = file.split('/').pop() || '';
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+    return (
+        <div
+            onClick={() => onSelect(file)}
+            className="aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex flex-col items-center justify-center"
+        >
+            <div className="text-2xl">🔊</div>
+            <div className="text-[10px] px-1 mt-1 truncate text-center w-full">{fileName}</div>
+        </div>
+    );
+}
+
+// Shared Canvas Component - can be used independently in any viewer
+export function SharedCanvas() {
+    return (
+        <Canvas
+            shadows
+            dpr={[1, 1.5]}
+            camera={{ position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }}
+            style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                width: '100vw',
+                height: '100vh',
+                pointerEvents: 'none',
+            }}
+            eventSource={typeof document !== 'undefined' ? document.getElementById('root') || undefined : undefined}
+            eventPrefix="client"
+        >
+            <View.Port />
+        </Canvas>
+    );
+}

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -0,0 +1,105 @@
+// DragDropLoader.tsx
+import { useEffect, ChangeEvent } from "react";
+import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+
+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);
+        }
+    });
+}
+
+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) {
+            e.preventDefault();
+            e.stopPropagation();
+            const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+            handleFiles(files, onModelLoaded);
+        }
+        function handleDragOver(e: DragEvent) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        window.addEventListener("drop", handleDrop);
+        window.addEventListener("dragover", handleDragOver);
+        return () => {
+            window.removeEventListener("drop", handleDrop);
+            window.removeEventListener("dragover", handleDragOver);
+        };
+    }, [onModelLoaded]);
+    return null;
+}
+
+// FilePicker component
+interface FilePickerProps {
+    onModelLoaded: (model: any, filename: string) => void;
+}
+
+export function FilePicker({ onModelLoaded }: FilePickerProps) {
+    function onChange(e: ChangeEvent<HTMLInputElement>) {
+        const files = e.target.files ? Array.from(e.target.files) : [];
+        handleFiles(files, onModelLoaded);
+    }
+    // Ref for the hidden input
+    const inputId = "file-picker-input";
+    return (
+        <>
+            <input
+                id={inputId}
+                type="file"
+                accept=".glb,.gltf,.fbx"
+                multiple
+                onChange={onChange}
+                className="hidden"
+            />
+            <button
+                className="px-3 py-1 bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/40 hover:border-blue-400/60 text-blue-200 hover:text-blue-100 text-xs font-medium transition-all"
+                type="button"
+                onClick={() => document.getElementById(inputId)?.click()}
+            >
+                Select Files
+            </button>
+        </>
+    );
+}