기념일은 아니지만.

index21
class Canvas {
    constructor() {
        this.scrollY = 0;
        this.mouse = new THREE.Vector2(0, 0);
        this.w = window.innerWidth;
        this.h = window.innerHeight;

        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this.renderer.setSize(this.w, this.h); 
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setClearColor(0x0b0115);

        const container = document.getElementById("myCanvas");
        container.appendChild(this.renderer.domElement);

        // 카메라 설정
        this.camera = new THREE.PerspectiveCamera(50, this.w / this.h, 1, 1000);
        this.camera.position.z = 700; 

        this.scene = new THREE.Scene();

        // 조명 설정
        this.pointLight = new THREE.PointLight(0xffffff);
        this.pointLight.position.set(40, 40, 0);
        this.scene.add(this.pointLight);

        this.ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.9);
        this.scene.add(this.ambientLight);

        this.uniforms = {
            "time": {
                value: 1.0
            },
            "resolution": {
                type: "v2",
                value: new THREE.Vector2(this.renderer.domElement.width, this.renderer.domElement
                    .height)
            }
        };

        this.meshList = [];
        for (let i = 0; i < 50; i++) {
            this.mesh = new Donuts(60, this.uniforms);
            this.mesh.position.set(
                getRandom(-this.w / 2, this.w / 2),
                getRandom(-this.h / 2, this.h / 2),
                getRandom(-this.h / 4, this.h / 2)
            );
            this.meshList.push(this.mesh);
            this.scene.add(this.mesh);
        }

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

    render() {
        requestAnimationFrame(() => {
            this.render();
        });

        const sec = performance.now() / 500;

        for (let i = 0; i < this.meshList.length; i++) {
            this.mesh = this.meshList[i];
            this.mesh.rotation.x = sec * (Math.PI / 4) + i * Math.PI / 12;
            this.mesh.rotation.y = sec * (Math.PI / 4) + i * Math.PI / 12;
        }

        this.camera.lookAt(this.scene.position); 
        this.camera.position.x += (this.mouse.x - this.camera.position.x) * .01;
        this.camera.position.y += (-this.mouse.y - this.camera.position.y) * .01;

        this.uniforms.time.value += 0.05;
        this.renderer.render(this.scene, this.camera);
    }

    mouseMoved(x, y) {
        this.mouse.x = x - (this.w / 2); 
        this.mouse.y = -y + (this.h / 2); 
        this.pointLight.position.x += (this.mouse.x - this.pointLight.position.x) * 0.05;
        this.pointLight.position.y += (this.mouse.y - this.pointLight.position.y) * 0.05;
    }

    scrolled(y) {
        this.scrollY = y;
    }

    resized() {
        this.w = window.innerWidth;
        this.h = window.innerHeight;
        this.renderer.setSize(this.w, this.h);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.camera.aspect = this.w / this.h;
        this.camera.updateProjectionMatrix();
        this.uniforms.resolution.value.x = this.renderer.domElement.width;
        this.uniforms.resolution.value.y = this.renderer.domElement.height;
    }
};

class Donuts extends THREE.Mesh {
    constructor(size, uniform) {
        const geometry = new THREE.SphereGeometry(size, size, size);
        const material = new THREE.ShaderMaterial({
            uniforms: uniform,
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent
        });
        //const material = new THREE.MeshBasicMaterial({color: 0x6699FF});

        super(geometry, material);
    }
}

function getRandom(min, max) {
    return Math.random() * (max - min) + min;
}

window.addEventListener('load', function () {
    const canvas = new Canvas();
    canvas.scrolled(window.scrollY);

    window.addEventListener('mousemove', e => {
        canvas.mouseMoved(e.clientX, e.clientY);
    });

    window.addEventListener('scroll', e => {
        canvas.scrolled(window.scrollY);
    });

    window.addEventListener('resize', e => {
        canvas.resized();
    });
});