cheatsheet++ home page 3d panel

gistfile1.txt

import React, { useEffect, useRef } from 'react';
import ForceGraph3D from '3d-force-graph';
//import * as THREE from 'three';
import SpriteText from 'three-spritetext';
const TechGraph = () => {
  const graphRef = useRef(null);
  useEffect(() => {
    const graphData = {
      "nodes": [
    { "id": "JavaScript", "group": "Technology" },
    { "id": "Python", "group": "Technology" },
	...
  ],
  "links": [
    { "source": "JavaScript", "target": "ReactJS" },
    { "source": "JavaScript", "target": "Node.js" },
	...
  ]
    };
    const Graph = ForceGraph3D()(graphRef.current)
        .graphData(graphData)
        .nodeAutoColorBy('group')
        .linkDirectionalParticles(2)
        .linkDirectionalParticleSpeed(d => d.value * 0.0001)
        .onNodeClick(node => window.location.href = `/topics/${node.id.toLowerCase()}`)
        .nodeThreeObject(node => {
        const sprite = new SpriteText(node.id);
            sprite.color = 'white';
            sprite.textHeight = 8;
            return sprite;
        })
        .width(graphRef.current.clientWidth)
        .height(graphRef.current.clientHeight)
        .linkWidth(1)
        .linkColor("#fff")
        .backgroundColor('#00518F')
        .cameraPosition({ z: 200 })        
        // .onEngineTick(() => {
        //     const t = Date.now() * 0.0001;  // Time-based function to smoothly rotate
        //     const camera = Graph.camera();  // Access the camera
        //     camera.position.x = 200 * Math.sin(t);
        //     camera.position.z = 200 * Math.cos(t);
        //     camera.lookAt(Graph.scene().position); 
        //   });
  }, []);
  return (
    <div>
      <div ref={graphRef} style={{ height: '400px' }} />
    </div>
  );
}
export default TechGraph;