$ show vasturiano/three-forcegraph
Three-forcegraph is a reusable JavaScript library for creating 3D force-directed graph visualizations using Three.js. It implements a reactive component that takes graph data (nodes and links) and renders them in 3D space using either d3-force-3d or ngraph.forcelayout for physics simulation. The library provides extensive customization options for node/link appearance, behavior, and layout constraints including DAG modes, directional arrows, and particle effects. Built with the Kapsule pattern for state management, it follows a modular architecture separating core logic, utilities, and Three.js object management. The library handles proper resource disposal to prevent WebGL memory leaks and offers both imperative and declarative APIs for integration into web applications.
The LLM identified 3 files worth highlighting for reuse:
Self-contained color manipulation utilities including hex conversion, alpha extraction, and automatic color assignment. The autoColorObjects function demonstrates thoughtful implementation by only applying colors to objects lacking them, using d3-scale's scaleOrdinal for consistent palette distribution. Zero internal dependencies, easily extractable to any project needing color handling.
Pure function implementing Directed Acyclic Graph (DAG) depth calculation with cycle detection. Performs single-pass traversal to compute node depths while identifying and reporting cycles through a callback mechanism. No dependencies, clear input/output contract, and reusable in any graph processing application requiring topological analysis or layout computation.
Garbage collection utilities for proper Three.js resource disposal. Handles material textures, geometries, and recursive child object cleanup to prevent WebGL memory leaks. Addresses a critical pain point in Three.js applications with expert-level understanding of the disposal chain. Zero dependencies, easily extractable to any Three.js project needing robust resource management.