Three.js + React Three Fiber
Depth When It Matters
3D visualization for complex data relationships.
Complement to 2D diagrams, not a replacement.
3D Explorations
🎬Building
Basics
Scene setup, camera, lighting, and basic geometries. Foundation for any 3D work.
CanvasPerspectiveCameraOrbitControls
🖱️Building
Interactive
Click, hover, and drag interactions in 3D space. Raycasting and event handling.
useFrameraycastingevents
✨Building
Particles
Particle systems for data visualization. Useful for agent swarm representations.
PointsBufferGeometryinstancing
🕸️Building
3D Graph
Node-link visualization in 3D space. For complex relationship graphs.
forceGraphLineSphere
🌈Planned
Shaders
Custom shaders for unique visual effects and data-driven styling.
shaderMaterialGLSLuniforms
When to Use 3D vs 2D
Use 3D When:
- • >100 nodes with complex relationships
- • Spatial data (geography, architecture)
- • Real-time agent swarm visualization
- • Immersive presentation mode
Stay 2D When:
- • Diagrams need to be printed
- • Simple flowcharts (<50 nodes)
- • Accessibility is priority
- • Mobile-first requirements