Connecting to dev server...

Circuitry Logo
Circuitry
Open Editor

3D Node User Guide

The 3D Node enables you to create and display Three.js animations and interactive 3D scenes directly within your workflows. It works seamlessly with the Code Wizard to generate 3D content using natural language prompts.

Overview

The 3D Node has two rendering modes:

  • Vanilla Three.js: For animations, simulations, and procedural generation
  • React Three Fiber: For interactive 3D viewing with orbit controls

The node automatically detects which mode to use based on your code, or you can manually specify it in the configuration.

Quick Start

Step 1: Add a Code Node

  1. Drag a Code node from the sidebar onto the canvas
  2. Click the Code Wizard button (sparkles icon)

Step 2: Generate Three.js Code

Enter a prompt describing what you want to create. The wizard will automatically detect Three.js requests.

Step 3: Add a 3D Node

  1. Drag a 3D node from the sidebar
  2. Connect the Code node's output to the 3D node's input
  3. The 3D scene will automatically render

Code Wizard Examples

Animated Scenes (Vanilla Three.js)

Example 1: Bouncing Ball Animation

Prompt: "Create a bouncing ball animation in Three.js with a red sphere that bounces up and down"

The wizard generates code that creates a red sphere with realistic bounce physics, automatically handling the animation loop.

Example 2: Rotating Cube with Color Changes

Prompt: "Create a rotating cube that changes colors smoothly"

This creates a mesmerizing cube that rotates on multiple axes while transitioning through different colors.

Example 3: Particle System

Prompt: "Generate a particle system with 1000 particles moving randomly in 3D space"

Creates a dynamic particle effect with points floating through space, perfect for backgrounds or visual effects.

Example 4: Solar System Simulation

Prompt: "Create a simple solar system animation with a sun and planets orbiting"

Generates a mini solar system with planets orbiting at different speeds and distances from a central sun.

Example 5: Wave Animation

Prompt: "Create an animated wave effect using a grid of cubes"

Produces a mesmerizing wave pattern using multiple cubes that move up and down in a synchronized pattern.

Interactive 3D Models (React Three Fiber)

Example 6: 3D Model Viewer

Prompt: "Create an interactive 3D model viewer with orbit controls for examining objects"

Sets up a scene where users can click and drag to rotate around a 3D object, scroll to zoom, and right-click to pan.

Example 7: Interactive Shapes Gallery

Prompt: "Create multiple 3D shapes that users can explore with orbit controls"

Generates a collection of geometric shapes (cube, sphere, torus, etc.) that users can examine from any angle.

Example 8: Material Showcase

Prompt: "Show different Three.js materials on spheres with orbit controls to examine them"

Creates spheres with various materials (metallic, glass, matte) that users can rotate around to see how light reflects.

Advanced Examples

Example 9: Fractal Generation

Prompt: "Generate a 3D Sierpinski tetrahedron fractal"

Creates a complex fractal structure using recursive geometry generation.

Example 10: Audio Visualizer (Animation)

Prompt: "Create bars that animate like an audio visualizer"

Generates animated bars that move up and down simulating audio frequency visualization.

Example 11: Terrain Generation

Prompt: "Generate a 3D terrain with hills and valleys"

Creates a procedurally generated landscape using Perlin noise or similar algorithms.

Example 12: Physics Simulation

Prompt: "Create falling cubes that stack on top of each other"

Implements basic physics with cubes that fall and collide, stacking realistically.

Node Controls

For Animations (Vanilla Mode)

  • Play/Pause: Start or stop the animation
  • Reset: Restart the animation from the beginning
  • Screenshot: Capture the current frame

For Interactive Viewing (Fiber Mode)

  • Left Click + Drag: Rotate around the object
  • Scroll: Zoom in/out
  • Right Click + Drag: Pan the camera
  • Environment Preset: Change lighting (sunset, dawn, studio, etc.)

Configuration Options

Access configuration by clicking the gear icon:

  • Render Mode: Auto, Vanilla, or Fiber
  • Width/Height: Canvas dimensions
  • Auto Play: Start animations automatically
  • Background Color: Scene background
  • Camera Position: Initial viewpoint
  • Environment: Lighting preset (Fiber mode)
  • Enable Orbit Controls: Allow user interaction (Fiber mode)

Tips for Best Results

When to Use Each Mode

Use Vanilla Three.js when you want:

  • Continuous animations
  • Particle effects
  • Simulations
  • Procedural generation
  • Custom animation loops

Use React Three Fiber when you want:

  • To examine 3D models
  • Interactive exploration
  • Static scenes with user controls
  • Multiple viewing angles
  • Professional lighting setups

Prompt Writing Tips

  1. Be Specific: Instead of "make something cool", try "create a rotating dodecahedron with metallic material"

  2. Mention Three.js: Include "Three.js" or "3D" in your prompt to ensure proper code generation

  3. Describe Motion: For animations, use words like "animate", "rotate", "bounce", "move", "oscillate"

  4. Specify Interaction: For interactive scenes, use "orbit controls", "interactive", "explore", "examine"

  5. Include Details: Mention colors, sizes, speeds, and other properties for better results

Troubleshooting

Code Shows "Three.js" Label but Doesn't Run

The Code node correctly detected Three.js code and won't execute it directly. Make sure to connect it to a 3D node.

Animation Doesn't Start

  • Check that the 3D node is connected to the Code node
  • Click the Play button if Auto Play is disabled
  • Ensure the Code node has valid Three.js code

No Orbit Controls

  • The code might be in Vanilla mode (for animations)
  • Check the configuration and enable orbit controls
  • Regenerate with words like "interactive" or "orbit controls"

Performance Issues

  • Reduce particle counts or polygon complexity
  • Lower the canvas resolution in settings
  • Close other heavy applications

Integration with Other Nodes

The 3D node can be part of larger workflows:

  1. Data → Code → 3D: Visualize data from APIs or files
  2. Agent → Code → 3D: Generate 3D scenes based on AI analysis
  3. 3D → Image: Capture screenshots for further processing
  4. Multiple Code → 3D: Switch between different 3D scenes

Examples Workflow Patterns

Data Visualization Pipeline

  1. HTTP Request (fetch data) →
  2. Code (process data) →
  3. Code with Wizard (create 3D visualization) →
  4. 3D Node (display)

AI-Generated Scenes

  1. Agent (describe scene) →
  2. Code with Wizard (generate Three.js) →
  3. 3D Node (render) →
  4. Image (capture)

Interactive Gallery

  1. Multiple Code nodes (different 3D objects) →
  2. Condition node (select which to show) →
  3. 3D Node (display selected)

Best Practices

  1. Start Simple: Begin with basic shapes and animations before attempting complex scenes

  2. Test Incrementally: Generate and test code step by step rather than creating everything at once

  3. Reuse Code: Save successful Three.js code snippets for future workflows

  4. Optimize Early: Consider performance from the start, especially for complex animations

  5. Document Purpose: Use the node's name field to describe what the 3D scene represents

Related Documentation