Interactive 3D Black Hole Explorer

\n \n

\n\n \n \n \n \n \n \n \n \n\n , style.css : body {\n margin: 0;\n overflow: hidden;\n background: #000;\n font-family: Arial, sans-serif;\n}\n\n#container {\n position: relative;\n width: 100vw;\n height: 100vh;\n}\n\n#webgl-canvas {\n display: block;\n}\n\n#sidebar {\n position: absolute;\n top: 10px;\n right: 10px;\n width: 300px;\n background: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 15px;\n border-radius: 10px;\n z-index: 100;\n box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);\n}\n\n#sidebar h3 {\n margin: 0 0 10px;\n text-align: center;\n color: #ffd700;\n}\n\n#gui-container {\n font-size: 12px;\n} , heres the script.js : // Global variables\nlet scene, camera, renderer, controls;\nlet blackHole, accretionDisk, starField;\nlet gui; // Dat.GUI instance\nlet lensingEnabled = true;\n\n// Load Wasm module (C++ for lensing computations)\nlet wasmModule;\nModule.onRuntimeInitialized = () => {\n wasmModule = Module;\n console.log('C++ Wasm loaded for gravitational lensing!');\n};\n\n// Initialize Three.js scene\nfunction init() {\n // Scene\n scene = new THREE.Scene();\n\n // Camera\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n camera.position.set(0, 5, 20);\n\n // Renderer\n renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('webgl-canvas'), antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setClearColor(0x000000);\n\n // Controls (zoom with wheel, orbit with drag)\n controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.minDistance = 5; // Min zoom\n controls.maxDistance = 100; // Max zoom\n\n // Black Hole (Event Horizon)\n const bhGeometry = new THREE.SphereGeometry(2, 32, 32);\n const bhMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });\n blackHole = new THREE.Mesh(bhGeometry, bhMaterial);\n scene.add(blackHole);\n\n // Accretion Disk\n const diskGeometry = new THREE.RingGeometry(3, 10, 64);\n const diskTexture = new THREE.TextureLoader().load('textures/accretion-disk.jpg');\n const diskMaterial = new THREE.MeshBasicMaterial({ \n map: diskTexture, \n side: THREE.DoubleSide, \n transparent: true,\n opacity: 0.8\n });\n accretionDisk = new THREE.Mesh(diskGeometry, diskMaterial);\n accretionDisk.rotation.x = Math.PI / 2;\n scene.add(accretionDisk);\n\n // Star Field (with lensing shader)\n const starGeometry = new THREE.SphereGeometry(500, 64, 64);\n const starMaterial = new THREE.ShaderMaterial({\n uniforms: {\n time: { value: 0 },\n lensingIntensity: { value: 1.0 }\n },\n vertexShader: document.getElementById('lensing-vert').textContent, // Load from shaders/\n fragmentShader: document.getElementById('lensing-frag').textContent,\n side: THREE.BackSide\n });\n starField = new THREE.Mesh(starGeometry, starMaterial);\n scene.add(starField);\n\n // GUI Panel\n createGUI();\n\n animate();\n}\n\n// GUI for Properties (Right-Top Panel)\nfunction createGUI() {\n gui = new dat.GUI({ autoPlace: false });\n document.getElementById('gui-container').appendChild(gui.domElement);\n\n const bhFolder = gui.addFolder('Black Hole Properties');\n bhFolder.add({ mass: 10 }, 'mass', 5, 50).onChange(updateMass);\n bhFolder.add({ spin: 1 }, 'spin', 0, 5).onChange(updateSpin);\n bhFolder.open();\n\n const colorsFolder = gui.addFolder('Colors');\n colorsFolder.addColor({ diskColor: '#ffaa00' }, 'diskColor').onChange(updateDiskColor);\n colorsFolder.add({ glow: 1 }, 'glow', 0, 2).onChange(updateGlow);\n colorsFolder.open();\n\n const effectsFolder = gui.addFolder('Effects');\n effectsFolder.add({ lensing: true }, 'lensing').onChange(toggleLensing);\n effectsFolder.add({ particles: 1000 }, 'particles', 100, 5000).onChange(updateParticles);\n effectsFolder.open();\n}\n\n// Update functions\nfunction updateMass(value) {\n blackHole.scale.setScalar(value / 10);\n accretionDisk.scale.setScalar(value / 10);\n}\n\nfunction updateSpin(value) {\n accretionDisk.userData.spin = value;\n}\n\nfunction updateDiskColor(color) {\n accretionDisk.material.color.setHex(color.replace('#', '0x'));\n}\n\nfunction updateGlow(value) {\n blackHole.material.emissiveIntensity = value;\n}\n\nfunction toggleLensing(enabled) {\n lensingEnabled = enabled;\n starField.material.uniforms.lensingIntensity.value = enabled ? 1 : 0;\n}\n\nfunction updateParticles(count) {\n // Regenerate particle system for disk\n scene.remove(accretionDisk);\n // ... (add particle logic here, simplified)\n accretionDisk = new THREE.Mesh(...); // Rebuild\n scene.add(accretionDisk);\n}\n\n// Animation Loop\nfunction animate() {\n requestAnimationFrame(animate);\n\n // Rotate disk\n accretionDisk.rotation.z += accretionDisk.userData.spin * 0.01;\n\n // Update lensing with C++ Wasm\n if (lensingEnabled && wasmModule) {\n const rays = wasmModule.computeLensing(camera.position); // Call C++ function\n starField.material.uniforms.time.value += 0.01;\n }\n\n controls.update();\n renderer.render(scene, camera);\n}\n\n// Resize handler\nwindow.addEventListener('resize', () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n});\n\ninit(); heres the shaders thing : uniform float time;\nuniform float lensingIntensity;\nvarying vec2 vUv;\n\nvoid main() {\n vec2 uv = vUv - 0.5;\n uv *= lensingIntensity / length(uv); // Simple lensing distortion\n gl_FragColor = texture2D(starTexture, uv + 0.5) * sin(time);\n} , heres the c++ code \"blackhole.cpp\" : #include \n#include \n\nextern \"C\" {\n // Simplified ray-black hole intersection\n EMSCRIPTEN_KEEPALIVE\n float computeLensing(float* rays, int numRays) {\n float bhMass = 10.0f; // From GUI\n for (int i = 0; i < numRays; ++i) {\n float r = sqrt(rays[i*3] * rays[i*3] + rays[i*3+1] * rays[i*3+1]);\n rays[i*3+2] = 1.5 * bhMass / r; // Deflection angle\n }\n return 1.0f;\n }\n}\n\nint main() {} // Entry point .","url","link_url","/p/qjh9engf_lwhr2ybci3n","versioned_link_url","/p/qjh9engf_lwhr2ybci3n/1","yapping","I'll help you create an interactive 3D black hole explorer. Looking at your code, I can see several issues that need to be fixed. Let me create a complete, working version with proper shaders, textures, and functionality.\n\nindex.html\n```index.html\n```\n\nstyle.css\n```style.css\n```\n\nscript.js\n```script.js\n```\n\nThis creates a fully functional 3D black hole explorer with:\n\n1. **Realistic black hole** with event horizon and glow effect\n2. **Accretion disk** with animated shader showing temperature gradients and spiral patterns\n3. **Gravitational lensing** effect on the star field background\n4. **Particle system** representing hot matter around the black hole\n5. **Interactive GUI** with controls for mass, spin, colors, and effects\n6. **Orbit controls** for camera movement and zoom\n\nThe shaders create realistic visual effects including gravitational lensing distortion on the star field and animated accretion disk with temperature-based coloring. The GUI allows real-time adjustment of black hole properties.","page_description","cursor","eyJpZCI6InFqaDllbmdmX2x3aHIyeWJjaTNuIn0","token","included",[],"about",{"_185":-5},"parent","routes/browser/layout","actionData","errors"]

🕳️ Black Hole Properties

3D Black hole made by Grok 4