save

Author: prnthh

docs/app/components/Dropdown.tsx

@@ -14,7 +14,7 @@ export default function Dropdown() {
     const options: DemoOption[] = [
         { label: "Viewer", href: "/demo" },
         { label: "Asset Viewer", href: "/demo/assetviewer" },
-        { label: "Custom Editor", href: "/demo/customeditor" },
+        { label: "Custom Component", href: "/demo/customcomponent" },
         { label: "World", href: "/demo/world" },
         { label: "Physics", href: "/demo/physics" },
         { label: "Quake", href: "/demo/quake" },

docs/app/demo/customcomponent/RotatorComponent.tsx

@@ -0,0 +1,65 @@
+import { Component, FieldRenderer, FieldDefinition } from "react-three-game";
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+import { Group } from "three";
+
+const rotatorFields: FieldDefinition[] = [
+    { name: 'speed', type: 'number', label: 'Rotation Speed', step: 0.1 },
+    {
+        name: 'axis',
+        type: 'select',
+        label: 'Rotation Axis',
+        options: [
+            { value: 'x', label: 'X' },
+            { value: 'y', label: 'Y' },
+            { value: 'z', label: 'Z' },
+        ],
+    },
+];
+
+function RotatorComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return (
+        <FieldRenderer
+            fields={rotatorFields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
+    );
+}
+
+// The view component for Rotator
+function RotatorView({ properties, children }: { properties: any; children?: React.ReactNode }) {
+    const groupRef = useRef<Group>(null);
+    const speed = properties.speed ?? 1.0;
+    const axis = properties.axis ?? 'y';
+
+    useFrame((state, delta) => {
+        if (groupRef.current) {
+            if (axis === 'x') {
+                groupRef.current.rotation.x += delta * speed;
+            } else if (axis === 'y') {
+                groupRef.current.rotation.y += delta * speed;
+            } else if (axis === 'z') {
+                groupRef.current.rotation.z += delta * speed;
+            }
+        }
+    });
+
+    return (
+        <group ref={groupRef}>
+            {children}
+        </group>
+    );
+}
+
+const RotatorComponent: Component = {
+    name: 'Rotator',
+    Editor: RotatorComponentEditor,
+    View: RotatorView,
+    defaultProperties: {
+        speed: 1.0,
+        axis: 'y'
+    }
+};
+
+export default RotatorComponent;

docs/app/demo/customeditor/page.tsx docs/app/demo/customcomponent/page.tsxdocs/app/demo/customeditor/page.tsx renamed to docs/app/demo/customcomponent/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { PrefabEditor, registerComponent } from "react-three-game";
-import rotatorDemo from "../../samples/rotator-demo.json";
-import RotatorComponent from "../../plugins/RotatorComponent";
+import RotatorComponent from "./RotatorComponent";
+import rotatorDemo from "./rotator-demo.json";
 
 // Register custom component before using the editor
 registerComponent(RotatorComponent);

docs/app/samples/rotator-demo.json …p/demo/customcomponent/rotator-demo.jsondocs/app/samples/rotator-demo.json renamed to docs/app/demo/customcomponent/rotator-demo.json docs/app/samples/rotator-demo.json renamed to docs/app/demo/customcomponent/rotator-demo.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",