react-three-game 0.0.19 → 0.0.21

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/dist/tools/prefabeditor/PrefabRoot.js

@@ -108,7 +108,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     return _jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: loadedModels, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: new Matrix4() }) }), editMode && _jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedId && selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] })] });
 });
 function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = new Matrix4(), }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     // Early return if gameObject is null or undefined
     if (!gameObject)
         return null;
@@ -144,12 +144,28 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     }
     // --- 4. Render core content using component system ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
-    // --- 5. Wrap with physics if needed (except in edit mode) ---
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-    // --- 6. Render children recursively (always relative transforms) ---
+    // --- 5. Render children recursively (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)));
-    // --- 7. Final group wrapper with local transform ---
-    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] }));
+    // --- 6. Common props for the wrapper element ---
+    const wrapperProps = {
+        position: transformProps.position,
+        rotation: transformProps.rotation,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+    };
+    // --- 7. Check if physics is needed ---
+    const physics = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.physics;
+    const hasPhysics = physics && !editMode;
+    // --- 8. Final structure: RigidBody outside with position/rotation, scale inside ---
+    if (hasPhysics) {
+        const physicsDef = getComponent('Physics');
+        if (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) {
+            return (_jsx(physicsDef.View, Object.assign({ properties: physics.properties, ref: (obj) => registerRef(gameObject.id, obj) }, wrapperProps, { children: _jsxs("group", { scale: transformProps.scale, children: [core, children] }) })));
+        }
+    }
+    // --- 9. No physics - standard group wrapper ---
+    return (_jsxs("group", Object.assign({ ref: (el) => registerRef(gameObject.id, el), scale: transformProps.scale }, wrapperProps, { children: [core, children] })));
 }
 // Helper: render an instanced GameInstance (terminal node)
 function renderInstancedNode(gameObject, worldMatrix, ctx) {
@@ -223,17 +239,6 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         return _jsx(View, Object.assign({ properties: properties }, contextProps, { children: content }), key);
     }, coreContent);
 }
-// Helper: wrap core content with physics component when necessary
-function wrapPhysicsIfNeeded(gameObject, content, ctx) {
-    var _a;
-    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
-    if (!physics)
-        return content;
-    const physicsDef = getComponent('Physics');
-    if (!physicsDef || !physicsDef.View)
-        return content;
-    return (_jsx(physicsDef.View, { properties: Object.assign(Object.assign({}, physics.properties), { id: gameObject.id }), editMode: ctx.editMode, children: content }));
-}
 export default PrefabRoot;
 function getNodeTransformProps(node) {
     var _a, _b, _c, _d, _e;

package/dist/tools/prefabeditor/components/PhysicsComponent.js

@@ -1,19 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RigidBody } from "@react-three/rapier";
+const selectClass = "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50";
+const labelClass = "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5";
 function PhysicsComponentEditor({ component, onUpdate }) {
-    return _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Type" }), _jsxs("select", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] })] });
+    const { type, collider = 'hull' } = component.properties;
+    return (_jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Type" }), _jsxs("select", { className: selectClass, value: type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] }), _jsx("label", { className: `${labelClass} mt-2`, children: "Collider" }), _jsxs("select", { className: selectClass, value: collider, onChange: e => onUpdate({ collider: e.target.value }), children: [_jsx("option", { value: "hull", children: "Hull (convex)" }), _jsx("option", { value: "trimesh", children: "Trimesh (exact)" }), _jsx("option", { value: "cuboid", children: "Cuboid (box)" }), _jsx("option", { value: "ball", children: "Ball (sphere)" })] })] }));
 }
-import { RigidBody } from "@react-three/rapier";
-function PhysicsComponentView({ properties, children, editMode }) {
+function PhysicsComponentView(_a) {
+    var { properties, editMode, children } = _a, rigidBodyProps = __rest(_a, ["properties", "editMode", "children"]);
     if (editMode)
-        return children;
-    return (_jsx(RigidBody, { type: properties.type, colliders: "cuboid", children: children }));
+        return _jsx(_Fragment, { children: children });
+    const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
+    return (_jsx(RigidBody, Object.assign({ type: properties.type, colliders: colliders }, rigidBodyProps, { children: children })));
 }
 const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
-    defaultProperties: {
-        type: 'dynamic'
-    }
+    defaultProperties: { type: 'dynamic', collider: 'hull' }
 };
 export default PhysicsComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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 {

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -222,10 +222,7 @@ function GameObjectRenderer({
     // --- 4. Render core content using component system ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
 
-    // --- 5. Wrap with physics if needed (except in edit mode) ---
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-
-    // --- 6. Render children recursively (always relative transforms) ---
+    // --- 5. Render children recursively (always relative transforms) ---
     const children = (gameObject.children ?? []).map((child) => (
         <GameObjectRenderer
             key={child.id}
@@ -240,18 +237,46 @@ function GameObjectRenderer({
         />
     ));
 
-    // --- 7. Final group wrapper with local transform ---
+    // --- 6. Common props for the wrapper element ---
+    const wrapperProps = {
+        position: transformProps.position,
+        rotation: transformProps.rotation,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+    };
+
+    // --- 7. Check if physics is needed ---
+    const physics = gameObject.components?.physics;
+    const hasPhysics = physics && !editMode;
+
+    // --- 8. Final structure: RigidBody outside with position/rotation, scale inside ---
+    if (hasPhysics) {
+        const physicsDef = getComponent('Physics');
+        if (physicsDef?.View) {
+            return (
+                <physicsDef.View
+                    properties={physics.properties}
+                    ref={(obj: Object3D | null) => registerRef(gameObject.id, obj)}
+                    {...wrapperProps}
+                >
+                    <group scale={transformProps.scale}>
+                        {core}
+                        {children}
+                    </group>
+                </physicsDef.View>
+            );
+        }
+    }
+
+    // --- 9. No physics - standard group wrapper ---
     return (
         <group
             ref={(el) => registerRef(gameObject.id, el)}
-            position={transformProps.position}
-            rotation={transformProps.rotation}
             scale={transformProps.scale}
-            onPointerDown={handlePointerDown}
-            onPointerMove={handlePointerMove}
-            onPointerUp={handlePointerUp}
+            {...wrapperProps}
         >
-            {physicsWrapped}
+            {core}
             {children}
         </group>
     );
@@ -364,22 +389,6 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
     }, coreContent);
 }
 
-// Helper: wrap core content with physics component when necessary
-function wrapPhysicsIfNeeded(gameObject: GameObjectType, content: React.ReactNode, ctx: any) {
-    const physics = gameObject.components?.physics;
-    if (!physics) return content;
-    const physicsDef = getComponent('Physics');
-    if (!physicsDef || !physicsDef.View) return content;
-    return (
-        <physicsDef.View
-            properties={{ ...physics.properties, id: gameObject.id }}
-            editMode={ctx.editMode}
-        >
-            {content}
-        </physicsDef.View>
-    );
-}
-
 
 
 

package/src/tools/prefabeditor/components/PhysicsComponent.tsx

@@ -1,29 +1,42 @@
+import { RigidBody, RigidBodyProps } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
 
-function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    return <div>
-        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Type</label>
-        <select
-            className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
-            value={component.properties.type}
-            onChange={e => onUpdate({ type: e.target.value })}
-        >
-            <option value="dynamic">Dynamic</option>
-            <option value="fixed">Fixed</option>
-        </select>
-    </div>;
+const selectClass = "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50";
+const labelClass = "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5";
+
+function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpdate: (props: any) => void }) {
+    const { type, collider = 'hull' } = component.properties;
+    return (
+        <div>
+            <label className={labelClass}>Type</label>
+            <select className={selectClass} value={type} onChange={e => onUpdate({ type: e.target.value })}>
+                <option value="dynamic">Dynamic</option>
+                <option value="fixed">Fixed</option>
+            </select>
+
+            <label className={`${labelClass} mt-2`}>Collider</label>
+            <select className={selectClass} value={collider} onChange={e => onUpdate({ collider: e.target.value })}>
+                <option value="hull">Hull (convex)</option>
+                <option value="trimesh">Trimesh (exact)</option>
+                <option value="cuboid">Cuboid (box)</option>
+                <option value="ball">Ball (sphere)</option>
+            </select>
+        </div>
+    );
+}
+
+interface PhysicsViewProps extends Omit<RigidBodyProps, 'type' | 'colliders'> {
+    properties: { type: RigidBodyProps['type']; collider?: string };
+    editMode?: boolean;
 }
 
+function PhysicsComponentView({ properties, editMode, children, ...rigidBodyProps }: PhysicsViewProps) {
+    if (editMode) return <>{children}</>;
 
-import { RigidBody } from "@react-three/rapier";
+    const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
 
-function PhysicsComponentView({ properties, children, editMode }: any) {
-    if (editMode) return children;
     return (
-        <RigidBody
-            type={properties.type}
-            colliders="cuboid"
-        >
+        <RigidBody type={properties.type} colliders={colliders as any} {...rigidBodyProps}>
             {children}
         </RigidBody>
     );
@@ -33,9 +46,7 @@ const PhysicsComponent: Component = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
-    defaultProperties: {
-        type: 'dynamic'
-    }
+    defaultProperties: { type: 'dynamic', collider: 'hull' }
 };
 
 export default PhysicsComponent;