JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
      // Three.js 기본 설정
      const scene = new THREE.Scene(); // 3D 장면 생성
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      ); // 원근 카메라 설정
      const renderer = new THREE.WebGLRenderer(); // WebGL 렌더러 생성
      renderer.setSize(window.innerWidth, window.innerHeight); // 렌더러 크기를 화면 크기로 설정
      document.body.appendChild(renderer.domElement); // 캔버스를 DOM에 추가

      // Jetstream 프래그먼트 셰이더 - 볼류메트릭 파티클 스트림 효과
      const fragmentShader = `
            uniform float t;    // 시간 변수 (애니메이션용)
            uniform vec2 r;     // 화면 해상도
            varying vec2 vUv;   // UV 좌표
            
            void main() {
                vec2 FC = gl_FragCoord.xy;  // 현재 픽셀의 화면 좌표
                vec4 o = vec4(0.0);         // 최종 출력 색상 (초기값: 검정)
                
                // 레이 마칭을 위한 변수들
                vec3 c, p;                  // c: 카메라 위치, p: 현재 점 위치
                float i = 0.0, z = 0.0, f = 0.0, l = 0.0;  // 반복자, 깊이, 거리, 길이
                
                // 메인 레이 마칭 루프 (60회 반복으로 볼륨 렌더링)
                for(float iter = 0.0; iter < 60.0; iter++) {
                    i = iter + 1.0;
                    if (i > 60.0) break;
                    
                    // 레이 마칭 설정 - 화면 좌표를 3D 공간으로 변환
                    c = z * normalize(vec3(FC.x * 2.0 - r.x, FC.y * 2.0 - r.y, FC.y));
                    p = c;              // 현재 점을 카메라 위치로 초기화
                    p.z -= t / 0.2;     // 시간에 따라 Z축으로 이동 (흐르는 효과)
                    c.z += 9.0;         // 카메라를 뒤로 이동
                    f = 0.0;
                    
                    // 디테일 추가를 위한 내부 루프 (7회 반복으로 노이즈 생성)
                    for(float detail = 0.0; detail < 7.0; detail++) {
                        f = detail + 1.0;
                        if (f > 7.0) break;
             ...

CSS

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