React Three Game

What it does

This skill, react-three-game, dynamically generates interactive Three.js game scenes within a React frontend environment based on text prompts or provided JSON structures. It simplifies the process of creating unique and engaging experiences by allowing users to define scene elements and their properties through prefabs and custom components. The skill provides tools for building, editing, and rendering these 3D scenes directly within your application.

When to use it

• Creating interactive product demos or visualizations in a web browser.
• Developing simple games or educational experiences using Three.js.
• Rapidly prototyping 3D environments based on textual descriptions.
• Building custom components and extending the core scene functionality.
• Experimenting with different scene layouts and configurations through prefab editing.

Key capabilities

• Prefab Creation: Build JSON prefabs that define the structure of your game scenes.
• Scene Graph Management: Organize and manipulate objects within a hierarchical scene graph.
• Custom Component Registration: Add custom components to control object behavior and appearance.
• Prefab Editor: Edit existing scenes visually using the PrefabEditor.
• Direct Three.js/Rapier Access: Provides access for direct manipulation of the underlying Three.js or Rapier physics engine.

Example prompts

• "Create a scene with a crate at position [0, 1, 0]."
• "Generate a prefab named 'MyScene' with a box geometry and orange material."
• "Register a new component called 'CustomBehavior' that rotates the object slowly."

Tips & gotchas

• Component keys in JSON must be lowercase.
• Rotation values are expressed in radians, not degrees.
• Asset paths for textures or models should be relative to /public.
• Use crypto.randomUUID() when generating new node IDs.