Last active
March 16, 2026 13:45
-
-
Save glowka/a1d2400fcd42de0a4b25f52872111a98 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Dense Mesh Sphere</title> | |
| <script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script> | |
| <script src="https://unpkg.com/3d-force-graph"></script> | |
| <style> | |
| body { margin: 0; background-color: #040406; overflow: hidden; } | |
| #hud { | |
| position: absolute; top: 30px; left: 30px; | |
| color: #00f2ff; font-family: 'Courier New', monospace; | |
| letter-spacing: 2px; font-size: 11px; | |
| padding: 10px; border-left: 3px solid #00f2ff; | |
| background: rgba(0, 242, 255, 0.05); pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="hud"> | |
| MESH_STATE: ULTRA_DENSE<br> | |
| CONNECTION_RATE: HIGH_STRENGTH<br> | |
| STATUS: SYNCED | |
| </div> | |
| <div id="3d-graph"></div> | |
| <script> | |
| const N = 150; | |
| const colors = ['#16533A']; | |
| const nodes = [...Array(N).keys()].map(i => ({ | |
| id: i, | |
| color: colors[i % colors.length] | |
| })); | |
| // Generate many more connections | |
| const links = []; | |
| nodes.forEach(node => { | |
| const numLinks = Math.floor(Math.random() * 1) + 1.2; | |
| for(let j=0; j < numLinks; j++) { | |
| const target = Math.floor(Math.random() * N); | |
| if (target !== node.id && !links.some(l => l.source === node.id && l.target === target)) { | |
| links.push({ source: node.id, target: target }); | |
| } | |
| } | |
| }); | |
| const Graph = ForceGraph3D() | |
| (document.getElementById('3d-graph')) | |
| .graphData({ nodes, links }) | |
| .backgroundColor('#F5F6F9') | |
| .showNavInfo(false) | |
| // Node Styling: Changed to Object to ensure Opacity is 1 and Shading is flat | |
| .nodeThreeObject(node => { | |
| const geometry = new THREE.SphereGeometry(6, 16, 16); | |
| const material = new THREE.MeshBasicMaterial({ | |
| color: node.color, | |
| transparent: false, | |
| opacity: 1 | |
| }); | |
| return new THREE.Mesh(geometry, material); | |
| }) | |
| .linkWidth(2.5) | |
| .linkMaterial(new THREE.MeshBasicMaterial({ | |
| color: '#ccc', | |
| transparent: true, | |
| opacity: 0.15 | |
| })) | |
| .warmupTicks(10) | |
| .cooldownTicks(0); | |
| Graph.d3Force('link').distance(45).strength(0.8); | |
| Graph.d3Force('charge').strength(-180); | |
| let angle = 0; | |
| const distance = 1000; | |
| function animate() { | |
| Graph.cameraPosition({ | |
| x: distance * Math.sin(angle), | |
| z: distance * Math.cos(angle), | |
| y: distance * Math.sin(angle * 0.1) * 0.15 + 100 * Math.sin(angle * 2), | |
| }); | |
| angle += 0.002; | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| window.addEventListener('resize', () => { | |
| Graph.width(window.innerWidth); | |
| Graph.height(window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment