CatmullRomCurve3

//화면 생성
let scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 30, 150);

//카메라 설정
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 150);
camera.position.y = 400;
camera.position.z = 400;

//렌더링 설정
let renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

//
var points = [
    [68.5, 185.5],
    [1, 262.5],
    [270.9, 281.9],
    [345.5, 212.8],
    [178, 155.7],
    [240.3, 72.3],
    [153.4, 0.6],
    [52.6, 53.3],
    [68.5, 185.5]
];
for (var i = 0; i < points.length; i++) {
    var x = points[i][0];
    var y = Math.random() * 100;
    var z = points[i][1];
    points[i] = new THREE.Vector3(x, y, z);
}
var path = new THREE.CatmullRomCurve3(points);
path.closed = true;

var tubeDetail = 100;
var circlesDetail = 40;
var radius = 4;
var frames = path.computeFrenetFrames(tubeDetail, true);
var geometry = new THREE.Geometry();
var color = new THREE.Color(0x000000);

for (var i = 0; i < tubeDetail; i++) {
    var normal = frames.normals[i];
    var binormal = frames.binormals[i];
    var index = i / tubeDetail;
    var p = path.getPointAt(index);

    for (var j = 0; j < circlesDetail; j++) {
        var position = p.clone();
        var angle = (j / circlesDetail) * Math.PI * 2 + (index * Math.PI * 5);
        var sin = Math.sin(angle);
        var cos = -Math.cos(angle);

        var normalPoint = new THREE.Vector3(0, 0, 0);
        normalPoint.x = (cos * normal.x + sin * binormal.x);
        normalPoint.y = (cos * normal.y + sin * binormal.y);
        normalPoint.z = (cos * normal.z + sin * binormal.z);
        normalPoint.multiplyScalar(radius);

        position.add(normalPoint);
        var color = new THREE.Color("hsl(" + (index * 360 * 4) + ", 100%, 50%)");
        geometry.colors.push(color);
        geometry.vertices.push(position);
    }
}
var material = new THREE.PointsMaterial({size: 0.2, vertexColors: THREE.VertexColors});
var tube = new THREE.Points(geometry, material);
scene.add(tube);

var percentage = 0;

//애니메이션 설정
function animate() {
    requestAnimationFrame(animate);

    percentage += 0.0005;
    var p1 = path.getPointAt(percentage % 1);
    var p2 = path.getPointAt((percentage + 0.01) % 1);
    camera.position.set(p1.x, p1.y, p1.z);
    camera.lookAt(p2);

    renderer.render(scene, camera);
}
animate();


//화면 사이즈 설정
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);