react-three-game 0.0.60 → 0.0.62

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

@@ -1,34 +0,0 @@
-import { Component } from "./ComponentRegistry";
-import { ColorField, FieldGroup, NumberField } from "./Input";
-
-function AmbientLightComponentEditor({
-    component,
-    onUpdate,
-}: {
-    component: any;
-    onUpdate: (newProps: any) => void;
-}) {
-    return (
-        <FieldGroup>
-            <ColorField name="color" label="Color" values={component.properties} onChange={onUpdate} />
-            <NumberField name="intensity" label="Intensity" values={component.properties} onChange={onUpdate} min={0} step={0.1} fallback={1} />
-        </FieldGroup>
-    );
-}
-
-function AmbientLightComponentView({ properties }: { properties: any }) {
-    const { color = '#ffffff', intensity = 1 } = properties;
-    return <ambientLight color={color} intensity={intensity} />;
-}
-
-const AmbientLightComponent: Component = {
-    name: 'AmbientLight',
-    Editor: AmbientLightComponentEditor,
-    View: AmbientLightComponentView,
-    defaultProperties: {
-        color: '#ffffff',
-        intensity: 1,
-    },
-};
-
-export default AmbientLightComponent;

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

@@ -1,117 +0,0 @@
-import { PerspectiveCamera } from '@react-three/drei';
-import { useEffect, useMemo, useState } from 'react';
-import { CameraHelper, PerspectiveCamera as ThreePerspectiveCamera } from 'three';
-import { useFrame } from '@react-three/fiber';
-import { Component } from './ComponentRegistry';
-import { FieldGroup, NumberField } from './Input';
-
-const cameraDefaults = {
-    fov: 50,
-    near: 0.1,
-    zoom: 1,
-    far: 1000,
-};
-
-function CameraComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    const values = { ...cameraDefaults, ...component.properties };
-
-    return (
-        <FieldGroup>
-            <NumberField
-                name="fov"
-                label="FOV"
-                values={values}
-                onChange={onUpdate}
-                fallback={50}
-                min={1}
-                max={179}
-                step={1}
-            />
-            <NumberField
-                name="near"
-                label="Near"
-                values={values}
-                onChange={onUpdate}
-                fallback={0.1}
-                min={0.001}
-                step={0.1}
-            />
-            <NumberField
-                name="zoom"
-                label="Zoom"
-                values={values}
-                onChange={onUpdate}
-                fallback={1}
-                min={0.01}
-                step={0.1}
-            />
-            <NumberField
-                name="far"
-                label="Far"
-                values={values}
-                onChange={onUpdate}
-                fallback={1000}
-                min={0.1}
-                step={1}
-            />
-        </FieldGroup>
-    );
-}
-
-function CameraComponentView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
-    const merged = { ...cameraDefaults, ...properties };
-    const fov = merged.fov;
-    const near = merged.near;
-    const zoom = merged.zoom;
-    const far = merged.far;
-    const [camera, setCamera] = useState<ThreePerspectiveCamera | null>(null);
-    const cameraHelper = useMemo(
-        () => camera ? new CameraHelper(camera) : null,
-        [camera]
-    );
-
-    useEffect(() => {
-        return () => {
-            cameraHelper?.dispose();
-        };
-    }, [cameraHelper]);
-
-    useFrame(() => {
-        if (camera && cameraHelper && editMode && isSelected) {
-            camera.updateProjectionMatrix();
-            camera.updateMatrixWorld();
-            cameraHelper.update();
-        }
-    });
-
-    return (
-        <>
-            <PerspectiveCamera
-                ref={(instance) => setCamera(instance)}
-                makeDefault={!editMode}
-                fov={fov}
-                near={near}
-                zoom={zoom}
-                far={far}
-            />
-            {editMode && isSelected && cameraHelper && (
-                <primitive object={cameraHelper} />
-            )}
-            {editMode && !isSelected ? (
-                <mesh>
-                    <boxGeometry args={[0.34, 0.22, 0.18]} />
-                    <meshBasicMaterial color="#22d3ee" wireframe />
-                </mesh>
-            ) : null}
-        </>
-    );
-}
-
-const CameraComponent: Component = {
-    name: 'Camera',
-    Editor: CameraComponentEditor,
-    View: CameraComponentView,
-    defaultProperties: cameraDefaults,
-};
-
-export default CameraComponent;

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

@@ -1,40 +0,0 @@
-import { FC } from "react";
-import { ComponentData, GameObject } from "../types";
-
-export interface Component {
-    name: string;
-    Editor: FC<{
-        node?: GameObject;
-        component: ComponentData;
-        onUpdate: (newComp: any) => void;
-        basePath?: string;
-    }>;
-    defaultProperties: any;
-    // Allow View to accept extra props for special cases (like material)
-    View?: FC<any>;
-    // Non-composable components have special rendering logic in PrefabRoot
-    nonComposable?: boolean;
-}
-
-const REGISTRY: Record<string, Component> = {};
-
-export function registerComponent(component: Component) {
-    if (REGISTRY[component.name]) {
-        throw new Error(`Component with name ${component.name} already registered.`);
-    }
-    REGISTRY[component.name] = component;
-}
-
-export function getComponent(name: string): Component | undefined {
-    return REGISTRY[name];
-}
-
-export function getAllComponents(): Record<string, Component> {
-    return { ...REGISTRY };
-}
-
-export function getNonComposableKeys(): string[] {
-    return Object.values(REGISTRY)
-        .filter(c => c.nonComposable)
-        .map(c => c.name.toLowerCase());
-}

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

@@ -1,210 +0,0 @@
-import { Component } from "./ComponentRegistry";
-import { useRef, useEffect, useMemo, useState } from "react";
-import { useFrame } from "@react-three/fiber";
-import { CameraHelper, DirectionalLight, Object3D, OrthographicCamera, Vector3 } from "three";
-import { FieldRenderer, FieldDefinition, Input } from "./Input";
-
-const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 } as const;
-
-const directionalLightDefaults = {
-    color: '#ffffff',
-    intensity: 1,
-    castShadow: true,
-    shadowMapSize: 1024,
-    shadowCameraNear: 0.1,
-    shadowCameraFar: 100,
-    shadowCameraTop: 30,
-    shadowCameraBottom: -30,
-    shadowCameraLeft: -30,
-    shadowCameraRight: 30,
-    targetOffset: [0, -5, 0],
-};
-
-const directionalLightFields: FieldDefinition[] = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
-    { name: 'shadowMapSize', type: 'number', label: 'Shadow Map Size', step: 256, min: 256 },
-    {
-        name: '_shadowCamera',
-        type: 'custom',
-        label: 'Shadow Camera',
-        render: ({ values, onChangeMultiple }) => (
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
-                <div>
-                    <label style={smallLabel}>Near</label>
-                    <Input step={0.1} value={values.shadowCameraNear ?? 0.1} onChange={v => onChangeMultiple({ shadowCameraNear: v })} />
-                </div>
-                <div>
-                    <label style={smallLabel}>Far</label>
-                    <Input step={1} value={values.shadowCameraFar ?? 100} onChange={v => onChangeMultiple({ shadowCameraFar: v })} />
-                </div>
-                <div>
-                    <label style={smallLabel}>Top</label>
-                    <Input step={1} value={values.shadowCameraTop ?? 30} onChange={v => onChangeMultiple({ shadowCameraTop: v })} />
-                </div>
-                <div>
-                    <label style={smallLabel}>Bottom</label>
-                    <Input step={1} value={values.shadowCameraBottom ?? -30} onChange={v => onChangeMultiple({ shadowCameraBottom: v })} />
-                </div>
-                <div>
-                    <label style={smallLabel}>Left</label>
-                    <Input step={1} value={values.shadowCameraLeft ?? -30} onChange={v => onChangeMultiple({ shadowCameraLeft: v })} />
-                </div>
-                <div>
-                    <label style={smallLabel}>Right</label>
-                    <Input step={1} value={values.shadowCameraRight ?? 30} onChange={v => onChangeMultiple({ shadowCameraRight: v })} />
-                </div>
-            </div>
-        ),
-    },
-    {
-        name: 'targetOffset',
-        type: 'custom',
-        label: 'Target Offset',
-        render: ({ value, onChange }) => {
-            const offset = value ?? [0, -5, 0];
-            return (
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
-                    <div>
-                        <label style={smallLabel}>X</label>
-                        <Input step={0.5} value={offset[0]} onChange={v => onChange([v, offset[1], offset[2]])} />
-                    </div>
-                    <div>
-                        <label style={smallLabel}>Y</label>
-                        <Input step={0.5} value={offset[1]} onChange={v => onChange([offset[0], v, offset[2]])} />
-                    </div>
-                    <div>
-                        <label style={smallLabel}>Z</label>
-                        <Input step={0.5} value={offset[2]} onChange={v => onChange([offset[0], offset[1], v])} />
-                    </div>
-                </div>
-            );
-        },
-    },
-];
-
-function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    const values = { ...directionalLightDefaults, ...component.properties };
-    const fields = values.castShadow
-        ? directionalLightFields
-        : directionalLightFields.filter(field => field.name !== '_shadowCamera');
-
-    return (
-        <FieldRenderer
-            fields={fields}
-            values={values}
-            onChange={onUpdate}
-        />
-    );
-}
-
-function DirectionalLightView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
-    const merged = { ...directionalLightDefaults, ...properties };
-    const color = merged.color;
-    const intensity = merged.intensity;
-    const castShadow = merged.castShadow;
-    const shadowMapSize = merged.shadowMapSize;
-    const shadowCameraNear = merged.shadowCameraNear;
-    const shadowCameraFar = merged.shadowCameraFar;
-    const shadowCameraTop = merged.shadowCameraTop;
-    const shadowCameraBottom = merged.shadowCameraBottom;
-    const shadowCameraLeft = merged.shadowCameraLeft;
-    const shadowCameraRight = merged.shadowCameraRight;
-    const targetOffset = merged.targetOffset;
-
-    const directionalLightRef = useRef<DirectionalLight>(null);
-    const targetRef = useRef<Object3D>(null);
-    const [shadowCamera, setShadowCamera] = useState<OrthographicCamera | null>(null);
-    const shadowCameraHelper = useMemo(
-        () => shadowCamera ? new CameraHelper(shadowCamera) : null,
-        [shadowCamera]
-    );
-
-    useEffect(() => {
-        return () => {
-            shadowCameraHelper?.dispose();
-        };
-    }, [shadowCameraHelper]);
-
-    // Use a local target object so node transforms rotate the light direction naturally.
-    useEffect(() => {
-        if (directionalLightRef.current && targetRef.current) {
-            directionalLightRef.current.target = targetRef.current;
-            setShadowCamera(directionalLightRef.current.shadow.camera);
-        }
-    }, []);
-
-    useFrame(() => {
-        if (!directionalLightRef.current || !targetRef.current) return;
-
-        directionalLightRef.current.target.updateMatrixWorld();
-
-        if (shadowCamera && shadowCameraHelper && castShadow) {
-            shadowCamera.updateProjectionMatrix();
-            shadowCamera.updateMatrixWorld();
-            shadowCameraHelper.update();
-        }
-    });
-
-    return (
-        <>
-            <directionalLight
-                ref={directionalLightRef}
-                color={color}
-                intensity={intensity}
-                castShadow={castShadow}
-                shadow-mapSize-width={shadowMapSize}
-                shadow-mapSize-height={shadowMapSize}
-                shadow-camera-near={shadowCameraNear}
-                shadow-camera-far={shadowCameraFar}
-                shadow-camera-top={shadowCameraTop}
-                shadow-camera-bottom={shadowCameraBottom}
-                shadow-camera-left={shadowCameraLeft}
-                shadow-camera-right={shadowCameraRight}
-                shadow-bias={-0.001}
-                shadow-normalBias={0.02}
-            />
-            <object3D ref={targetRef} position={targetOffset as [number, number, number]} />
-            {editMode && isSelected && castShadow && shadowCameraHelper && (
-                <primitive object={shadowCameraHelper} />
-            )}
-            {editMode && isSelected && (
-                <>
-                    {/* Light source indicator */}
-                    <mesh>
-                        <sphereGeometry args={[0.3, 8, 6]} />
-                        <meshBasicMaterial color={color} wireframe />
-                    </mesh>
-                    {/* Target indicator */}
-                    <mesh position={targetOffset as [number, number, number]}>
-                        <sphereGeometry args={[0.2, 8, 6]} />
-                        <meshBasicMaterial color={color} wireframe opacity={0.5} transparent />
-                    </mesh>
-                    {/* Direction line */}
-                    <line>
-                        <bufferGeometry
-                            onUpdate={(geo) => {
-                                const points = [
-                                    new Vector3(0, 0, 0),
-                                    new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
-                                ];
-                                geo.setFromPoints(points);
-                            }}
-                        />
-                        <lineBasicMaterial color={color} opacity={0.6} transparent />
-                    </line>
-                </>
-            )}
-        </>
-    );
-}
-
-const DirectionalLightComponent: Component = {
-    name: 'DirectionalLight',
-    Editor: DirectionalLightComponentEditor,
-    View: DirectionalLightView,
-    defaultProperties: directionalLightDefaults
-};
-
-export default DirectionalLightComponent;

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

@@ -1,47 +0,0 @@
-import { Environment } from '@react-three/drei';
-import { Component } from './ComponentRegistry';
-import { FieldGroup, NumberField } from './Input';
-import { Object3D, Texture } from 'three';
-
-function EnvironmentView({
-    properties,
-    children,
-    editMode,
-    loadedTextures,
-    loadedModels,
-}: {
-    properties: any;
-    children?: React.ReactNode;
-    editMode?: boolean;
-    loadedTextures?: Record<string, Texture>;
-    loadedModels?: Record<string, Object3D>;
-}) {
-    const { intensity = 1, resolution = 256 } = properties;
-    const assetRevision = `${Object.keys(loadedTextures ?? {}).sort().join('|')}::${Object.keys(loadedModels ?? {}).sort().join('|')}`;
-
-    return (
-        <Environment
-            key={assetRevision}
-            background={true}
-            environmentIntensity={intensity}
-            resolution={resolution}
-            frames={editMode ? undefined : 1}
-        >
-            {children}
-        </Environment>
-    );
-}
-
-const EnvironmentComponent: Component = {
-    name: 'Environment',
-    Editor: ({ component, onUpdate }) => (
-        <FieldGroup>
-            <NumberField name="intensity" label="Intensity" values={component.properties} onChange={onUpdate} min={0} step={0.1} fallback={1} />
-            <NumberField name="resolution" label="Resolution" values={component.properties} onChange={onUpdate} min={64} step={64} fallback={256} />
-        </FieldGroup>
-    ),
-    View: EnvironmentView,
-    defaultProperties: {},
-};
-
-export default EnvironmentComponent;

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

@@ -1,133 +0,0 @@
-import { Component } from "./ComponentRegistry";
-import { FieldGroup, NumberField, SelectField } from "./Input";
-
-const GEOMETRY_ARGS: Record<string, {
-    fields: Array<{
-        name: string;
-        label: string;
-        defaultValue: number;
-        min?: number;
-        step?: number;
-    }>;
-}> = {
-    box: {
-        fields: [
-            { name: 'width', label: 'Width', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'depth', label: 'Depth', defaultValue: 1, min: 0.01, step: 0.1 },
-        ],
-    },
-    sphere: {
-        fields: [
-            { name: 'radius', label: 'Radius', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'widthSegments', label: 'Width Segments', defaultValue: 32, min: 3, step: 1 },
-            { name: 'heightSegments', label: 'Height Segments', defaultValue: 16, min: 2, step: 1 },
-        ],
-    },
-    plane: {
-        fields: [
-            { name: 'width', label: 'Width', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
-        ],
-    },
-    cylinder: {
-        fields: [
-            { name: 'radiusTop', label: 'Radius Top', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'radiusBottom', label: 'Radius Bottom', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
-            { name: 'radialSegments', label: 'Radial Segments', defaultValue: 32, min: 3, step: 1 },
-        ],
-    },
-};
-
-function getDefaultArgs(geometryType: string) {
-    return (GEOMETRY_ARGS[geometryType]?.fields ?? []).map(field => field.defaultValue);
-}
-
-function GeometryComponentEditor({
-    component,
-    onUpdate,
-}: {
-    component: any;
-    onUpdate: (newProps: any) => void;
-}) {
-    const geometryType = component.properties.geometryType ?? 'box';
-    const schema = GEOMETRY_ARGS[geometryType] ?? GEOMETRY_ARGS.box;
-    const args = component.properties.args ?? getDefaultArgs(geometryType);
-
-    // Handle geometry type change to reset args
-    const handleChange = (newValues: Record<string, any>) => {
-        if ('geometryType' in newValues && newValues.geometryType !== geometryType) {
-            onUpdate({ geometryType: newValues.geometryType, args: getDefaultArgs(newValues.geometryType) });
-        } else {
-            onUpdate(newValues);
-        }
-    };
-
-    const updateArg = (index: number, value: number) => {
-        const next = [...args];
-        next[index] = value;
-        onUpdate({ args: next });
-    };
-
-    return (
-        <FieldGroup>
-            <SelectField
-                name="geometryType"
-                label="Type"
-                values={component.properties}
-                onChange={handleChange}
-                options={[
-                    { value: 'box', label: 'Box' },
-                    { value: 'sphere', label: 'Sphere' },
-                    { value: 'plane', label: 'Plane' },
-                    { value: 'cylinder', label: 'Cylinder' },
-                ]}
-            />
-            {schema.fields.map((field, index) => (
-                <NumberField
-                    key={field.name}
-                    name={field.name}
-                    label={field.label}
-                    values={{ [field.name]: args[index] ?? field.defaultValue }}
-                    onChange={(next) => updateArg(index, next[field.name])}
-                    fallback={field.defaultValue}
-                    min={field.min}
-                    step={field.step}
-                />
-            ))}
-        </FieldGroup>
-    );
-}
-
-
-// View for Geometry component
-function GeometryComponentView({ properties, children }: { properties: any, children?: React.ReactNode }) {
-    const { geometryType, args = [] } = properties;
-    // Only return the geometry node, do not wrap in mesh or group
-    switch (geometryType) {
-        case "box":
-            return <boxGeometry args={args as [number, number, number]} />;
-        case "sphere":
-            return <sphereGeometry args={args as [number, number?, number?]} />;
-        case "plane":
-            return <planeGeometry args={args as [number, number]} />;
-        case "cylinder":
-            return <cylinderGeometry args={args as [number, number, number, number?]} />;
-        default:
-            return <boxGeometry args={[1, 1, 1]} />;
-    }
-}
-
-const GeometryComponent: Component = {
-    name: 'Geometry',
-    Editor: GeometryComponentEditor,
-    View: GeometryComponentView,
-    nonComposable: true,
-    defaultProperties: {
-        geometryType: 'box',
-        args: getDefaultArgs('box'),
-    }
-};
-
-export default GeometryComponent;