왜 이게 귀엽지!

index67
	const canvas = document.querySelector('.webgl')
    const scene = new THREE.Scene()

    const sizes = {
        width: window.innerWidth,
        height: window.innerHeight
    }

    const degreesToRadians = (degrees) => {
        return degrees * (Math.PI / 180)
    }

    const params = {
        rx: 0,
        ry: 0,
        rz: 0
    }

    const renderer = new THREE.WebGLRenderer({canvas})

    const render = (renderer) => {
        renderer.setSize(sizes.width, sizes.height)
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
        renderer.render(scene, camera)
    }

    // 카메라
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000)
    camera.position.z = 5
    scene.add(camera)

    window.addEventListener('resize', () => {
        sizes.width = window.innerWidth
        sizes.height = window.innerHeight

        camera.aspect = sizes.width / sizes.height
        camera.updateProjectionMatrix()

        render(renderer)
    })

    let pivot
    const points = []
    const numberOfPoints = 600
    let rIncrement = 0

    const drawLine = () => {
        pivot = new THREE.Group()

        for (i = 0; i < numberOfPoints; i++) {
            const totalRotation = degreesToRadians(360 * 10)
            const angleStep = totalRotation / numberOfPoints
            const radius = rIncrement

            const x = Math.cos(i * angleStep) * radius
            const y = Math.sin(i * angleStep) * radius
            const z = i * 0.006
            points.push(new THREE.Vector3(x, y, z))
            rIncrement = i <= numberOfPoints / 2 ? rIncrement + 0.0015 : rIncrement - 0.0015
        }

        const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
        const lineMaterial = new THREE.LineBasicMaterial({
            color: 0xffffff
        })
        const line = new THREE.Line(lineGeometry, lineMaterial)
        pivot.add(line)
        scene.add(pivot)

        line.position.z = numberOfPoints * -0.003
    }

    const rotateLine = () => {
        pivot.rotation.x = params.rx
        pivot.rotation.y = params.ry
        pivot.rotation.z = params.rz
    }

    drawLine()

    // 조명
    const lightAmbient = new THREE.AmbientLight(0x9eaeff, 1)
    scene.add(lightAmbient)

    render(renderer)

    gsap.to(params, {
        duration: 5,
        rx: degreesToRadians(360),
        ry: degreesToRadians(360),
        rz: degreesToRadians(360),
        repeat: -1,
        ease: 'none'
    })

    const draw = () => {
        rotateLine()

        sizes.width = window.innerWidth
        sizes.height = window.innerHeight

        camera.aspect = sizes.width / sizes.height
        camera.updateProjectionMatrix()

        renderer.setSize(sizes.width, sizes.height)
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
        renderer.render(scene, camera)
    }

    gsap.ticker.add(draw)