// Core imports import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Add custom font const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); // Add CSS for scrollable parent div const style = document.createElement('style'); style.textContent = ` #renderDiv { overflow-y: auto; height: 100vh; } `; document.head.appendChild(style); // Platform setup const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create UI overlay const overlay = document.createElement('div'); overlay.style.position = 'absolute'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.pointerEvents = 'none'; overlay.innerHTML = `

CYBER_NET

> SYSTEM.ACCESS_GRANTED

X: 0.000 Y: 0.000 Z: 0.000
SYSTEM_TIME: 00:00:00

STATUS: GRID INITIALIZATION COMPLETE

`; parentDiv.appendChild(overlay); // Create floating info panels const infoPanels = []; function createInfoPanel(text, position) { const panel = document.createElement('div'); panel.className = 'info-panel'; panel.style.position = 'absolute'; panel.style.padding = '15px'; panel.style.background = 'rgba(0, 255, 136, 0.1)'; panel.style.border = '1px solid #00ff88'; panel.style.color = '#00ff88'; panel.style.fontFamily = "'Share Tech Mono', monospace"; panel.style.fontSize = '0.9em'; panel.style.pointerEvents = 'none'; panel.style.opacity = '0'; panel.style.transition = 'opacity 0.5s'; panel.innerHTML = text; panel.style.left = `${position.x}px`; panel.style.top = `${position.y}px`; overlay.appendChild(panel); infoPanels.push(panel); return panel; } // Delay panel creation to ensure parent div dimensions are set setTimeout(() => { createInfoPanel('NETWORK STATUS: OPTIMAL', { x: 50, y: parentDiv.clientHeight + 200 }); createInfoPanel('FIREWALL: ACTIVE', { x: parentDiv.clientWidth - 250, y: parentDiv.clientHeight + 400 }); createInfoPanel('DATA STREAMS: ENCRYPTED', { x: 100, y: parentDiv.clientHeight + 600 }); createInfoPanel('AI CORE: OPERATIONAL', { x: parentDiv.clientWidth - 300, y: parentDiv.clientHeight + 800 }); }, 100); // Scene setup const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000000, 0.04); const camera = new THREE.PerspectiveCamera(75, parentDiv.clientWidth / parentDiv.clientHeight, 0.1, 1000); camera.position.set(0, 5, 5); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Grid creation const gridSize = 20; const gridDivisions = 20; const gridMaterial = new THREE.LineBasicMaterial({ color: 0x00ff88, transparent: true, opacity: 0.3 }); // Create horizontal grid const horizontalGrid = new THREE.GridHelper(gridSize, gridDivisions, 0x00ff88, 0x00ff88); horizontalGrid.material.opacity = 0.1; horizontalGrid.material.transparent = true; scene.add(horizontalGrid); // Create vertical lines const verticalLines = new THREE.Group(); for (let i = -gridSize / 2; i <= gridSize / 2; i += gridSize / gridDivisions) { for (let j = -gridSize / 2; j <= gridSize / 2; j += gridSize / gridDivisions) { const geometry = new THREE.BufferGeometry(); const points = [ new THREE.Vector3(i, 0, j), new THREE.Vector3(i, gridSize / 2, j) ]; geometry.setFromPoints(points); const line = new THREE.Line(geometry, gridMaterial); verticalLines.add(line); } } scene.add(verticalLines); // Create glowing spheres const spheres = []; const sphereCount = 20; for (let i = 0; i < sphereCount; i++) { const geometry = new THREE.SphereGeometry(0.1, 16, 16); const material = new THREE.MeshBasicMaterial({ color: new THREE.Color().setHSL(Math.random(), 1, 0.5), transparent: true, opacity: 0.8 }); const sphere = new THREE.Mesh(geometry, material); sphere.position.set( (Math.random() - 0.5) * gridSize, Math.random() * gridSize / 2, (Math.random() - 0.5) * gridSize ); sphere.userData = { speed: Math.random() * 0.02 + 0.01, direction: new THREE.Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize() }; spheres.push(sphere); scene.add(sphere); } // Energy beams const beams = []; const beamCount = 10; const beamMaterial = new THREE.LineBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.5 }); for (let i = 0; i < beamCount; i++) { const geometry = new THREE.BufferGeometry(); const points = [ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0) ]; geometry.setFromPoints(points); const beam = new THREE.Line(geometry, beamMaterial); beam.userData = { speed: Math.random() * 0.02 + 0.01, length: Math.random() * 2 + 1 }; beams.push(beam); scene.add(beam); } // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxPolarAngle = Math.PI / 2; // Animation loop function animate() { requestAnimationFrame(animate); const time = Date.now() * 0.001; // Update spheres spheres.forEach(sphere => { sphere.position.add(sphere.userData.direction.clone().multiplyScalar(sphere.userData.speed)); // Bounce off grid boundaries if (Math.abs(sphere.position.x) > gridSize / 2 || Math.abs(sphere.position.y) > gridSize / 2 || Math.abs(sphere.position.z) > gridSize / 2) { sphere.userData.direction.multiplyScalar(-1); } // Pulse effect sphere.material.opacity = 0.5 + Math.sin(time * 2) * 0.3; }); // Update beams beams.forEach(beam => { beam.position.set( Math.sin(time * beam.userData.speed) * gridSize / 3, 0, Math.cos(time * beam.userData.speed) * gridSize / 3 ); const points = [ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, beam.userData.length * (Math.sin(time * 2) * 0.5 + 1), 0) ]; beam.geometry.setFromPoints(points); }); // Update grid opacity horizontalGrid.material.opacity = 0.1 + Math.sin(time) * 0.05; // Update UI const coordsElement = document.getElementById('coordinates'); coordsElement.textContent = `X: ${camera.position.x.toFixed(3)} Y: ${camera.position.y.toFixed(3)} Z: ${camera.position.z.toFixed(3)}`; const timeElement = document.getElementById('system-time'); const date = new Date(); timeElement.textContent = `SYSTEM_TIME: ${date.toTimeString().split(' ')[0]}`; controls.update(); renderer.render(scene, camera); // Animate info panels infoPanels.forEach((panel, index) => { const yOffset = Math.sin(time * 2 + index) * 5; panel.style.transform = `translateY(${yOffset}px)`; }); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); } window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Scroll event listener parentDiv.addEventListener('scroll', () => { const scrollPosition = parentDiv.scrollTop; const viewportHeight = parentDiv.clientHeight; infoPanels.forEach((panel, index) => { const panelPosition = parseInt(panel.style.top); const panelHeight = panel.offsetHeight; if (scrollPosition + viewportHeight > panelPosition && scrollPosition < panelPosition + panelHeight) { panel.style.opacity = '1'; } else { panel.style.opacity = '0'; } }); }); // Initialize and start animate();