import React, { useEffect, useState, useRef } from "react"; import * as THREE from "three"; import { gsap } from "gsap"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; interface NeuralNetworkProps { roleData: Array<{ name: string; value: number; }>; overallScore: number; } interface Tooltip { visible: boolean; x: number; y: number; content: { name: string; value: number; }; } export const NeuralNetwork = ({ roleData, overallScore, }: NeuralNetworkProps) => { const containerRef = useRef(null); const rendererRef = useRef(null); const sceneRef = useRef(null); const cameraRef = useRef(null); const triangleSystemRef = useRef(null); const particlesRef = useRef(null); const nodesRef = useRef([]); const raycasterRef = useRef(new THREE.Raycaster()); const mouseRef = useRef(new THREE.Vector2()); const [tooltip, setTooltip] = useState({ visible: false, x: 0, y: 0, content: { name: "", value: 0, }, }); const controlsRef = useRef(null); const isDraggingRef = useRef(false); useEffect(() => { if (!containerRef.current) return; const scene = new THREE.Scene(); sceneRef.current = scene; const camera = new THREE.PerspectiveCamera( 75, containerRef.current.clientWidth / containerRef.current.clientHeight, 0.1, 1000, ); camera.position.z = 5; cameraRef.current = camera; const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, }); renderer.setSize( containerRef.current.clientWidth, containerRef.current.clientHeight, ); containerRef.current.appendChild(renderer.domElement); rendererRef.current = renderer; const controls = new OrbitControls(camera, renderer.domElement); controls.enableZoom = false; controls.enablePan = false; controls.enableDamping = true; controls.dampingFactor = 0.05; controls.rotateSpeed = 0.5; controls.autoRotate = true; controls.autoRotateSpeed = 0.5; controlsRef.current = controls; const handlePointerDown = () => { isDraggingRef.current = true; controls.autoRotate = false; }; const handlePointerUp = () => { isDraggingRef.current = false; if (!tooltip.visible) { controls.autoRotate = true; } }; const handlePointerMove = (event: PointerEvent) => { const rect = containerRef.current?.getBoundingClientRect(); if (!rect) return; mouseRef.current.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouseRef.current.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycasterRef.current.setFromCamera(mouseRef.current, camera); const intersects = raycasterRef.current.intersectObjects( nodesRef.current, ); if (intersects.length > 0) { const intersection = intersects[0]; const role = intersection.object.userData.roleData; const vector = intersection.object.position.clone(); vector.project(camera); const x = (vector.x * 0.5 + 0.5) * rect.width; const y = (-vector.y * 0.5 + 0.5) * rect.height; setTooltip({ visible: true, x, y, content: role, }); if (!isDraggingRef.current) { controls.autoRotate = false; } } else { setTooltip((prev) => ({ ...prev, visible: false, })); if (!isDraggingRef.current) { controls.autoRotate = true; } } }; const handlePointerLeave = () => { isDraggingRef.current = false; setTooltip((prev) => ({ ...prev, visible: false, })); controls.autoRotate = true; }; renderer.domElement.addEventListener("pointerdown", handlePointerDown); window.addEventListener("pointerup", handlePointerUp); window.addEventListener("pointermove", handlePointerMove); renderer.domElement.addEventListener("pointerleave", handlePointerLeave); const triangleSystem = new THREE.Group(); triangleSystemRef.current = triangleSystem; scene.add(triangleSystem); const nodePositions: THREE.Vector3[] = []; const baseRadius = 2; roleData.forEach((role, index) => { const geometry = new THREE.SphereGeometry(0.3, 32, 32); const material = new THREE.MeshBasicMaterial({ color: new THREE.Color("#ACFF3D"), transparent: true, opacity: 0.8, }); const sphere = new THREE.Mesh(geometry, material); const angle = (index * Math.PI * 2) / 5; const scoreRadius = (baseRadius * role.value) / 100; const position = new THREE.Vector3( Math.cos(angle) * scoreRadius, Math.sin(angle) * scoreRadius, 0, ); sphere.position.copy(position); sphere.userData = { roleData: role, }; nodePositions.push(position); nodesRef.current.push(sphere); triangleSystem.add(sphere); const ringGeometry = new THREE.RingGeometry( baseRadius - 0.05, baseRadius + 0.05, 32, ); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xacff3d, transparent: true, opacity: 0.1, side: THREE.DoubleSide, }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; ring.position.z = -0.1; ring.rotation.z = angle; triangleSystem.add(ring); const centerLine = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), position, ]); const centerLineMaterial = new THREE.LineBasicMaterial({ color: 0xacff3d, transparent: true, opacity: 0.1, }); const line = new THREE.Line(centerLine, centerLineMaterial); triangleSystem.add(line); }); const lineMaterial = new THREE.LineBasicMaterial({ color: 0xacff3d, transparent: true, opacity: 0.3, }); nodePositions.forEach((start, i) => { const end = nodePositions[(i + 1) % nodePositions.length]; const lineGeometry = new THREE.BufferGeometry().setFromPoints([ start, end, ]); const line = new THREE.Line(lineGeometry, lineMaterial); triangleSystem.add(line); }); const planeGeometry = new THREE.BufferGeometry(); planeGeometry.setFromPoints(nodePositions); planeGeometry.setIndex([0, 1, 2]); const planeMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(0xacff3d), }, }, vertexShader: ` varying vec3 vPosition; void main() { vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 color; varying vec3 vPosition; void main() { float alpha = 0.1 - length(vPosition) * 0.02; gl_FragColor = vec4(color, alpha); } `, transparent: true, side: THREE.DoubleSide, }); const trianglePlane = new THREE.Mesh(planeGeometry, planeMaterial); triangleSystem.add(trianglePlane); const particlesGeometry = new THREE.BufferGeometry(); const particleCount = 1000; const positions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 10; positions[i + 1] = (Math.random() - 0.5) * 10; positions[i + 2] = (Math.random() - 0.5) * 10; } particlesGeometry.setAttribute( "position", new THREE.BufferAttribute(positions, 3), ); const particlesMaterial = new THREE.PointsMaterial({ color: 0xacff3d, size: 0.02, transparent: true, opacity: 0.5, }); const particles = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particles); particlesRef.current = particles; const animate = () => { requestAnimationFrame(animate); if (particlesRef.current) { particlesRef.current.rotation.x += 0.0003; particlesRef.current.rotation.y += 0.0005; } controls.update(); renderer.render(scene, camera); }; animate(); return () => { renderer.domElement.removeEventListener("pointerdown", handlePointerDown); window.removeEventListener("pointerup", handlePointerUp); window.removeEventListener("pointermove", handlePointerMove); renderer.domElement.removeEventListener( "pointerleave", handlePointerLeave, ); controls.dispose(); renderer.dispose(); if (containerRef.current && renderer.domElement) { containerRef.current.removeChild(renderer.domElement); } }; }, [roleData]); return (

{tooltip.visible && (

{tooltip.content.name}

{tooltip.content.value}%

)}

); };

3D Traits Visualization