라인 아트 셰이더

import * as THREE from 'three';
import { Line2 } from 'three/addons/lines/Line2.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x05060c);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0, 5.4);
camera.lookAt(0, 0, 0);

const group = new THREE.Group();
const lines = [];
const CURVES = 6;
for (let c = 0; c < CURVES; c++) {
  const points = [];
  const colors = [];
  const a = 3 + c, b = 2 + (c % 3);
  const col = new THREE.Color().setHSL(c / CURVES, 0.85, 0.6);
  const N = 220;
  for (let i = 0; i <= N; i++) {
    const th = (i / N) * Math.PI * 2;
    const r = 1.5 + 0.15 * c;
    const x = r * Math.sin(a * th);
    const y = r * Math.sin(b * th + c);
    const z = 0.2 * Math.cos(a * th - b * th);
    points.push(x, y, z);
    colors.push(col.r, col.g, col.b);
  }
  const geo = new LineGeometry();
  geo.setPositions(points);
  geo.setColors(colors);
  const mat = new LineMaterial({ linewidth: 2.4, vertexColors: true, transparent: true, opacity: 0.85 });
  mat.resolution.set(innerWidth, innerHeight);
  const line = new Line2(geo, mat);
  line.computeLineDistances();
  group.add(line);
  lines.push({ line, mat });
}
scene.add(group);

function resize() {
  renderer.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  lines.forEach(({ mat }) => mat.resolution.set(innerWidth, innerHeight));
}
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const time = t * 0.001;
  group.rotation.y = time * 0.25;
  group.rotation.x = Math.sin(time * 0.18) * 0.3;
  renderer.render(scene, camera);
});