Force Graph 3D

A beautiful and interactive 3D force-directed graph component for Vue 3, built with Three.js.

Features

• 🎨 Stunning 3D visualization with reflective materials
• ⚡ Smooth animations and physics simulations
• 🎯 Interactive node and link selection
• 🎨 Customizable materials and lighting
• 📱 Responsive design with orbit controls
• 🔧 Extensive customization options

Installation

npm install force-graph-3d three
# or
yarn add force-graph-3d three

Basic Usage

<template>
  <ForceGraph3D
    :nodes="nodes"
    :links="links"
    :autoStart="true"
    :showControls="true"
    @node-clicked="handleNodeClick"
    @link-clicked="handleLinkClick"
  />
</template>

<script>
import { ref } from 'vue';
import ForceGraph3D from 'force-graph-3d';

export default {
  components: { ForceGraph3D },
  setup() {
    const nodes = ref([
      { id: '1', label: 'Node 1', color: '#4cc9f0' },
      { id: '2', label: 'Node 2', color: '#f72585' },
      { id: '3', label: 'Node 3', color: '#7209b7' }
    ]);

    const links = ref([
      { source: '1', target: '2', label: 'Connection' },
      { source: '2', target: '3', label: 'Link' }
    ]);

    const handleNodeClick = (event) => {
      console.log('Node clicked:', event.node);
    };

    const handleLinkClick = (event) => {
      console.log('Link clicked:', event.link);
    };

    return { nodes, links, handleNodeClick, handleLinkClick };
  }
};
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | nodes | Array | [] | Array of node objects | | links | Array | [] | Array of link objects | | autoStart | Boolean | true | Automatically start animation | | showControls | Boolean | true | Show control panel |

Events

• node-clicked: When a node is clicked
• link-clicked: When a link is clicked
• node-hover: When hovering over a node
• graph-created: When graph is created
• graph-cleared: When graph is cleared

Node Object Structure

{
  id: String,         // Unique identifier
  label: String,      // Display label
  color: String,      // Hex color code
  type: String,       // Optional type
  x: Number,          // Initial x position
  y: Number,          // Initial y position
  z: Number           // Initial z position
}

Link Object Structure

{
  source: String,     // Source node ID
  target: String,     // Target node ID
  label: String,      // Connection label
  color: String       // Line color
}

Advanced Usage

<template>
  <ForceGraph3D
    ref="graphRef"
    :nodes="graphData.nodes"
    :links="graphData.links"
    @graph-created="onGraphCreated"
  />
</template>

<script>
import { ref } from 'vue';
import ForceGraph3D from 'force-graph-3d';

export default {
  components: { ForceGraph3D },
  setup() {
    const graphRef = ref(null);

    const onGraphCreated = (event) => {
      console.log('Graph created with:', event.nodes, 'nodes and', event.links, 'links');
    };

    // Programmatic control
    const resetView = () => {
      if (graphRef.value) {
        graphRef.value.resetView();
      }
    };

    return { graphRef, onGraphCreated, resetView };
  }
};
</script>

License

MIT