Three.js Starfield Structure

import * as THREE from 'three'; import Stats from 'three/addons/libs/stats.module.js'; import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { LineMaterial } from 'three/addons/lines/LineMaterial.js'; import { Wireframe } from 'three/addons/lines/Wireframe.js'; import { WireframeGeometry2 } from 'three/addons/lines/WireframeGeometry2.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; let wireframe, renderer, scene, camera, camera2, controls; let wireframe1; let matLine, matLineBasic, matLineDashed; let stats; let gui; // Points variables (for structure nodes) let pointsMesh; let pointsGeometry; let pointsMaterial; const initialPointColor = 0x00FFFF; const pointSize = 10; let circleTexture; // Galaxy variables let galaxy; const numStars = 2000; // Number of stars in the main starfield const galaxyRadius = 500; // Defines the scale/extent of the starfield const galaxyThickness = 50; // Not used for cubic distribution, kept for context let galaxyRotationSpeed = 0.001; // Variable for GUI control // Star Belt variables let starBeltMesh; const numBeltStars = 500; // Number of stars in the belt const starBeltRadius = 80; // Increased radius around the structure const starBeltThickness = 5; // Vertical thickness of the belt let starBeltIndependentRotationSpeed = 0.005; // Speed for belt's rotation around its own axis // Rotation speed for structure and belt as a system const structureBeltSystemRotationSpeedX = 0.0001; // Increased speed slightly const structureBeltSystemRotationSpeedY = 0.00005; // Increased speed slightly // Group for the central structure and belt let centralSystemGroup; // Text variables let devPatelText; const textString = 'DEV PATEL'; const textHeight = 1; // Thickness of the text const textSize = 5; // Size of the text characters const textBevelThickness = 0.5; const textBevelSize = 0.2; const textRadialOffset = starBeltRadius + 15; // Distance from the center of the group // Raycasting variables const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let intersectedPoint = null; const hoverTextElement = document.getElementById('hover-text'); // viewport let insetWidth; let insetHeight; init(); async function init() { renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 0.0); renderer.setAnimationLoop(animate); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(-50, 0, 50); camera2 = new THREE.PerspectiveCamera(40, 1, 1, 1000); camera2.position.copy(camera.position); controls = new OrbitControls(camera, renderer.domElement); controls.minDistance = 10; controls.maxDistance = 500; // Load circle texture for points circleTexture = createCircleTexture(); // Wireframe (WireframeGeometry2, LineMaterial) - The blue structure const geo = new THREE.IcosahedronGeometry(20, 1); const geometry = new WireframeGeometry2(geo); matLine = new LineMaterial({ color: 0x00FFFF, linewidth: 5, dashed: false }); wireframe = new Wireframe(geometry, matLine); wireframe.computeLineDistances(); wireframe.scale.set(1, 1, 1); // scene.add(wireframe); // Add to group later // Line (THREE.WireframeGeometry, THREE.LineBasicMaterial) - Alternative structure rendering const geo1 = new THREE.WireframeGeometry(geo); matLineBasic = new THREE.LineBasicMaterial({ color: 0x00FFFF }); matLineDashed = new THREE.LineDashedMaterial({ scale: 2, dashSize: 1, gapSize: 1, color: 0x00FFFF }); wireframe1 = new THREE.LineSegments(geo1, matLineBasic); wireframe1.computeLineDistances(); wireframe1.visible = false; // scene.add(wireframe1); // Add to group later // Add Points (for structure nodes) pointsGeometry = new THREE.BufferGeometry(); pointsGeometry.setAttribute('position', geo.attributes.position); pointsMaterial = new THREE.PointsMaterial({ color: initialPointColor, size: pointSize, sizeAttenuation: true, map: circleTexture, transparent: true, alphaTest: 0.1, depthWrite: false }); pointsMesh = new THREE.Points(pointsGeometry, pointsMaterial); // scene.add(pointsMesh); // Add to group later // Create Star Belt around the structure createStarBelt(); // scene.add(starBeltMesh); // Add to group later // Create a group for the central system group centralSystemGroup = new THREE.Group(); centralSystemGroup.add(wireframe); centralSystemGroup.add(wireframe1); centralSystemGroup.add(pointsMesh); centralSystemGroup.add(starBeltMesh); // Add belt to the group // Add the group to the scene scene.add(centralSystemGroup); // Load font and create text loadFontAndCreateText(); // Create Starfield (changed from Galaxy) createStarfield(); scene.add(galaxy); // Renamed 'galaxy' variable to represent the general starfield // Event Listeners window.addEventListener('resize', onWindowResize); window.addEventListener('mousemove', onMouseMove, false); onWindowResize(); stats = new Stats(); document.body.appendChild(stats.dom); initGui(); } function createCircleTexture() { const canvas = document.createElement('canvas'); canvas.width = 64; canvas.height = 64; const context = canvas.getContext('2d'); context.beginPath(); context.arc(32, 32, 30, 0, Math.PI * 2, false); context.fillStyle = '#ffffff'; context.fill(); return new THREE.CanvasTexture(canvas); } // Renamed from createGalaxy to createStarfield function createStarfield() { const starfieldGeometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const color = new THREE.Color(); for (let i = 0; i < numStars; i++) { // Position stars randomly within a cube defined by galaxyRadius const x = (Math.random() - 0.5) * galaxyRadius * 2; // Range from -galaxyRadius to +galaxyRadius const y = (Math.random() - 0.5) * galaxyRadius * 2; // Range from -galaxyRadius to +galaxyRadius const z = (Math.random() - 0.5) * galaxyRadius * 2; // Range from -galaxyRadius to +galaxyRadius positions.push(x, y, z); // Color variation (kept original logic) const hue = 0.6 + (Math.random() * 0.1); // Bluish/Purplish hues const saturation = 0.5 + (Math.random() * 0.5); const lightness = 0.5 + (Math.random() * 0.5); color.setHSL(hue, saturation, lightness); colors.push(color.r, color.g, color.b); } starfieldGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); starfieldGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); const starfieldMaterial = new THREE.PointsMaterial({ size: 1.5, sizeAttenuation: true, vertexColors: true, transparent: true, opacity: 0.8 }); galaxy = new THREE.Points(starfieldGeometry, starfieldMaterial); // Assign to 'galaxy' variable // scene.add(galaxy); // Added after group setup } function createStarBelt() { const beltGeometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const color = new THREE.Color(); for (let i = 0; i < numBeltStars; i++) { // Position stars in a ring around the origin (where the structure is) const angle = Math.random() * Math.PI * 2; const radius = starBeltRadius + (Math.random() - 0.5) * (starBeltThickness * 0.2); // Slight variation in radius const x = Math.cos(angle) * radius; const y = (Math.random() - 0.5) * starBeltThickness; // Vertical spread const z = Math.sin(angle) * radius; positions.push(x, y, z); // Simple white/yellowish color for belt stars color.setHSL(0.1 + Math.random() * 0.1, 0.5 + Math.random() * 0.5, 0.8 + Math.random() * 0.2); // Yellowish/White colors.push(color.r, color.g, color.b); } beltGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); beltGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); const beltMaterial = new THREE.PointsMaterial({ size: 2, // Slightly larger points than galaxy sizeAttenuation: true, vertexColors: true, transparent: true, opacity: 0.9 }); starBeltMesh = new THREE.Points(beltGeometry, beltMaterial); // scene.add(starBeltMesh); // Add to group later } function loadFontAndCreateText() { const loader = new FontLoader(); // Using a font from the Three.js examples CDN loader.load('https://cdn.jsdelivr.net/npm/three@0.166/examples/fonts/helvetiker_regular.typeface.json', function (font) { const textGeometry = new TextGeometry(textString, { font: font, size: textSize, height: textHeight, curveSegments: 12, bevelEnabled: true, bevelThickness: textBevelThickness, bevelSize: textBevelSize, bevelOffset: 0, bevelSegments: 5 }); textGeometry.computeBoundingBox(); // Center the text geometry textGeometry.translate( - textGeometry.boundingBox.max.x * 0.5, - textGeometry.boundingBox.max.y * 0.5, - textGeometry.boundingBox.max.z * 0.5 ); const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff }); // White text devPatelText = new THREE.Mesh(textGeometry, textMaterial); // Position the text relative to the central group's origin // Place it slightly outside the star belt radius devPatelText.position.set(textRadialOffset, 0, 0); // Position on the X axis // Add the text to the central system group if (centralSystemGroup) { centralSystemGroup.add(devPatelText); } else { // Fallback if group isn't ready (shouldn't happen with current flow) scene.add(devPatelText); } }); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); insetWidth = window.innerHeight / 4; insetHeight = window.innerHeight / 4; camera2.aspect = insetWidth / insetHeight; camera2.updateProjectionMatrix(); } function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = - (event.clientY / window.innerHeight) * 2 + 1; } function animate() { renderer.setClearColor(0x000000, 0); renderer.setViewport(0, 0, window.innerWidth, window.innerHeight); // Raycasting for points (structure nodes) raycaster.setFromCamera(mouse, camera); // Adjust threshold based on distance and point size // Note: Raycasting against points within a rotated group might need adjustment // For simplicity, we'll raycast against the pointsMesh directly, assuming its world matrix is updated by the group // Use getWorldPosition for accurate threshold calculation const pointsWorldPosition = new THREE.Vector3(); pointsMesh.getWorldPosition(pointsWorldPosition); raycaster.params.Points.threshold = pointSize * (camera.position.distanceTo(pointsWorldPosition) / 200); const intersects = raycaster.intersectObject(pointsMesh); if (intersects.length > 0) { if (intersectedPoint !== intersects[0].index) { intersectedPoint = intersects[0].index; const point = intersects[0].point; updateHoverText(point, `Node Index: ${intersectedPoint}`); } } else { if (intersectedPoint !== null) { intersectedPoint = null; hideHoverText(); } } // Rotate the starfield (independent) galaxy.rotation.y += galaxyRotationSpeed; // Apply diagonal rotation to the entire central system group centralSystemGroup.rotation.x += structureBeltSystemRotationSpeedX; centralSystemGroup.rotation.y += structureBeltSystemRotationSpeedY; // Apply independent rotation to the star belt mesh around its local Y axis starBeltMesh.rotation.y += starBeltIndependentRotationSpeed; // The text mesh orbits because it's a child of centralSystemGroup // If you wanted the text to always face the camera, you would add: // if (devPatelText) { // devPatelText.lookAt(camera.position); // } renderer.render(scene, camera); // inset scene renderer.setClearColor(0x222222, 1); renderer.clearDepth(); renderer.setScissorTest(true); renderer.setScissor(20, 20, insetWidth, insetHeight); renderer.setViewport(20, 20, insetWidth, insetHeight); camera2.position.copy(camera.position); camera2.quaternion.copy(camera.quaternion); renderer.render(scene, camera2); renderer.setScissorTest(false); stats.update(); } function updateHoverText(point3D, text) { const vector = new THREE.Vector3(point3D.x, point3D.y, point3D.z); vector.project(camera); const canvas = renderer.domElement; const rect = canvas.getBoundingClientRect(); const x = (vector.x * 0.5 + 0.5) * rect.width + rect.left; const y = (- vector.y * 0.5 + 0.5) * rect.height + rect.top; hoverTextElement.style.display = 'block'; hoverTextElement.style.left = `${x}px`; hoverTextElement.style.top = `${y}px`; hoverTextElement.textContent = text; } function hideHoverText() { hoverTextElement.style.display = 'none'; } function initGui() { gui = new GUI(); const param = { 'line type': 0, 'line width (px)': matLine.linewidth, 'line color': matLine.color.getHex(), 'dashed': matLine.dashed, 'dash scale': matLine.dashScale, 'dash / gap': 1, 'show points': pointsMesh.visible, 'point color': pointsMaterial.color.getHex(), 'point size': pointsMaterial.size, 'starfield speed': galaxyRotationSpeed, // Renamed GUI control 'belt speed': starBeltIndependentRotationSpeed }; gui.add(param, 'line type', { 'LineGeometry': 0, 'gl.LINE': 1 }).onChange(function(val) { switch(val) { case 0: wireframe.visible = true; wireframe1.visible = false; break; case 1: wireframe.visible = false; wireframe1.visible = true; break; } }); gui.add(param, 'line width (px)', 1, 10).onChange(function(val) { matLine.linewidth = val; }); gui.addColor(param, 'line color').onChange(function(val) { matLine.color.set(val); matLineBasic.color.set(val); matLineDashed.color.set(val); }); gui.add(param, 'dashed').onChange(function(val) { matLine.dashed = val; if (val) matLine.defines.USE_DASH = ''; else delete matLine.defines.USE_DASH; matLine.needsUpdate = true; wireframe1.material = val ? matLineDashed : matLineBasic; }); gui.add(param, 'dash scale', 0.5, 1, 0.1).onChange(function(val) { matLine.dashScale = val; matLineDashed.scale = val; }); gui.add(param, 'dash / gap', { '2 : 1': 0, '1 : 1': 1, '1 : 2': 2 }).onChange(function(val) { switch(val) { case 0: matLine.dashSize = 2; matLine.gapSize = 1; matLineDashed.dashSize = 2; matLineDashed.gapSize = 1; break; case 1: matLine.dashSize = 1; matLine.gapSize = 1; matLineDashed.dashSize = 1; matLineDashed.gapSize = 1; break; case 2: matLine.dashSize = 1; matLine.gapSize = 2; matLineDashed.dashSize = 1; matLineDashed.gapSize = 2; break; } }); gui.add(param, 'show points').onChange(function(val) { pointsMesh.visible = val; }); gui.addColor(param, 'point color').onChange(function(val) { pointsMaterial.color.set(val); }); gui.add(param, 'point size', 1, 30).onChange(function(val) { pointsMaterial.size = val; // Update raycaster threshold when point size changes const pointsWorldPosition = new THREE.Vector3(); pointsMesh.getWorldPosition(pointsWorldPosition); raycaster.params.Points.threshold = val * (camera.position.distanceTo(pointsWorldPosition) / 200); }); gui.add(param, 'starfield speed', 0, 0.01, 0.0001).onChange(function(val) { galaxyRotationSpeed = val; // Update the variable }).name('Starfield Rotation Speed'); // Renamed GUI label // Add control for belt independent rotation speed gui.add(param, 'belt speed', 0, 0.02, 0.0005).onChange(function(val) { starBeltIndependentRotationSpeed = val; // Update the variable }).name('Belt Rotation Speed'); }