JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script>
      let scene, camera, renderer, particles, particleSystem;
      const PARTICLE_COUNT = 10000;
      let time = 0;

      init();
      animate();

      function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.z = 200;

        const geometry = new THREE.BufferGeometry();
        const positions = new Float32Array(PARTICLE_COUNT * 3);
        const speeds = new Float32Array(PARTICLE_COUNT);

        for (let i = 0; i < PARTICLE_COUNT; i++) {
          const i3 = i * 3;
          let theta = Math.random() * 2 * Math.PI;
          let radius = Math.random() * 50;
          let y = (Math.random() - 0.5) * 100;

          positions[i3] = radius * Math.cos(theta);
          positions[i3 + 1] = y;
          positions[i3 + 2] = radius * Math.sin(theta);

          speeds[i] = 0.5 + Math.random() * 0.5; // 각 입자마다 회전 속도 다르게
        }

        geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute("speed", new THREE.BufferAttribute(speeds, 1));

        const material = new THREE.PointsMaterial({
          color: 0x88ccff,
          size: 1.5,
          transparent: true,
          opacity: 0.7
        });

        particleSystem = new THREE.Points(geometry, material);
        scene.add(particleSystem);

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

        window.addEventListener('resize', () => {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(window.innerWidth, window.innerHeight);
        });
      }

      function...

CSS

body { margin: 0; overflow: hidden; background: #060922; }
      canvas { display: block; }