react-three-game 0.0.101 → 0.0.103

package/README.md

@@ -16,6 +16,7 @@ Built on top of [three.js](https://github.com/mrdoob/three.js), [@react-three/fi
 
 * Website: https://prnth.com/react-three-game
 * Editor: https://prnth.com/react-three-game/editor
+* Starter template: https://github.com/prnthh/react-three-game-starter
 
 ## Install
 
@@ -294,4 +295,4 @@ npm run release
 
 ## License
 
-VPL
+PFYL / VPL

package/dist/plugins/crashcat/CrashcatPhysicsComponent.d.ts

@@ -0,0 +1,3 @@
+import { type Component } from "../../tools/prefabeditor/components/ComponentRegistry";
+declare const CrashcatPhysicsComponent: Component;
+export default CrashcatPhysicsComponent;

package/dist/plugins/crashcat/CrashcatPhysicsComponent.js

@@ -0,0 +1,352 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useMemo, useRef } from "react";
+import { BooleanField, FieldRenderer, StringField, Vector3Field, } from "../../tools/prefabeditor/components/Input";
+import { useAssetRuntime, useNode } from "../../tools/prefabeditor/assetRuntime";
+import { usePrefabStoreApi } from "../../tools/prefabeditor/prefabStore";
+import { PrefabEditorMode, useScene } from "../../tools/prefabeditor/PrefabRoot";
+import { box, capsule, convexHull, MotionQuality, MotionType, rigidBody, sphere, triangleMesh, } from "crashcat";
+import { Matrix4, Quaternion, Vector3 } from "three";
+import { useCrashcat } from "./CrashcatRuntime";
+const MAX_PHYSICS_DELTA = 1 / 30;
+const crashcatPhysicsFields = [
+    {
+        name: "type",
+        type: "select",
+        label: "Motion Type",
+        options: [
+            { value: "fixed", label: "Fixed" },
+            { value: "dynamic", label: "Dynamic" },
+            { value: "kinematicPosition", label: "Kinematic Position" },
+            { value: "kinematicVelocity", label: "Kinematic Velocity" },
+        ],
+    },
+    {
+        name: "colliders",
+        type: "select",
+        label: "Collider",
+        options: [
+            { value: "cuboid", label: "Cuboid" },
+            { value: "ball", label: "Ball" },
+            { value: "capsule", label: "Capsule" },
+            { value: "hull", label: "Hull" },
+            { value: "trimesh", label: "Tri Mesh" },
+        ],
+    },
+    { name: "friction", type: "number", label: "Friction", step: 0.05 },
+    { name: "restitution", type: "number", label: "Restitution", step: 0.05 },
+    { name: "capsuleRadius", type: "number", label: "Capsule Radius", step: 0.05 },
+    { name: "capsuleHalfHeight", type: "number", label: "Capsule Half Height", step: 0.05 },
+];
+function CrashcatPhysicsEditor({ component, onUpdate }) {
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [_jsx(FieldRenderer, { fields: crashcatPhysicsFields, values: component.properties, onChange: onUpdate }), _jsx(BooleanField, { name: "sensor", label: "Sensor", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(Vector3Field, { name: "linearVelocity", label: "Linear Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(Vector3Field, { name: "angularVelocity", label: "Angular Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(StringField, { name: "collisionEnterEventName", label: "Collision Enter", values: component.properties, onChange: onUpdate, fallback: "" }), _jsx(StringField, { name: "collisionExitEventName", label: "Collision Exit", values: component.properties, onChange: onUpdate, fallback: "" }), _jsx(StringField, { name: "sensorEnterEventName", label: "Sensor Enter", values: component.properties, onChange: onUpdate, fallback: "" }), _jsx(StringField, { name: "sensorExitEventName", label: "Sensor Exit", values: component.properties, onChange: onUpdate, fallback: "" })] }));
+}
+const inverseWorldMatrix = new Matrix4();
+const childToLocalMatrix = new Matrix4();
+const scratchVertex = new Vector3();
+const scratchScale = new Vector3();
+const scratchPosition = new Vector3();
+const scratchBoundsSize = new Vector3();
+const worldQuaternion = new Quaternion();
+const parentWorldQuaternion = new Quaternion();
+const localQuaternion = new Quaternion();
+function collectGeometryData(object) {
+    const positions = [];
+    const indices = [];
+    let vertexOffset = 0;
+    inverseWorldMatrix.copy(object.matrixWorld).invert();
+    object.traverse((child) => {
+        var _a;
+        const geometry = child.geometry;
+        const positionAttribute = (_a = geometry === null || geometry === void 0 ? void 0 : geometry.attributes) === null || _a === void 0 ? void 0 : _a.position;
+        if (!positionAttribute)
+            return;
+        childToLocalMatrix.multiplyMatrices(inverseWorldMatrix, child.matrixWorld);
+        for (let i = 0; i < positionAttribute.count; i += 1) {
+            scratchVertex
+                .set(positionAttribute.getX(i), positionAttribute.getY(i), positionAttribute.getZ(i))
+                .applyMatrix4(childToLocalMatrix);
+            positions.push(scratchVertex.x, scratchVertex.y, scratchVertex.z);
+        }
+        if (geometry.index) {
+            for (let i = 0; i < geometry.index.count; i += 1) {
+                indices.push(vertexOffset + geometry.index.getX(i));
+            }
+        }
+        else {
+            for (let i = 0; i < positionAttribute.count; i += 1) {
+                indices.push(vertexOffset + i);
+            }
+        }
+        vertexOffset += positionAttribute.count;
+    });
+    if (positions.length === 0 || indices.length < 3)
+        return null;
+    return { positions, indices };
+}
+function createShapeForObject(object, physics) {
+    var _a, _b;
+    object.updateWorldMatrix(true, true);
+    if (physics.colliders === "trimesh") {
+        const geometry = collectGeometryData(object);
+        return geometry ? triangleMesh.create(geometry) : null;
+    }
+    if (physics.colliders === "hull") {
+        const geometry = collectGeometryData(object);
+        return geometry ? convexHull.create({ positions: geometry.positions }) : null;
+    }
+    if (physics.colliders === "capsule") {
+        return capsule.create({
+            radius: Math.max((_a = physics.capsuleRadius) !== null && _a !== void 0 ? _a : 0.35, 0.01),
+            halfHeightOfCylinder: Math.max((_b = physics.capsuleHalfHeight) !== null && _b !== void 0 ? _b : 0.45, 0.01),
+        });
+    }
+    object.getWorldScale(scratchScale);
+    const geometry = collectGeometryData(object);
+    if (!geometry)
+        return null;
+    if (physics.colliders === "ball") {
+        let maxRadiusSq = 0;
+        for (let i = 0; i < geometry.positions.length; i += 3) {
+            const x = geometry.positions[i] * scratchScale.x;
+            const y = geometry.positions[i + 1] * scratchScale.y;
+            const z = geometry.positions[i + 2] * scratchScale.z;
+            maxRadiusSq = Math.max(maxRadiusSq, x * x + y * y + z * z);
+        }
+        return sphere.create({ radius: Math.max(Math.sqrt(maxRadiusSq), 0.01) });
+    }
+    let minX = Infinity, minY = Infinity, minZ = Infinity;
+    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+    for (let i = 0; i < geometry.positions.length; i += 3) {
+        const x = geometry.positions[i] * scratchScale.x;
+        const y = geometry.positions[i + 1] * scratchScale.y;
+        const z = geometry.positions[i + 2] * scratchScale.z;
+        if (x < minX)
+            minX = x;
+        if (x > maxX)
+            maxX = x;
+        if (y < minY)
+            minY = y;
+        if (y > maxY)
+            maxY = y;
+        if (z < minZ)
+            minZ = z;
+        if (z > maxZ)
+            maxZ = z;
+    }
+    scratchBoundsSize.set(maxX - minX, maxY - minY, maxZ - minZ);
+    return box.create({
+        halfExtents: [
+            Math.max(scratchBoundsSize.x * 0.5, 0.01),
+            Math.max(scratchBoundsSize.y * 0.5, 0.01),
+            Math.max(scratchBoundsSize.z * 0.5, 0.01),
+        ],
+    });
+}
+function toMotionType(physics) {
+    if (physics.type === "dynamic")
+        return MotionType.DYNAMIC;
+    if (physics.type === "kinematicPosition" || physics.type === "kinematicVelocity")
+        return MotionType.KINEMATIC;
+    return MotionType.STATIC;
+}
+function toMotionQuality(physics) {
+    return physics.type === "kinematicPosition" ? MotionQuality.LINEAR_CAST : undefined;
+}
+function setObjectWorldTransform(object, position, quaternion) {
+    if (!object.parent) {
+        object.position.set(position[0], position[1], position[2]);
+        object.quaternion.set(quaternion[0], quaternion[1], quaternion[2], quaternion[3]);
+        object.updateMatrixWorld(true);
+        return;
+    }
+    scratchPosition.set(position[0], position[1], position[2]);
+    object.parent.worldToLocal(scratchPosition);
+    object.position.copy(scratchPosition);
+    object.parent.getWorldQuaternion(parentWorldQuaternion);
+    worldQuaternion.set(quaternion[0], quaternion[1], quaternion[2], quaternion[3]);
+    localQuaternion.copy(parentWorldQuaternion).invert().multiply(worldQuaternion);
+    object.quaternion.copy(localQuaternion);
+    object.updateMatrixWorld(true);
+}
+function syncObjectToBody(world, body, object, position, quaternion, delta) {
+    object.getWorldPosition(scratchPosition);
+    object.getWorldQuaternion(worldQuaternion);
+    position.splice(0, 3, scratchPosition.x, scratchPosition.y, scratchPosition.z);
+    quaternion.splice(0, 4, worldQuaternion.x, worldQuaternion.y, worldQuaternion.z, worldQuaternion.w);
+    if (delta === undefined) {
+        rigidBody.setPosition(world, body, position, false);
+        rigidBody.setQuaternion(world, body, quaternion, false);
+    }
+    else {
+        rigidBody.moveKinematic(body, position, quaternion, delta);
+    }
+}
+function bodyTransformChanged(body, lastPosition, lastQuaternion) {
+    const position = body.position;
+    const quaternion = body.quaternion;
+    return !lastPosition
+        || position[0] !== lastPosition[0]
+        || position[1] !== lastPosition[1]
+        || position[2] !== lastPosition[2]
+        || quaternion[0] !== (lastQuaternion === null || lastQuaternion === void 0 ? void 0 : lastQuaternion[0])
+        || quaternion[1] !== (lastQuaternion === null || lastQuaternion === void 0 ? void 0 : lastQuaternion[1])
+        || quaternion[2] !== (lastQuaternion === null || lastQuaternion === void 0 ? void 0 : lastQuaternion[2])
+        || quaternion[3] !== (lastQuaternion === null || lastQuaternion === void 0 ? void 0 : lastQuaternion[3]);
+}
+function getRegisteredBody(api, nodeId, body) {
+    return api && body && api.getBody(nodeId) === body ? body : null;
+}
+function CrashcatPhysicsView({ properties, children }) {
+    const { nodeId, getObject } = useNode();
+    const scene = useScene();
+    const store = usePrefabStoreApi();
+    const api = useCrashcat();
+    const { getAssetRevision } = useAssetRuntime();
+    const revision = getAssetRevision();
+    const bodyRef = useRef(null);
+    const motionTypeRef = useRef(MotionType.STATIC);
+    const syncPositionRef = useRef([0, 0, 0]);
+    const syncQuaternionRef = useRef([0, 0, 0, 1]);
+    const lastPositionRef = useRef(null);
+    const lastQuaternionRef = useRef(null);
+    const { angularVelocity, capsuleHalfHeight, capsuleRadius, colliders, collisionEnterEventName, collisionExitEventName, friction, linearVelocity, restitution, sensor, sensorEnterEventName, sensorExitEventName, type, } = properties;
+    const physics = useMemo(() => ({
+        angularVelocity,
+        capsuleHalfHeight,
+        capsuleRadius,
+        colliders,
+        collisionEnterEventName,
+        collisionExitEventName,
+        friction,
+        linearVelocity,
+        restitution,
+        sensor,
+        sensorEnterEventName,
+        sensorExitEventName,
+        type,
+    }), [
+        angularVelocity,
+        capsuleHalfHeight,
+        capsuleRadius,
+        colliders,
+        collisionEnterEventName,
+        collisionExitEventName,
+        friction,
+        linearVelocity,
+        restitution,
+        sensor,
+        sensorEnterEventName,
+        sensorExitEventName,
+        type,
+    ]);
+    useEffect(() => {
+        // Rebuild mesh-derived colliders when referenced assets finish loading.
+        void revision;
+        if (!api)
+            return;
+        const object = getObject();
+        if (!object)
+            return;
+        const shape = createShapeForObject(object, physics);
+        if (!shape)
+            return;
+        object.updateWorldMatrix(true, true);
+        object.getWorldPosition(scratchPosition);
+        const wq = new Quaternion();
+        object.getWorldQuaternion(wq);
+        const motionType = toMotionType(physics);
+        const motionQuality = toMotionQuality(physics);
+        const isKinematic = motionType === MotionType.KINEMATIC;
+        const isStatic = motionType === MotionType.STATIC;
+        const body = rigidBody.create(api.world, {
+            shape,
+            motionType,
+            motionQuality,
+            objectLayer: isStatic ? api.staticObjectLayer : api.movingObjectLayer,
+            position: [scratchPosition.x, scratchPosition.y, scratchPosition.z],
+            quaternion: [wq.x, wq.y, wq.z, wq.w],
+            sensor: Boolean(physics.sensor),
+            collideKinematicVsNonDynamic: isKinematic,
+            friction: physics.friction,
+            restitution: physics.restitution,
+            userData: { nodeId },
+        });
+        if (physics.linearVelocity) {
+            rigidBody.setLinearVelocity(api.world, body, physics.linearVelocity);
+        }
+        if (physics.angularVelocity) {
+            rigidBody.setAngularVelocity(api.world, body, physics.angularVelocity);
+        }
+        bodyRef.current = body;
+        motionTypeRef.current = motionType;
+        lastPositionRef.current = null;
+        lastQuaternionRef.current = null;
+        api.register(nodeId, body, {
+            motionType,
+            sensor: Boolean(physics.sensor),
+            events: {
+                collisionEnter: physics.collisionEnterEventName,
+                collisionExit: physics.collisionExitEventName,
+                sensorEnter: physics.sensorEnterEventName,
+                sensorExit: physics.sensorExitEventName,
+            },
+        });
+        return () => {
+            bodyRef.current = null;
+            api.unregister(nodeId);
+        };
+    }, [
+        api,
+        getObject,
+        nodeId,
+        physics,
+        revision,
+    ]);
+    useEffect(() => {
+        const syncEditBody = () => {
+            const body = getRegisteredBody(api, nodeId, bodyRef.current);
+            const object = getObject();
+            if (!api || !body || !object || scene.mode !== PrefabEditorMode.Edit)
+                return;
+            syncObjectToBody(api.world, body, object, syncPositionRef.current, syncQuaternionRef.current);
+        };
+        syncEditBody();
+        return store.subscribe(syncEditBody);
+    }, [api, getObject, nodeId, scene.mode, store]);
+    useFrame((_, delta) => {
+        const body = getRegisteredBody(api, nodeId, bodyRef.current);
+        const object = getObject();
+        if (!api || !body || !object || scene.mode !== PrefabEditorMode.Play || motionTypeRef.current !== MotionType.KINEMATIC)
+            return;
+        syncObjectToBody(api.world, body, object, syncPositionRef.current, syncQuaternionRef.current, Math.min(delta, MAX_PHYSICS_DELTA));
+    }, -2);
+    useFrame(() => {
+        const body = getRegisteredBody(api, nodeId, bodyRef.current);
+        const object = getObject();
+        if (!api || !body || !object || motionTypeRef.current !== MotionType.DYNAMIC || scene.mode !== PrefabEditorMode.Play)
+            return;
+        if (bodyTransformChanged(body, lastPositionRef.current, lastQuaternionRef.current)) {
+            setObjectWorldTransform(object, body.position, body.quaternion);
+            lastPositionRef.current = [body.position[0], body.position[1], body.position[2]];
+            lastQuaternionRef.current = [body.quaternion[0], body.quaternion[1], body.quaternion[2], body.quaternion[3]];
+        }
+        if (body.position[1] < -40) {
+            bodyRef.current = null;
+            api.unregister(nodeId);
+        }
+    });
+    return _jsx(_Fragment, { children: children });
+}
+const CrashcatPhysicsComponent = {
+    name: "CrashcatPhysics",
+    Editor: CrashcatPhysicsEditor,
+    View: CrashcatPhysicsView,
+    defaultProperties: {
+        type: "fixed",
+        colliders: "cuboid",
+        sensor: false,
+    },
+};
+export default CrashcatPhysicsComponent;

package/dist/plugins/crashcat/CrashcatRuntime.d.ts

@@ -0,0 +1,27 @@
+import { MotionType, type Filter, type RigidBody, type World } from "crashcat";
+export type CrashcatEventConfig = {
+    collisionEnter?: string;
+    collisionExit?: string;
+    sensorEnter?: string;
+    sensorExit?: string;
+};
+export type BodyMeta = {
+    nodeId: string;
+    motionType: MotionType;
+    sensor: boolean;
+    events?: CrashcatEventConfig;
+};
+export interface CrashcatApi {
+    world: World;
+    queryFilter: Filter;
+    staticObjectLayer: number;
+    movingObjectLayer: number;
+    register: (nodeId: string, body: RigidBody, meta: Omit<BodyMeta, "nodeId">) => void;
+    unregister: (nodeId: string) => void;
+    getBody: (nodeId: string) => RigidBody | null;
+}
+export declare function useCrashcat(): CrashcatApi | null;
+export declare function CrashcatRuntime({ debug, children }: {
+    debug?: boolean;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/plugins/crashcat/CrashcatRuntime.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { addBroadphaseLayer, addObjectLayer, createWorld, createWorldSettings, enableCollision, filter, registerAll, rigidBody, updateWorld, } from "crashcat";
+import { debugRenderer } from "crashcat/three";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { gameEvents } from "../../tools/prefabeditor/GameEvents";
+import { PrefabEditorMode, useScene } from "../../tools/prefabeditor/PrefabRoot";
+const SLEEP_TIME_BEFORE_REST = 0.1;
+const SLEEP_POINT_VELOCITY_THRESHOLD = 0.06;
+const MAX_PHYSICS_DELTA = 1 / 30;
+let didRegisterCrashcat = false;
+function ensureCrashcatRegistered() {
+    if (didRegisterCrashcat)
+        return;
+    registerAll();
+    didRegisterCrashcat = true;
+}
+const crashcatListeners = new Set();
+let crashcatApi = null;
+export function useCrashcat() {
+    return useSyncExternalStore((listener) => (crashcatListeners.add(listener), () => crashcatListeners.delete(listener)), () => crashcatApi, () => crashcatApi);
+}
+function setCrashcatApi(api) {
+    crashcatApi = api;
+    crashcatListeners.forEach((listener) => listener());
+}
+function emitConfiguredEvent(eventName, sourceNodeId, targetNodeId, collisionNormal) {
+    const trimmed = eventName === null || eventName === void 0 ? void 0 : eventName.trim();
+    if (!trimmed)
+        return;
+    gameEvents.emit(trimmed, Object.assign({ sourceEntityId: sourceNodeId, sourceNodeId, targetEntityId: targetNodeId, targetNodeId }, (collisionNormal ? { collisionNormal } : {})));
+}
+function createDebugState() {
+    const options = debugRenderer.createDefaultOptions();
+    options.bodies.wireframe = true;
+    options.bodies.color = debugRenderer.BodyColorMode.MOTION_TYPE;
+    options.bodies.showAngularVelocity = false;
+    options.bodies.showLinearVelocity = false;
+    options.contacts.enabled = false;
+    options.contactConstraints.enabled = false;
+    return debugRenderer.init(options);
+}
+function getBodyMeta(bodyById, body) {
+    var _a;
+    const registered = bodyById.get(Number(body.id));
+    if (registered)
+        return registered;
+    const nodeId = (_a = body.userData) === null || _a === void 0 ? void 0 : _a.nodeId;
+    if (typeof nodeId !== "string")
+        return null;
+    return {
+        nodeId,
+        motionType: body.motionType,
+        sensor: body.sensor,
+    };
+}
+export function CrashcatRuntime({ debug = false, children }) {
+    const { mode } = useScene();
+    const bodiesRef = useRef(new Map());
+    const bodyByIdRef = useRef(new Map());
+    const apiRef = useRef(null);
+    const [debugState] = useState(() => debug ? createDebugState() : null);
+    const listener = useMemo(() => ({
+        onContactAdded: (bodyA, bodyB, manifold) => {
+            var _a, _b;
+            const metaA = getBodyMeta(bodyByIdRef.current, bodyA);
+            const metaB = getBodyMeta(bodyByIdRef.current, bodyB);
+            const n = manifold === null || manifold === void 0 ? void 0 : manifold.worldSpaceNormal;
+            const nA = n ? [n[0], n[1], n[2]] : undefined;
+            const nB = n ? [-n[0], -n[1], -n[2]] : undefined;
+            if (metaA === null || metaA === void 0 ? void 0 : metaA.events)
+                emitConfiguredEvent(metaA.sensor ? metaA.events.sensorEnter : metaA.events.collisionEnter, metaA.nodeId, (_a = metaB === null || metaB === void 0 ? void 0 : metaB.nodeId) !== null && _a !== void 0 ? _a : null, nA);
+            if (metaB === null || metaB === void 0 ? void 0 : metaB.events)
+                emitConfiguredEvent(metaB.sensor ? metaB.events.sensorEnter : metaB.events.collisionEnter, metaB.nodeId, (_b = metaA === null || metaA === void 0 ? void 0 : metaA.nodeId) !== null && _b !== void 0 ? _b : null, nB);
+        },
+        onContactRemoved: (idA, idB) => {
+            var _a, _b;
+            const metaA = bodyByIdRef.current.get(Number(idA));
+            const metaB = bodyByIdRef.current.get(Number(idB));
+            if (metaA === null || metaA === void 0 ? void 0 : metaA.events)
+                emitConfiguredEvent(metaA.sensor ? metaA.events.sensorExit : metaA.events.collisionExit, metaA.nodeId, (_a = metaB === null || metaB === void 0 ? void 0 : metaB.nodeId) !== null && _a !== void 0 ? _a : null);
+            if (metaB === null || metaB === void 0 ? void 0 : metaB.events)
+                emitConfiguredEvent(metaB.sensor ? metaB.events.sensorExit : metaB.events.collisionExit, metaB.nodeId, (_b = metaA === null || metaA === void 0 ? void 0 : metaA.nodeId) !== null && _b !== void 0 ? _b : null);
+        },
+    }), []);
+    useEffect(() => {
+        ensureCrashcatRegistered();
+        const settings = createWorldSettings();
+        settings.narrowphase.collideWithBackfaces = true;
+        settings.sleeping.timeBeforeSleep = SLEEP_TIME_BEFORE_REST;
+        settings.sleeping.pointVelocitySleepThreshold = SLEEP_POINT_VELOCITY_THRESHOLD;
+        const movingBroadphase = addBroadphaseLayer(settings);
+        const staticBroadphase = addBroadphaseLayer(settings);
+        const movingObjectLayer = addObjectLayer(settings, movingBroadphase);
+        const staticObjectLayer = addObjectLayer(settings, staticBroadphase);
+        enableCollision(settings, movingObjectLayer, staticObjectLayer);
+        enableCollision(settings, movingObjectLayer, movingObjectLayer);
+        const world = createWorld(settings);
+        const queryFilter = filter.forWorld(world);
+        const bodies = bodiesRef.current;
+        const bodyById = bodyByIdRef.current;
+        const unregister = (nodeId) => {
+            const entry = bodies.get(nodeId);
+            if (!entry)
+                return;
+            bodyById.delete(Number(entry.body.id));
+            rigidBody.remove(world, entry.body);
+            bodies.delete(nodeId);
+        };
+        const runtimeApi = {
+            world,
+            queryFilter,
+            staticObjectLayer,
+            movingObjectLayer,
+            register: (nodeId, body, meta) => {
+                unregister(nodeId);
+                const full = Object.assign({ nodeId }, meta);
+                bodies.set(nodeId, { body, meta: full });
+                bodyById.set(Number(body.id), full);
+            },
+            unregister,
+            getBody: (nodeId) => { var _a, _b; return (_b = (_a = bodies.get(nodeId)) === null || _a === void 0 ? void 0 : _a.body) !== null && _b !== void 0 ? _b : null; },
+        };
+        apiRef.current = runtimeApi;
+        setCrashcatApi(runtimeApi);
+        return () => {
+            for (const entry of bodies.values()) {
+                rigidBody.remove(world, entry.body);
+            }
+            apiRef.current = null;
+            if (crashcatApi === runtimeApi)
+                setCrashcatApi(null);
+            bodies.clear();
+            bodyById.clear();
+            if (debugState)
+                debugRenderer.dispose(debugState);
+        };
+    }, [debugState]);
+    useFrame((_, delta) => {
+        const runtimeApi = apiRef.current;
+        if (!runtimeApi)
+            return;
+        const { world } = runtimeApi;
+        const stepDelta = Math.min(delta, MAX_PHYSICS_DELTA);
+        if (mode === PrefabEditorMode.Play)
+            updateWorld(world, listener, stepDelta);
+        if (debugState)
+            debugRenderer.update(debugState, world);
+    }, -1);
+    return (_jsxs(_Fragment, { children: [children, debugState && mode === PrefabEditorMode.Edit
+                ? _jsx("primitive", { object: debugState.object3d })
+                : null] }));
+}

package/dist/plugins/crashcat/index.d.ts

@@ -0,0 +1,2 @@
+export { CrashcatRuntime, useCrashcat, type BodyMeta, type CrashcatApi, type CrashcatEventConfig, } from "./CrashcatRuntime";
+export { default as CrashcatPhysicsComponent, default, } from "./CrashcatPhysicsComponent";

package/dist/plugins/crashcat/index.js

@@ -0,0 +1,2 @@
+export { CrashcatRuntime, useCrashcat, } from "./CrashcatRuntime";
+export { default as CrashcatPhysicsComponent, default, } from "./CrashcatPhysicsComponent";

package/dist/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from "./crashcat";

package/dist/plugins/index.js

@@ -0,0 +1 @@
+export * from "./crashcat";

package/dist/tools/assetviewer/page.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Canvas, useLoader } from "@react-three/fiber";
+import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useLayoutEffect, useState, useRef } from "react";
 import { createPortal } from 'react-dom';
@@ -124,12 +124,44 @@ export function TextureListViewer({ files, selected, onSelect, basePath = "" })
 }
 function TextureCard({ file, onSelect, basePath = "" }) {
     const [isHovered, setIsHovered] = useState(false);
+    const [error, setError] = useState(false);
     const { ref, isInView } = useInView();
     const fullPath = resolvePrefabAssetPath(basePath, file);
-    return (_jsxs("div", { ref: ref, style: Object.assign({ maxWidth: 60, aspectRatio: '1 / 1' }, assetTileStyle), onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    const fileName = file.split('/').pop();
+    if (error) {
+        return (_jsxs("div", { ref: ref, style: Object.assign(Object.assign({ maxWidth: 60, aspectRatio: '1 / 1' }, assetTileStyle), { backgroundColor: assetViewerColors.errorBg }), onClick: () => onSelect(file), title: `Could not load ${file}`, children: [_jsx("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }), _jsx("div", { style: styles.bottomLabel, children: fileName })] }));
+    }
+    return (_jsxs("div", { ref: ref, style: Object.assign({ maxWidth: 60, aspectRatio: '1 / 1' }, assetTileStyle), onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: fileName })] }));
 }
-function TextureSphere({ url }) {
-    const texture = useLoader(TextureLoader, url);
+function TextureSphere({ url, onError }) {
+    const [texture, setTexture] = useState(null);
+    const textureRef = useRef(null);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    useEffect(() => {
+        let cancelled = false;
+        textureRef.current = null;
+        setTexture(null);
+        const loader = new TextureLoader();
+        loader.load(url, loadedTexture => {
+            if (cancelled) {
+                return;
+            }
+            textureRef.current = loadedTexture;
+            setTexture(loadedTexture);
+        }, undefined, () => {
+            var _a;
+            if (!cancelled) {
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef);
+            }
+        });
+        return () => {
+            cancelled = true;
+            textureRef.current = null;
+        };
+    }, [url]);
+    if (!texture)
+        return null;
     return (_jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [1, 32, 32] }), _jsx("meshStandardMaterial", { map: texture })] }));
 }
 export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useRef } from 'react';
+import { createContext, useContext, useLayoutEffect, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
 import { assetRef, assetRefs } from './ComponentRegistry';
@@ -38,6 +38,50 @@ const MAG_FILTER_MAP = {
     NearestFilter,
     LinearFilter,
 };
+function configureTexture(texture, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!texture)
+        return;
+    if (options.repeat) {
+        texture.wrapS = texture.wrapT = RepeatWrapping;
+        texture.repeat.set((_b = (_a = options.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, (_d = (_c = options.repeatCount) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 1);
+    }
+    else {
+        texture.wrapS = texture.wrapT = ClampToEdgeWrapping;
+        texture.repeat.set(1, 1);
+    }
+    texture.offset.set((_f = (_e = options.offset) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : 0, (_h = (_g = options.offset) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0);
+    texture.colorSpace = options.colorSpace;
+    texture.generateMipmaps = options.generateMipmaps;
+    texture.minFilter = options.minFilter;
+    texture.magFilter = options.magFilter;
+    texture.needsUpdate = true;
+}
+function useConfiguredTexture(texture, options) {
+    const { colorSpace, repeat, repeatCount, offset, generateMipmaps, minFilter, magFilter, } = options;
+    const configuredTexture = useMemo(() => texture === null || texture === void 0 ? void 0 : texture.clone(), [texture]);
+    useLayoutEffect(() => {
+        configureTexture(configuredTexture, {
+            colorSpace,
+            repeat,
+            repeatCount,
+            offset,
+            generateMipmaps,
+            minFilter,
+            magFilter,
+        });
+    }, [
+        configuredTexture,
+        colorSpace,
+        repeat,
+        repeatCount,
+        offset,
+        generateMipmaps,
+        minFilter,
+        magFilter,
+    ]);
+    return configuredTexture;
+}
 export function useMaterialOverrides() {
     return useContext(MaterialOverridesContext);
 }
@@ -52,13 +96,14 @@ extend({
     SpriteNodeMaterial,
 });
 function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
-    var _a;
+    var _a, _b, _c, _d;
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
     const animateOffset = component.properties.animateOffset;
     const isStandardMaterial = materialType === 'standard';
     const isSpriteMaterial = materialType === 'sprite';
+    const editorValues = Object.assign(Object.assign({}, component.properties), { generateMipmaps: (_b = component.properties.generateMipmaps) !== null && _b !== void 0 ? _b : true, minFilter: (_c = component.properties.minFilter) !== null && _c !== void 0 ? _c : 'LinearMipmapLinearFilter', magFilter: (_d = component.properties.magFilter) !== null && _d !== void 0 ? _d : 'LinearFilter' });
     const fields = [
         {
             name: 'attach',
@@ -151,12 +196,12 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
                 type: 'select',
                 label: 'Min Filter',
                 options: [
+                    { value: 'LinearMipmapLinearFilter', label: 'Linear Mipmap Linear (Default)' },
+                    { value: 'LinearFilter', label: 'Linear' },
+                    { value: 'LinearMipmapNearestFilter', label: 'Linear Mipmap Nearest' },
                     { value: 'NearestFilter', label: 'Nearest' },
                     { value: 'NearestMipmapNearestFilter', label: 'Nearest Mipmap Nearest' },
                     { value: 'NearestMipmapLinearFilter', label: 'Nearest Mipmap Linear' },
-                    { value: 'LinearFilter', label: 'Linear' },
-                    { value: 'LinearMipmapNearestFilter', label: 'Linear Mipmap Nearest' },
-                    { value: 'LinearMipmapLinearFilter', label: 'Linear Mipmap Linear (Default)' },
                 ],
             },
             {
@@ -164,17 +209,17 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
                 type: 'select',
                 label: 'Mag Filter',
                 options: [
-                    { value: 'NearestFilter', label: 'Nearest' },
                     { value: 'LinearFilter', label: 'Linear (Default)' },
+                    { value: 'NearestFilter', label: 'Nearest' },
                 ],
             },
         ] : []),
     ];
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+    return (_jsx(FieldRenderer, { fields: fields, values: editorValues, onChange: onUpdate }));
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
@@ -198,80 +243,16 @@ function MaterialComponentView({ properties: rawProps }) {
     const resolvedMinFilter = (_e = MIN_FILTER_MAP[minFilter]) !== null && _e !== void 0 ? _e : LinearMipmapLinearFilter;
     const resolvedMagFilter = (_f = MAG_FILTER_MAP[magFilter]) !== null && _f !== void 0 ? _f : LinearFilter;
     const animatedOffsetRef = useRef([(_g = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _g !== void 0 ? _g : 0, (_h = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _h !== void 0 ? _h : 0]);
-    const finalTexture = useMemo(() => {
-        return texture ? texture.clone() : undefined;
-    }, [texture]);
-    useEffect(() => {
-        return () => finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.dispose();
-    }, [finalTexture]);
-    useEffect(() => {
-        var _a, _b;
-        if (!finalTexture)
-            return;
-        if (repeat) {
-            finalTexture.wrapS = finalTexture.wrapT = RepeatWrapping;
-            if (repeatCount) {
-                finalTexture.repeat.set(repeatCount[0], repeatCount[1]);
-            }
-        }
-        else {
-            finalTexture.wrapS = finalTexture.wrapT = ClampToEdgeWrapping;
-            finalTexture.repeat.set(1, 1);
-        }
-        finalTexture.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
-        finalTexture.colorSpace = SRGBColorSpace;
-        finalTexture.generateMipmaps = generateMipmaps;
-        finalTexture.minFilter = resolvedMinFilter;
-        finalTexture.magFilter = resolvedMagFilter;
-        finalTexture.needsUpdate = true;
-    }, [
-        finalTexture,
+    const textureConfig = {
         repeat,
-        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0],
-        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1],
-        offset === null || offset === void 0 ? void 0 : offset[0],
-        offset === null || offset === void 0 ? void 0 : offset[1],
+        repeatCount,
+        offset,
         generateMipmaps,
-        resolvedMinFilter,
-        resolvedMagFilter
-    ]);
-    const finalNormalMap = useMemo(() => {
-        return normalMapTexture ? normalMapTexture.clone() : undefined;
-    }, [normalMapTexture]);
-    useEffect(() => {
-        return () => finalNormalMap === null || finalNormalMap === void 0 ? void 0 : finalNormalMap.dispose();
-    }, [finalNormalMap]);
-    useEffect(() => {
-        var _a, _b;
-        if (!finalNormalMap)
-            return;
-        if (repeat) {
-            finalNormalMap.wrapS = finalNormalMap.wrapT = RepeatWrapping;
-            if (repeatCount) {
-                finalNormalMap.repeat.set(repeatCount[0], repeatCount[1]);
-            }
-        }
-        else {
-            finalNormalMap.wrapS = finalNormalMap.wrapT = ClampToEdgeWrapping;
-            finalNormalMap.repeat.set(1, 1);
-        }
-        finalNormalMap.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
-        finalNormalMap.colorSpace = NoColorSpace;
-        finalNormalMap.generateMipmaps = generateMipmaps;
-        finalNormalMap.minFilter = resolvedMinFilter;
-        finalNormalMap.magFilter = resolvedMagFilter;
-        finalNormalMap.needsUpdate = true;
-    }, [
-        finalNormalMap,
-        repeat,
-        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0],
-        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1],
-        offset === null || offset === void 0 ? void 0 : offset[0],
-        offset === null || offset === void 0 ? void 0 : offset[1],
-        generateMipmaps,
-        resolvedMinFilter,
-        resolvedMagFilter
-    ]);
+        minFilter: resolvedMinFilter,
+        magFilter: resolvedMagFilter,
+    };
+    const finalTexture = useConfiguredTexture(texture, Object.assign(Object.assign({}, textureConfig), { colorSpace: SRGBColorSpace }));
+    const finalNormalMap = useConfiguredTexture(normalMapTexture, Object.assign(Object.assign({}, textureConfig), { colorSpace: NoColorSpace }));
     animatedOffsetRef.current = [(_j = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _j !== void 0 ? _j : 0, (_k = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _k !== void 0 ? _k : 0];
     useFrame((_, delta) => {
         var _a, _b;
@@ -294,17 +275,23 @@ function MaterialComponentView({ properties: rawProps }) {
         materialType,
         textureName !== null && textureName !== void 0 ? textureName : 'no-texture',
         normalMapTextureName !== null && normalMapTextureName !== void 0 ? normalMapTextureName : 'no-normal',
+        repeat ? 'repeat' : 'clamp',
+        (_l = repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0]) !== null && _l !== void 0 ? _l : 1,
+        (_m = repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1]) !== null && _m !== void 0 ? _m : 1,
+        generateMipmaps ? 'mips' : 'no-mips',
+        minFilter,
+        magFilter,
     ].join('|');
     if (materialType === 'basic') {
         return _jsx("meshBasicNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material' }, sharedProps), materialKey);
     }
     if (materialType === 'sprite') {
         const spriteTransparent = materialSource.transparent !== false;
-        return (_jsx("spriteNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material', map: finalTexture !== null && finalTexture !== void 0 ? finalTexture : null, color: (_l = materialSource.color) !== null && _l !== void 0 ? _l : '#ffffff', opacity: (_m = materialSource.opacity) !== null && _m !== void 0 ? _m : 1, transparent: spriteTransparent, alphaTest: (_o = materialSource.alphaTest) !== null && _o !== void 0 ? _o : 0, depthTest: (_p = materialSource.depthTest) !== null && _p !== void 0 ? _p : false, depthWrite: (_q = materialSource.depthWrite) !== null && _q !== void 0 ? _q : false, toneMapped: (_r = materialSource.toneMapped) !== null && _r !== void 0 ? _r : true, onUpdate: material => {
+        return (_jsx("spriteNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material', map: finalTexture !== null && finalTexture !== void 0 ? finalTexture : null, color: (_o = materialSource.color) !== null && _o !== void 0 ? _o : '#ffffff', opacity: (_p = materialSource.opacity) !== null && _p !== void 0 ? _p : 1, transparent: spriteTransparent, alphaTest: (_q = materialSource.alphaTest) !== null && _q !== void 0 ? _q : 0, depthTest: (_r = materialSource.depthTest) !== null && _r !== void 0 ? _r : false, depthWrite: (_s = materialSource.depthWrite) !== null && _s !== void 0 ? _s : false, toneMapped: (_t = materialSource.toneMapped) !== null && _t !== void 0 ? _t : true, onUpdate: material => {
                 material.needsUpdate = true;
             } }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true }), materialKey));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material' }, sharedProps, { normalMap: finalNormalMap !== null && finalNormalMap !== void 0 ? finalNormalMap : null, normalScale: finalNormalMap ? [(_s = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _s !== void 0 ? _s : 1, (_t = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _t !== void 0 ? _t : 1] : undefined }), materialKey));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material' }, sharedProps, { normalMap: finalNormalMap !== null && finalNormalMap !== void 0 ? finalNormalMap : null, normalScale: finalNormalMap ? [(_u = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _u !== void 0 ? _u : 1, (_v = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _v !== void 0 ? _v : 1] : undefined }), materialKey));
 }
 const MaterialComponent = {
     name: 'Material',

package/package.json

@@ -1,10 +1,28 @@
 {
 	"name": "react-three-game",
-	"version": "0.0.101",
+	"version": "0.0.103",
 	"description": "high performance 3D game engine built in React",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./plugins": {
+			"types": "./dist/plugins/index.d.ts",
+			"import": "./dist/plugins/index.js",
+			"default": "./dist/plugins/index.js"
+		},
+		"./plugins/crashcat": {
+			"types": "./dist/plugins/crashcat/index.d.ts",
+			"import": "./dist/plugins/crashcat/index.js",
+			"default": "./dist/plugins/crashcat/index.js"
+		},
+		"./package.json": "./package.json"
+	},
 	"files": [
 		"dist",
 		"README.md",
@@ -30,7 +48,13 @@
 		"react": ">=18.0.0",
 		"react-dom": ">=18.0.0",
 		"three": ">=0.182.0",
-		"three-text": ">=0.4.4"
+		"three-text": ">=0.4.4",
+		"crashcat": ">=0.0.4"
+	},
+	"peerDependenciesMeta": {
+		"crashcat": {
+			"optional": true
+		}
 	},
 	"devDependencies": {
 		"@react-three/drei": "^10.7.7",
@@ -39,6 +63,7 @@
 		"@types/react-dom": "^19.2.3",
 		"@types/three": "^0.182.0",
 		"concurrently": "^9.2.1",
+		"crashcat": "^0.0.4",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"three": "^0.184.0",