react-three-game 0.0.19 → 0.0.20

package/dist/tools/assetviewer/page.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Canvas, useLoader } from "@react-three/fiber";
-import { OrbitControls, useGLTF, useFBX, Stage, View, PerspectiveCamera } from "@react-three/drei";
+import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
+import { loadModel } from "../dragdrop/modelLoader";
 // view models and textures in manifest, onselect callback
 function getItemsInPath(files, currentPath) {
     // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
@@ -100,18 +101,28 @@ function ModelCard({ file, onSelect, basePath = "" }) {
     return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col", onClick: () => onSelect(file), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(Stage, { intensity: 0.5, environment: "city", children: _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
-    const isFbx = url.toLowerCase().endsWith('.fbx');
-    if (isFbx)
-        return _jsx(FBXModel, { url: url, onError: onError });
-    return _jsx(GLTFModel, { url: url, onError: onError });
-}
-function GLTFModel({ url, onError }) {
-    const { scene } = useGLTF(url);
-    return _jsx("primitive", { object: scene });
-}
-function FBXModel({ url, onError }) {
-    const fbx = useFBX(url);
-    return _jsx("primitive", { object: fbx, scale: 0.01 });
+    const [model, setModel] = useState(null);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    useEffect(() => {
+        let cancelled = false;
+        setModel(null);
+        loadModel(url).then((result) => {
+            var _a;
+            if (cancelled)
+                return;
+            if (result.success && result.model) {
+                setModel(result.model);
+            }
+            else {
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef);
+            }
+        });
+        return () => { cancelled = true; };
+    }, [url]);
+    if (!model)
+        return null;
+    return _jsx("primitive", { object: model });
 }
 export function SoundListViewer({ files, selected, onSelect, basePath = "" }) {
     return (_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(SoundCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -15,10 +15,12 @@
   "author": "prnth",
   "license": "VPL",
   "type": "module",
-  "workspaces": ["docs"],
+  "workspaces": [
+    "docs"
+  ],
   "peerDependencies": {
-    "@react-three/fiber": ">=9.0.0",
     "@react-three/drei": ">=10.0.0",
+    "@react-three/fiber": ">=9.0.0",
     "@react-three/rapier": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -36,5 +38,8 @@
     "react-dom": "^19.2.0",
     "three": "^0.182.0",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "react-error-boundary": "^6.0.0"
   }
 }

package/src/tools/assetviewer/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { Canvas, useLoader } from "@react-three/fiber";
-import { OrbitControls, useGLTF, useFBX, Stage, View, PerspectiveCamera } from "@react-three/drei";
+import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
+import { loadModel } from "../dragdrop/modelLoader";
 
 // view models and textures in manifest, onselect callback
 
@@ -290,19 +291,28 @@ function ModelCard({ file, onSelect, basePath = "" }: { file: string; onSelect:
 }
 
 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} />;
-}
+    const [model, setModel] = useState<any>(null);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
 
-function GLTFModel({ url, onError }: { url: string; onError?: () => void }) {
-    const { scene } = useGLTF(url);
-    return <primitive object={scene} />;
-}
+    useEffect(() => {
+        let cancelled = false;
+        setModel(null);
+
+        loadModel(url).then((result) => {
+            if (cancelled) return;
+            if (result.success && result.model) {
+                setModel(result.model);
+            } else {
+                onErrorRef.current?.();
+            }
+        });
+
+        return () => { cancelled = true; };
+    }, [url]);
 
-function FBXModel({ url, onError }: { url: string; onError?: () => void }) {
-    const fbx = useFBX(url);
-    return <primitive object={fbx} scale={0.01} />;
+    if (!model) return null;
+    return <primitive object={model} />;
 }
 
 interface SoundListViewerProps {