three-js-designs/second.html at main · void032/three-js-designs · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Three.js Particle System</title>
    <style>
      body {
        margin: 0;
        width: 100%;
        overflow: hidden;
        background-color: black;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

      const renderer = new THREE.WebGLRenderer({ alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const particleCount = 1000;
      const spreadDistance = 1000;

      const geometry = new THREE.SphereGeometry(2);
      const material = new THREE.MeshPhongMaterial({ color: 0xffffff });

      const particles = [];

      for (let i = 0; i < particleCount; i++) {
        const sphere = new THREE.Mesh(geometry, material);
        const x = Math.random() * spreadDistance - spreadDistance / 2;
        const y = Math.random() * spreadDistance - spreadDistance / 2;
        const z = Math.random() * spreadDistance - spreadDistance / 2;
        sphere.position.set(x, y, z);
        scene.add(sphere);
        particles.push(sphere);
      }

      const ambientLight = new THREE.AmbientLight(0xffffff, 1);
      scene.add(ambientLight);

      camera.position.z = 300;

      function animate() {
        requestAnimationFrame(animate);

        // Rotate the scene
       scene.rotation.x -= 0.005;
        //scene.rotation.y += 0.1;

        // Move the particles randomly
        for (let i = 0; i < particleCount; i++) {
          const particle = particles[i];
          particle.position.x += Math.random() - 0.5;
          particle.position.y += Math.random() - 0.5;
          particle.position.z += Math.random() - 0.5;

        }
        renderer.render(scene, camera);
      }

      animate();
    </script>
  </body>
</html>