Saturn/index.html at main · ShaharFullStack/Saturn · GitHub

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Space Scene</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #000;
      overflow: hidden;
    }

    .container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    #scene-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .loading-text {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.25rem;
      font-family: Arial, sans-serif;
    }

    .instruction-text {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.875rem;
      font-family: Arial, sans-serif;
      z-index: 100;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    }
  </style>
  <!-- Import Three.js first -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.150.1/three.min.js"></script>
</head>
<body>
  <div class="container">
    <div id="scene-container"></div>
    <div id="loading-text" class="loading-text">Loading scene...</div>
    <div class="instruction-text">Click and drag to rotate view | Scroll to zoom in/out</div>
  </div>

  <!-- Import OrbitControls after Three.js -->
  <script>
  class OrbitControls {
      constructor(camera, domElement) {
        this.camera = camera
        this.domElement = domElement
        this.enableDamping = false
        this.dampingFactor = 0.05
        this.rotateSpeed = 1.0
        this.autoRotate = false
        this.autoRotateSpeed = 1.0
        this.target = new THREE.Vector3()
        this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE }
        this.distance = 10
        this.minDistance = 3
        this.maxDistance = 50
        this.isMouseDown = false
        this.isTouching = false
        this.mouseX = 0
        this.mouseY = 0
        this.touchX = 0
        this.touchY = 0
        this.targetRotationX = 0
        this.targetRotationY = 0
        this.domElement.addEventListener('mousedown', this.onMouseDown.bind(this), false)
        document.addEventListener('mouseup', this.onMouseUp.bind(this), false)
        document.addEventListener('mousemove', this.onMouseMove.bind(this), false)
        this.domElement.addEventListener('wheel', this.onMouseWheel.bind(this), false)
        this.domElement.addEventListener('touchstart', this.onTouchStart.bind(this), false)
        this.domElement.addEventListener('touchend', this.onTouchEnd.bind(this), false)
        this.domElement.addEventListener('touchmove', this.onTouchMove.bind(this), false)
      }
      onMouseDown(event) {
        this.isMouseDown = true
        this.mouseX = event.clientX
        this.mouseY = event.clientY
      }
      onMouseUp() {
        this.isMouseDown = false
      }
      onMouseMove(event) {
        if (this.isMouseDown) {
          const deltaX = event.clientX - this.mouseX
          const deltaY = event.clientY - this.mouseY
          this.targetRotationX += deltaX * 0.01 * this.rotateSpeed
          this.targetRotationY += deltaY * 0.01 * this.rotateSpeed
          this.targetRotationY = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.targetRotationY))
          this.mouseX = event.clientX
          this.mouseY = event.clientY
        }
      }
      onMouseWheel(event) {
        event.preventDefault()
        const delta = event.deltaY > 0 ? 1 : -1
        this.distance += delta * 0.5
        this.distance = Math.max(this.minDistance, Math.min(this.maxDistance, this.distance))
      }
      onTouchStart(event) {
        event.preventDefault()
        if (event.touches.length === 1) {
          this.isTouching = true
          this.touchX = event.touches[0].clientX
          this.touchY = event.touches[0].clientY
        } else if (event.touches.length === 2) {
          const dx = event.touches[0].clientX - event.touches[1].clientX
          const dy = event.touches[0].clientY - event.touches[1].clientY
          this.initialPinchDistance = Math.sqrt(dx * dx + dy * dy)
        }
      }
      onTouchEnd() {
        this.isTouching = false
        this.initialPinchDistance = null
      }
      onTouchMove(event) {
        event.preventDefault()
        if (event.touches.length === 1 && this.isTouching) {
          const deltaX = event.touches[0].clientX - this.touchX
          const deltaY = event.touches[0].clientY - this.touchY
          this.targetRotationX += deltaX * 0.01 * this.rotateSpeed
          this.targetRotationY += deltaY * 0.01 * this.rotateSpeed
          this.targetRotationY = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.targetRotationY))
          this.touchX = event.touches[0].clientX
          this.touchY = event.touches[0].clientY
        } else if (event.touches.length === 2) {
          const dx = event.touches[0].clientX - event.touches[1].clientX
          const dy = event.touches[0].clientY - event.touches[1].clientY
          const distance = Math.sqrt(dx * dx + dy * dy)
          if (this.initialPinchDistance) {
            const delta = (distance - this.initialPinchDistance) * 0.02
            this.distance += delta
            this.distance = Math.max(this.minDistance, Math.min(this.maxDistance, this.distance))
          }
          this.initialPinchDistance = distance
        }
      }
      update() {
        if (this.autoRotate) {
          this.targetRotationX += this.autoRotateSpeed * 0.01
        }
        if (this.enableDamping) {
          this.camera.position.x = this.distance * Math.sin(this.targetRotationX) * Math.cos(this.targetRotationY)
          this.camera.position.y = this.distance * Math.sin(this.targetRotationY)
          this.camera.position.z = this.distance * Math.cos(this.targetRotationX) * Math.cos(this.targetRotationY)
        } else {
          this.camera.position.x = this.distance * Math.sin(this.targetRotationX) * Math.cos(this.targetRotationY)
          this.camera.position.y = this.distance * Math.sin(this.targetRotationY)
          this.camera.position.z = this.distance * Math.cos(this.targetRotationX) * Math.cos(this.targetRotationY)
        }
        this.camera.lookAt(this.target)
      }
    }
    document.addEventListener('DOMContentLoaded', () => {
      const sceneContainer = document.getElementById('scene-container')
      const loadingText = document.getElementById('loading-text')
      const containerWidth = window.innerWidth
      const containerHeight = window.innerHeight
      const scene = new THREE.Scene()
      const camera = new THREE.PerspectiveCamera(35, containerWidth / containerHeight, 0.1, 1000)
      camera.position.z = 5
      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false })
      renderer.setClearColor(0x000000, 1)
      renderer.setSize(containerWidth, containerHeight)
      renderer.setPixelRatio(window.devicePixelRatio)
      sceneContainer.appendChild(renderer.domElement)
      setTimeout(() => {
        loadingText.style.display = 'none'
      }, 2000)
      const particleGeometry = new THREE.BufferGeometry()
      const particleCount = 5000
      const positions = new Float32Array(particleCount * 3)
      const colors = new Float32Array(particleCount * 3)
      for (let i = 0; i < particleCount; i++) {
        const radius = 4 + Math.random() * 8
        const theta = Math.random() * Math.PI * 2
        positions[i * 3] = radius * Math.cos(theta)
        positions[i * 3 + 1] = (Math.random() - 0.15) * 2
        positions[i * 3 + 2] = radius * Math.sin(theta)
        const t = Math.random()
        colors[i * 3] = 1.0
        colors[i * 3 + 1] = 1.0 - t
        colors[i * 3 + 2] = 0.0
      }
      particleGeometry.setAttribute("position", new THREE.BufferAttribute(positions, 3))
      particleGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3))
      const particleMaterial = new THREE.PointsMaterial({ size: 0.03, vertexColors: true, transparent: true, opacity: 0.6 })
      const particles = new THREE.Points(particleGeometry, particleMaterial)
      scene.add(particles)
      const createPlanet = (radius, color, x, y, z) => {
        const geometry = new THREE.SphereGeometry(radius, 32, 32)
        const material = new THREE.MeshStandardMaterial({ color, roughness: 0.7, metalness: 0.3, emissive: 0x331100, emissiveIntensity: 0.2 })
        const planet = new THREE.Mesh(geometry, material)
        planet.position.set(x, y, z)
        scene.add(planet)
        return planet
      }
      const mainPlanet = createPlanet(2.5, 0xaa1b22, 0, 0, 0)
      const glowGeometry = new THREE.SphereGeometry(2.7, 32, 32)
      const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xff6600, transparent: true, opacity: 0.15, side: THREE.BackSide })
      const glow = new THREE.Mesh(glowGeometry, glowMaterial)
      glow.position.copy(mainPlanet.position)
      scene.add(glow)
      const smallPlanet1 = createPlanet(0.3, 0x442211, 4, 5, 0)
      const smallPlanet2 = createPlanet(0.2, 0x553322, 0, 2, 8)
      const smallPlanet3 = createPlanet(0.15, 0x664433, -3, 6, 3)
      const smallPlanet4 = createPlanet(0.1, 0x775544, 3, -2, -3)
      const smallPlanet5 = createPlanet(0.08, 0x886655, -4, -5, -2)
      const diskGeometry = new THREE.BufferGeometry()
      const diskParticleCount = 20000
      const diskPositions = new Float32Array(diskParticleCount * 3)
      const diskColors = new Float32Array(diskParticleCount * 3)
      for (let i = 0; i < diskParticleCount; i++) {
        const radius = 4 + Math.random() * 4
        const theta = Math.random() * Math.PI * 2
        diskPositions[i * 3] = mainPlanet.position.x + radius * Math.cos(theta)
        diskPositions[i * 3 + 1] = mainPlanet.position.y + (Math.random() - 0.5) * 0.3
        diskPositions[i * 3 + 2] = mainPlanet.position.z + radius * Math.sin(theta)
        const distanceFactor = (radius - 4) / 4
        diskColors[i * 3] = Math.random() * 0.3 + 0.7 - distanceFactor * 0.3
        diskColors[i * 3 + 1] = Math.random() * 0.2 * (1 - distanceFactor)
        diskColors[i * 3 + 2] = 0
      }
      diskGeometry.setAttribute("position", new THREE.BufferAttribute(diskPositions, 3))
      diskGeometry.setAttribute("color", new THREE.BufferAttribute(diskColors, 3))
      const diskMaterial = new THREE.PointsMaterial({ size: 0.03, vertexColors: true, transparent: true, opacity: 0.8 })
      const diskParticles = new THREE.Points(diskGeometry, diskMaterial)
      scene.add(diskParticles)
      const ambientLight = new THREE.AmbientLight(0x111111)
      scene.add(ambientLight)
      const mainLight = new THREE.PointLight(0xff4400, 2, 20)
      mainLight.position.set(10, 0, 0)
      scene.add(mainLight)
      const secondaryLight = new THREE.PointLight(0xff9900, 1, 15)
      secondaryLight.position.set(5, 2, 5)
      scene.add(secondaryLight)
      const rimLight = new THREE.PointLight(0xff8800, 1.5, 30)
      rimLight.position.set(5, 0, 0)
      scene.add(rimLight)
      const bloomLight = new THREE.PointLight(0xff3300, 0.5, 10)
      bloomLight.position.copy(mainPlanet.position)
      scene.add(bloomLight)
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = true
      controls.dampingFactor = 0.005
      controls.rotateSpeed = 0.05
      controls.autoRotate = true
      controls.autoRotateSpeed = 0.0005
      camera.position.set(8, 3, 8)
      controls.update()
      const animate = () => {
        requestAnimationFrame(animate)
        particles.rotation.y += 0.0005
        diskParticles.rotation.y += 0.001
        const time = Date.now() * 0.001
        glow.material.opacity = 0.1 + Math.sin(time) * 0.05
        controls.update()
        renderer.render(scene, camera)
      }
      animate()
      const handleResize = () => {
        const width = window.innerWidth
        const height = window.innerHeight
        camera.aspect = width / height
        camera.updateProjectionMatrix()
        renderer.setSize(width, height)
      }
      window.addEventListener('resize', handleResize)
    })
  </script>

  <!-- OrbitControls for mouse interaction -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</body>
</html>