import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize scene elements const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Update canvas style to be behind overlay canvas.style.position = 'absolute'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.zIndex = '1'; // Create HTML overlay for AI interface with z-index const overlay = document.createElement('div'); overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100vw'; overlay.style.height = '100vh'; overlay.style.pointerEvents = 'auto'; overlay.style.zIndex = '2'; overlay.innerHTML = `

NEXUS·MINDNEUROCHIP v2.0
Neural Interface Protocol

`; parentDiv.appendChild(overlay); // Initialize the scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 0, 15); camera.lookAt(0, 0, 0); // Initialize renderer const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.setClearColor(0x000000, 1); // Create pattern shader const patternShader = { vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float iTime; uniform vec2 iResolution; uniform vec2 iMouse; #define pi 3.14159 mat2 Rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); } vec3 pal(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) { return a + b*cos( 6.28318*(c*t+d) ); } void main() { vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y); vec2 ms = (iMouse.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y); float A = 1.0; float r = 0.3; float th = 0.02; vec2 dir = uv - ms; float a = atan(dir.x, dir.y); float s = 0.0; float n = 20.0; float k = 6.0/iResolution.y; for (float i = n; i > 0.0; i--) { float io = A * 2.0 * pi * i / n; float sc = -4.0 - 0.5 * i + 0.9 * cos(io - 9.0 * length(dir) + iTime); vec2 fpos = fract(sc * uv + 0.5 * i * ms) - 0.5; fpos *= Rot(a); float d = abs(fpos.x); s *= 0.865; s += step(0.0, s) * smoothstep(-k, k, -abs(d - r) + th); } float val = s * 0.1 + 0.72 + 0.0 * iTime - 0.23 * pow(dot(dir,dir), 0.25); val = clamp(val, 0.4, 1.0); vec3 e = vec3(1.0); vec3 col = 0.5 * pal(val, e, e, e, 0.24 * vec3(0.0,1.0,2.0)/3.0); col = smoothstep(0.0, 1.0, col); gl_FragColor = vec4(col, 1.0); } ` }; // Create shader material with mouse tracking let mouse = new THREE.Vector2(); const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { iTime: { value: 0 }, iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, iMouse: { value: new THREE.Vector2(0.5, 0.5) } }, vertexShader: patternShader.vertexShader, fragmentShader: patternShader.fragmentShader, transparent: true }); // Create pattern plane that fills the screen const planeHeight = 2 * Math.tan((camera.fov * Math.PI / 180) / 2) * Math.abs(camera.position.z + 5); const planeWidth = planeHeight * camera.aspect; const patternGeometry = new THREE.PlaneGeometry(planeWidth, planeHeight); const patternMesh = new THREE.Mesh(patternGeometry, shaderMaterial); patternMesh.position.set(0, 0, -5); scene.add(patternMesh); // Add ambient lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); // Add directional light const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 10, 10); scene.add(directionalLight); // Post-processing const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.7, 0.3, 0.8 ); composer.addPass(bloomPass); const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Mouse movement handler window.addEventListener('mousemove', (event) => { mouse.x = event.clientX; mouse.y = event.clientY; shaderMaterial.uniforms.iMouse.value.set(mouse.x, mouse.y); }); // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const elapsedTime = clock.getElapsedTime(); shaderMaterial.uniforms.iTime.value = elapsedTime; composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); // Update pattern plane size const planeHeight = 2 * Math.tan((camera.fov * Math.PI / 180) / 2) * Math.abs(camera.position.z + 5); const planeWidth = planeHeight * camera.aspect; patternMesh.geometry.dispose(); patternMesh.geometry = new THREE.PlaneGeometry(planeWidth, planeHeight); renderer.setSize(width, height); composer.setSize(width, height); shaderMaterial.uniforms.iResolution.value.set(width, height); } window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Add CSS to the page const style = document.createElement('style'); style.textContent = ` #renderDiv { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; margin: 0; padding: 0; background: #000000; overflow: hidden; } #threeRenderCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; } `; document.head.appendChild(style); // Initialize the scene animate();