-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgalaxy_c.html
101 lines (84 loc) · 4.31 KB
/
galaxy_c.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milky Way Galaxy Visualization</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Create the scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
// Create the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 200, 300);
camera.lookAt(0, 0, 0);
// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create stars
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
// Create an array to hold the star positions
const starPositions = [];
// Function to generate random positions within a disc with arms
function generateArmPositions(armData, count, offsetX = 0, offsetY = 0, offsetZ = 0) {
for (let i = 0; i < count; i++) {
const { startRadius, endRadius, startAngle, endAngle, spread, twist } = armData;
const r = startRadius + (endRadius - startRadius) * Math.sqrt(Math.random());
const theta = startAngle + (endAngle - startAngle) * Math.random();
const spiralFactor = r * twist;
const x = r * Math.cos(theta + spiralFactor) + offsetX + (Math.random() - 0.5) * spread;
const y = (Math.random() - 0.5) * 2 + offsetY;
const z = r * Math.sin(theta + spiralFactor) + offsetZ + (Math.random() - 0.5) * spread;
starPositions.push(x, y, z);
}
}
// Define arm data (startRadius, endRadius, startAngle, endAngle, spread, twist)
const arms = [
{ startRadius: 20, endRadius: 100, startAngle: 0, endAngle: Math.PI, spread: 10, twist: 0.3 }, // Perseus Arm
{ startRadius: 20, endRadius: 80, startAngle: Math.PI / 2, endAngle: 3 * Math.PI / 2, spread: 8, twist: 0.4 }, // Sagittarius Arm
{ startRadius: 10, endRadius: 60, startAngle: Math.PI, endAngle: 2 * Math.PI, spread: 6, twist: 0.5 }, // Norma Arm
{ startRadius: 10, endRadius: 40, startAngle: 3 * Math.PI / 2, endAngle: 5 * Math.PI / 2, spread: 5, twist: 0.6 }, // Scutum-Crux Arm
{ startRadius: 30, endRadius: 70, startAngle: 0, endAngle: Math.PI / 2, spread: 3, twist: 0.5 }, // Local Spur
];
// Generate stars for the galaxy arms
arms.forEach(arm => generateArmPositions(arm, 20000));
// Generate stars for the galaxy bulge
generateArmPositions({ startRadius: 0, endRadius: 20, startAngle: 0, endAngle: 2 * Math.PI, spread: 10, twist: 0.1 }, 20000, 0, 0, 0);
// Convert positions array to a Float32Array and set it to the star geometry
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
// Create the star points and add them to the scene
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
// Add ambient light
const ambientLight = new THREE.AmbientLight(0x888888);
scene.add(ambientLight);
// Add point light to simulate the galaxy center
const pointLight = new THREE.PointLight(0xffffff, 1, 500);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate the galaxy for better visualization
scene.rotation.y += 0.001;
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>