react-three-game 0.0.59 → 0.0.61

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

@@ -1,188 +0,0 @@
-import { RigidBody, RapierRigidBody, useRapier } from "@react-three/rapier";
-import type { RigidBodyOptions, CollisionPayload, IntersectionEnterPayload, IntersectionExitPayload } from "@react-three/rapier";
-import type { ReactNode } from 'react';
-import { useRef, useEffect, useCallback } from 'react';
-import { Component } from "./ComponentRegistry";
-import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
-import { ComponentData } from "../types";
-import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
-
-export type PhysicsProps = RigidBodyOptions & {
-    activeCollisionTypes?: 'all' | undefined;
-};
-
-function PhysicsComponentEditor({ component, onUpdate }: { component: ComponentData; onUpdate: (newComp: any) => void }) {
-    return (
-        <FieldGroup>
-            <SelectField
-                name="type"
-                label="Type"
-                values={component.properties}
-                onChange={onUpdate}
-                options={[
-                    { value: 'dynamic', label: 'Dynamic' },
-                    { value: 'fixed', label: 'Fixed' },
-                    { value: 'kinematicPosition', label: 'Kinematic Position' },
-                    { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
-                ]}
-            />
-            <SelectField
-                name="colliders"
-                label="Collider"
-                values={component.properties}
-                onChange={onUpdate}
-                options={[
-                    { value: 'hull', label: 'Hull (convex)' },
-                    { value: 'trimesh', label: 'Trimesh (exact)' },
-                    { value: 'cuboid', label: 'Cuboid (box)' },
-                    { value: 'ball', label: 'Ball (sphere)' },
-                ]}
-            />
-            <NumberField name="mass" label="Mass" values={component.properties} onChange={onUpdate} fallback={1} step={0.1} min={0} />
-            <NumberField name="restitution" label="Restitution (Bounciness)" values={component.properties} onChange={onUpdate} fallback={0} min={0} max={1} step={0.1} />
-            <NumberField name="friction" label="Friction" values={component.properties} onChange={onUpdate} fallback={0.5} min={0} step={0.1} />
-            <NumberField name="linearDamping" label="Linear Damping" values={component.properties} onChange={onUpdate} fallback={0} min={0} step={0.1} />
-            <NumberField name="angularDamping" label="Angular Damping" values={component.properties} onChange={onUpdate} fallback={0} min={0} step={0.1} />
-            <NumberField name="gravityScale" label="Gravity Scale" values={component.properties} onChange={onUpdate} fallback={1} step={0.1} />
-            <BooleanField name="sensor" label="Sensor (Trigger Only)" values={component.properties} onChange={onUpdate} fallback={false} />
-            <SelectField
-                name="activeCollisionTypes"
-                label="Collision Detection"
-                values={component.properties}
-                onChange={onUpdate}
-                options={[
-                    { value: '', label: 'Default (Dynamic only)' },
-                    { value: 'all', label: 'All (includes kinematic & fixed)' },
-                ]}
-            />
-        </FieldGroup>
-    );
-}
-
-interface PhysicsViewProps {
-    properties: PhysicsProps;
-    editMode?: boolean;
-    children?: ReactNode;
-    position?: [number, number, number];
-    rotation?: [number, number, number];
-    scale?: [number, number, number];
-    nodeId?: string;
-    registerRigidBodyRef?: (id: string, rb: RapierRigidBody | null) => void;
-}
-
-function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }: PhysicsViewProps) {
-    const { type, colliders, sensor, activeCollisionTypes, ...otherProps } = properties;
-    const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
-    const rigidBodyRef = useRef<RapierRigidBody>(null);
-
-    // Try to get rapier context - will be null if not inside <Physics>
-    let rapier: any = null;
-    try {
-        const rapierContext = useRapier();
-        rapier = rapierContext.rapier;
-    } catch (e) {
-        // Not inside Physics context - that's ok, just won't have rapier features
-    }
-
-    // Register RigidBody ref when it's available
-    useEffect(() => {
-        if (nodeId && registerRigidBodyRef && rigidBodyRef.current) {
-            registerRigidBodyRef(nodeId, rigidBodyRef.current);
-        }
-        return () => {
-            if (nodeId && registerRigidBodyRef) {
-                registerRigidBodyRef(nodeId, null);
-            }
-        };
-    }, [nodeId, registerRigidBodyRef]);
-
-    // Configure active collision types for kinematic/sensor bodies
-    useEffect(() => {
-        if (activeCollisionTypes === 'all' && rigidBodyRef.current && rapier) {
-            const rb = rigidBodyRef.current;
-            // Apply to all colliders on this rigid body
-            for (let i = 0; i < rb.numColliders(); i++) {
-                const collider = rb.collider(i);
-                collider.setActiveCollisionTypes(
-                    rapier.ActiveCollisionTypes.DEFAULT |
-                    rapier.ActiveCollisionTypes.KINEMATIC_FIXED |
-                    rapier.ActiveCollisionTypes.KINEMATIC_KINEMATIC
-                );
-            }
-        }
-    }, [activeCollisionTypes, rapier, type, colliders]);
-
-    // Event handlers for physics interactions
-    const handleIntersectionEnter = useCallback((payload: IntersectionEnterPayload) => {
-        if (!nodeId) return;
-        gameEvents.emit('sensor:enter', {
-            sourceEntityId: nodeId,
-            targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
-            targetRigidBody: payload.other.rigidBody,
-        });
-    }, [nodeId]);
-
-    const handleIntersectionExit = useCallback((payload: IntersectionExitPayload) => {
-        if (!nodeId) return;
-        gameEvents.emit('sensor:exit', {
-            sourceEntityId: nodeId,
-            targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
-            targetRigidBody: payload.other.rigidBody,
-        });
-    }, [nodeId]);
-
-    const handleCollisionEnter = useCallback((payload: CollisionPayload) => {
-        if (!nodeId) return;
-        gameEvents.emit('collision:enter', {
-            sourceEntityId: nodeId,
-            targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
-            targetRigidBody: payload.other.rigidBody,
-        });
-    }, [nodeId]);
-
-    const handleCollisionExit = useCallback((payload: CollisionPayload) => {
-        if (!nodeId) return;
-        gameEvents.emit('collision:exit', {
-            sourceEntityId: nodeId,
-            targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
-            targetRigidBody: payload.other.rigidBody,
-        });
-    }, [nodeId]);
-
-    // In edit mode, include position/rotation in key to force remount when transform changes
-    // This ensures the RigidBody debug visualization updates even when physics is paused
-    const rbKey = editMode
-        ? `${type || 'dynamic'}_${colliderType}_${position?.join(',')}_${rotation?.join(',')}`
-        : `${type || 'dynamic'}_${colliderType}`;
-
-    return (
-        <RigidBody
-            key={rbKey}
-            ref={rigidBodyRef}
-            type={type}
-            colliders={colliderType as any}
-            position={position}
-            rotation={rotation}
-            scale={scale}
-            sensor={sensor}
-            userData={{ entityId: nodeId }}
-            onIntersectionEnter={handleIntersectionEnter}
-            onIntersectionExit={handleIntersectionExit}
-            onCollisionEnter={handleCollisionEnter}
-            onCollisionExit={handleCollisionExit}
-            {...otherProps}
-        >
-            {children}
-        </RigidBody>
-    );
-}
-
-const PhysicsComponent: Component = {
-    name: 'Physics',
-    Editor: PhysicsComponentEditor,
-    View: PhysicsComponentView,
-    nonComposable: true,
-    defaultProperties: { type: 'dynamic', colliders: 'hull' }
-};
-
-export default PhysicsComponent;

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

@@ -1,109 +0,0 @@
-import { Component } from "./ComponentRegistry";
-import { useRef, useEffect, useMemo, useState } from "react";
-import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
-import { SpotLight, SpotLightHelper } from "three";
-import { useFrame } from "@react-three/fiber";
-
-const spotLightDefaults = {
-    color: '#ffffff',
-    intensity: 1,
-    angle: Math.PI / 6,
-    penumbra: 0.5,
-    distance: 100,
-    castShadow: true,
-};
-
-function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    const values = { ...spotLightDefaults, ...component.properties };
-
-    return (
-        <FieldGroup>
-            <ColorField name="color" label="Color" values={values} onChange={onUpdate} />
-            <NumberField name="intensity" label="Intensity" values={values} onChange={onUpdate} min={0} step={0.1} fallback={1} />
-            <NumberField name="angle" label="Angle" values={values} onChange={onUpdate} min={0} max={Math.PI} step={0.05} fallback={Math.PI / 6} />
-            <NumberField name="penumbra" label="Penumbra" values={values} onChange={onUpdate} min={0} max={1} step={0.05} fallback={0.5} />
-            <NumberField name="distance" label="Distance" values={values} onChange={onUpdate} min={0} step={1} fallback={100} />
-            <BooleanField name="castShadow" label="Cast Shadow" values={values} onChange={onUpdate} fallback={true} />
-        </FieldGroup>
-    );
-}
-
-function SpotLightView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
-    const merged = { ...spotLightDefaults, ...properties };
-    const color = merged.color;
-    const intensity = merged.intensity;
-    const angle = merged.angle;
-    const penumbra = merged.penumbra;
-    const distance = merged.distance;
-    const castShadow = merged.castShadow;
-
-    const spotLightRef = useRef<SpotLight>(null);
-    const targetRef = useRef<any>(null);
-    const [spotLight, setSpotLight] = useState<SpotLight | null>(null);
-    const spotLightHelper = useMemo(
-        () => spotLight ? new SpotLightHelper(spotLight, color) : null,
-        [spotLight, color]
-    );
-
-    useEffect(() => {
-        return () => {
-            spotLightHelper?.dispose();
-        };
-    }, [spotLightHelper]);
-
-    useEffect(() => {
-        if (spotLightRef.current && targetRef.current) {
-            spotLightRef.current.target = targetRef.current;
-            setSpotLight(spotLightRef.current);
-        }
-    }, []);
-
-    useFrame(() => {
-        if (spotLightHelper && editMode && isSelected) {
-            spotLightHelper.update();
-        }
-    });
-
-    return (
-        <>
-            <spotLight
-                ref={spotLightRef}
-                color={color}
-                intensity={intensity}
-                angle={angle}
-                penumbra={penumbra}
-                distance={distance}
-                castShadow={castShadow}
-                shadow-mapSize-width={1024}
-                shadow-mapSize-height={1024}
-                shadow-bias={-0.0001}
-                shadow-normalBias={0.02}
-            />
-            {editMode && isSelected && spotLightHelper && (
-                <primitive object={spotLightHelper} />
-            )}
-            <object3D ref={targetRef} position={[0, -5, 0]} />
-            {editMode && (
-                <>
-                    <mesh>
-                        <sphereGeometry args={[0.2, 8, 6]} />
-                        <meshBasicMaterial color={color} wireframe />
-                    </mesh>
-                    <mesh position={[0, -5, 0]}>
-                        <sphereGeometry args={[0.15, 8, 6]} />
-                        <meshBasicMaterial color={color} wireframe opacity={0.5} transparent />
-                    </mesh>
-                </>
-            )}
-        </>
-    );
-}
-
-const SpotLightComponent: Component = {
-    name: 'SpotLight',
-    Editor: SpotLightComponentEditor,
-    View: SpotLightView,
-    defaultProperties: spotLightDefaults
-};
-
-export default SpotLightComponent;

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

@@ -1,137 +0,0 @@
-import { Component } from "./ComponentRegistry";
-import { ColorField, FieldGroup, NumberField, SelectField, StringField } from "./Input";
-import { Text } from 'three-text/three/react';
-import { useRef, useState, useCallback } from 'react';
-import { BufferGeometry, Mesh } from "three";
-
-// Initialize HarfBuzz path for font shaping
-Text.setHarfBuzzPath('/fonts/hb.wasm');
-
-function TextComponentEditor({
-    component,
-    onUpdate,
-}: {
-    component: any;
-    onUpdate: (newProps: any) => void;
-}) {
-    return (
-        <FieldGroup>
-            <StringField
-                name="text"
-                label="Text"
-                values={component.properties}
-                onChange={onUpdate}
-                placeholder="Enter text..."
-            />
-            <ColorField
-                name="color"
-                label="Color"
-                values={component.properties}
-                onChange={onUpdate}
-            />
-            <StringField
-                name="font"
-                label="Font"
-                values={component.properties}
-                onChange={onUpdate}
-                placeholder="/fonts/NotoSans-Regular.ttf"
-            />
-            <NumberField
-                name="size"
-                label="Size"
-                values={component.properties}
-                onChange={onUpdate}
-                min={0.01}
-                step={0.1}
-            />
-            <NumberField
-                name="depth"
-                label="Depth"
-                values={component.properties}
-                onChange={onUpdate}
-                min={0}
-                step={0.1}
-            />
-            <NumberField
-                name="width"
-                label="Width"
-                values={component.properties}
-                onChange={onUpdate}
-                min={0}
-                step={0.5}
-            />
-            <SelectField
-                name="align"
-                label="Align"
-                values={component.properties}
-                onChange={onUpdate}
-                options={[
-                    { value: 'left', label: 'Left' },
-                    { value: 'center', label: 'Center' },
-                    { value: 'right', label: 'Right' },
-                ]}
-            />
-        </FieldGroup>
-    );
-}
-
-function TextComponentView({ properties }: { properties: any }) {
-    const { text = '', font, size, depth, width, align, color } = properties;
-    const textContent = String(text || '');
-    const meshRef = useRef<Mesh>(null);
-    const [offset, setOffset] = useState<[number, number, number]>([0, 0, 0]);
-
-    const handleLoad = useCallback((_geometry: BufferGeometry, info: any) => {
-        if (info?.planeBounds) {
-            const bounds = info.planeBounds;
-            // Calculate X offset based on alignment
-            let centerX = 0;
-            if (align === 'center') {
-                centerX = -(bounds.min.x + bounds.max.x) / 2;
-            } else if (align === 'right') {
-                centerX = -bounds.max.x;
-            } else {
-                // left alignment
-                centerX = -bounds.min.x;
-            }
-            const centerY = -(bounds.min.y + bounds.max.y) / 2;
-            setOffset([centerX, centerY, 0]);
-        }
-    }, [align]);
-
-    if (!textContent) return null;
-
-    return (
-        <group position={offset}>
-            <Text
-                ref={meshRef}
-                font={font}
-                size={size}
-                depth={depth}
-                layout={{ align, width }}
-                color={color}
-                onLoad={handleLoad}
-            >
-                {textContent}
-            </Text>
-        </group>
-    );
-}
-
-const TextComponent: Component = {
-    name: 'Text',
-    Editor: TextComponentEditor,
-    View: TextComponentView,
-    nonComposable: true,
-    defaultProperties: {
-        text: 'Hello World',
-        color: '#888888',
-        font: '/fonts/NotoSans-Regular.ttf',
-        size: 0.5,
-        depth: 0,
-        width: 5,
-        align: 'center',
-    }
-};
-
-export default TextComponent;

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

@@ -1,173 +0,0 @@
-import { Component } from "./ComponentRegistry";
-import { Label, Vector3Field, Vector3Input } from "./Input";
-import { useEditorContext } from "../EditorContext";
-import { colors } from "../styles";
-
-const buttonStyle = {
-    padding: '4px 8px',
-    background: colors.bgSurface,
-    color: colors.text,
-    border: `1px solid ${colors.border}`,
-    borderRadius: 3,
-    cursor: 'pointer',
-    font: 'inherit',
-    fontSize: 11,
-    flex: 1,
-};
-
-function TransformModeSelector({
-    transformMode,
-    setTransformMode,
-    snapResolution,
-    setSnapResolution
-}: {
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
-    snapResolution: number;
-    setSnapResolution: (v: number) => void;
-}) {
-    return (
-        <div style={{ marginBottom: 8 }}>
-            <Label>Transform Mode {snapResolution > 0 && `(Snap: ${snapResolution})`}</Label>
-            <div style={{ display: 'flex', gap: 6 }}>
-                {["translate", "rotate", "scale"].map(mode => {
-                    const isActive = transformMode === mode;
-                    return (
-                        <button
-                            key={mode}
-                            onClick={() => setTransformMode(mode as any)}
-                            style={{
-                                ...buttonStyle,
-                                background: isActive ? colors.accentBg : colors.bgSurface,
-                                borderColor: isActive ? colors.accentBorder : colors.border,
-                                color: isActive ? colors.accent : colors.text,
-                            }}
-                            onPointerEnter={(e) => {
-                                if (!isActive) e.currentTarget.style.background = colors.bgHover;
-                            }}
-                            onPointerLeave={(e) => {
-                                if (!isActive) e.currentTarget.style.background = colors.bgSurface;
-                            }}
-                        >
-                            {mode}
-                        </button>
-                    );
-                })}
-            </div>
-            <div style={{ marginTop: 6 }}>
-                <button
-                    onClick={() => setSnapResolution(snapResolution > 0 ? 0 : 0.1)}
-                    style={{
-                        ...buttonStyle,
-                        background: snapResolution > 0 ? colors.accentBg : colors.bgSurface,
-                        borderColor: snapResolution > 0 ? colors.accentBorder : colors.border,
-                        color: snapResolution > 0 ? colors.accent : colors.text,
-                        width: '100%',
-                    }}
-                    onPointerEnter={(e) => {
-                        if (snapResolution === 0) e.currentTarget.style.background = colors.bgHover;
-                    }}
-                    onPointerLeave={(e) => {
-                        if (snapResolution === 0) e.currentTarget.style.background = colors.bgSurface;
-                    }}
-                >
-                    Snap: {snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'}
-                </button>
-            </div>
-        </div>
-    );
-}
-
-const snapLockBtnStyle: React.CSSProperties = {
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0 2px',
-    fontSize: 12,
-    lineHeight: 1,
-    color: colors.textMuted,
-};
-
-function SnapLockButton({ locked, onToggle, title }: { locked: boolean; onToggle: () => void; title: string }) {
-    return (
-        <button style={snapLockBtnStyle} onClick={onToggle} title={title}>
-            {locked ? '🔒' : '🔓'}
-        </button>
-    );
-}
-
-function TransformComponentEditor({ component, onUpdate }: {
-    component: any;
-    onUpdate: (newComp: any) => void;
-}) {
-    const {
-        transformMode,
-        setTransformMode,
-        snapResolution,
-        setSnapResolution,
-        positionSnap,
-        setPositionSnap,
-        rotationSnap,
-        setRotationSnap
-    } = useEditorContext();
-
-    const positionSnapped = positionSnap > 0;
-    const rotationSnapped = rotationSnap > 0;
-
-    return (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <TransformModeSelector
-                transformMode={transformMode}
-                setTransformMode={setTransformMode}
-                snapResolution={snapResolution}
-                setSnapResolution={setSnapResolution}
-            />
-            <Vector3Input
-                label="Position"
-                value={component.properties.position ?? [0, 0, 0]}
-                onChange={v => onUpdate({ position: v })}
-                snap={positionSnap}
-                labelExtra={
-                    <SnapLockButton
-                        locked={positionSnapped}
-                        onToggle={() => setPositionSnap(positionSnapped ? 0 : 0.5)}
-                        title={positionSnapped ? `Snap ON (0.5) — click to disable` : `Snap OFF — click to enable (0.5)`}
-                    />
-                }
-            />
-            <Vector3Input
-                label="Rotation"
-                value={component.properties.rotation ?? [0, 0, 0]}
-                onChange={v => onUpdate({ rotation: v })}
-                snap={rotationSnap}
-                labelExtra={
-                    <SnapLockButton
-                        locked={rotationSnapped}
-                        onToggle={() => setRotationSnap(rotationSnapped ? 0 : Math.PI / 4)}
-                        title={rotationSnapped ? `Snap ON (π/4) — click to disable` : `Snap OFF — click to enable (π/4)`}
-                    />
-                }
-            />
-            <Vector3Field
-                name="scale"
-                label="Scale"
-                values={component.properties}
-                onChange={onUpdate}
-                fallback={[1, 1, 1]}
-            />
-        </div>
-    );
-}
-
-const TransformComponent: Component = {
-    name: 'Transform',
-    Editor: TransformComponentEditor,
-    nonComposable: true,
-    defaultProperties: {
-        position: [0, 0, 0],
-        rotation: [0, 0, 0],
-        scale: [1, 1, 1]
-    }
-};
-
-export default TransformComponent;

package/src/tools/prefabeditor/components/index.ts

@@ -1,26 +0,0 @@
-import GeometryComponent from './GeometryComponent';
-import TransformComponent from './TransformComponent';
-import MaterialComponent from './MaterialComponent';
-import PhysicsComponent from './PhysicsComponent';
-import SpotLightComponent from './SpotLightComponent';
-import DirectionalLightComponent from './DirectionalLightComponent';
-import AmbientLightComponent from './AmbientLightComponent';
-import ModelComponent from './ModelComponent';
-import TextComponent from './TextComponent';
-import EnvironmentComponent from './EnvironmentComponent';
-import CameraComponent from './CameraComponent';
-
-export default [
-    GeometryComponent,
-    TransformComponent,
-    MaterialComponent,
-    PhysicsComponent,
-    SpotLightComponent,
-    DirectionalLightComponent,
-    AmbientLightComponent,
-    ModelComponent,
-    TextComponent,
-    EnvironmentComponent,
-    CameraComponent,
-];
-

package/src/tools/prefabeditor/page.tsx

@@ -1,10 +0,0 @@
-import PrefabEditor from "./PrefabEditor";
-
-
-export default function PrefabEditorPage() {
-    return <div style={{ width: '100%', height: '100%' }}>
-        <PrefabEditor>
-            <directionalLight position={[5, 10, 7.5]} intensity={1} castShadow />
-        </PrefabEditor>
-    </div>
-}