스멀스멀

index40
class THREEScene {
    constructor(container = document.body) {
        this.container = container;

        this.setup();
        this.camera();
        this.addObjects();
        this.eventListeners();
        this.settings();
        this.render();
    }

    settings() {
        this.settings = {
            blur: 0,
            speed: 0.5,
            noiseFreq: 1.0
        };
    }

    setup() {
        this.clock = new THREE.Clock();
        this.mouse = new THREE.Vector2();
        this.scene = new THREE.Scene();
        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this.renderer.setSize(this.viewport.width, this.viewport.height);
        this.renderer.setPixelRatio = window.devicePixelRatio;
        this.renderer.setClearColor(0xffffff, 1);
        this.container.appendChild(this.renderer.domElement);
    }

    camera() {
        const FOV = 50;
        const NEAR = 0.001;
        const FAR = 100;
        const ASPECT_RATIO = this.viewport.aspectRatio;
        this.camera = new THREE.PerspectiveCamera(FOV, ASPECT_RATIO, NEAR, FAR);
        this.camera.position.set(0, 0, 10);
    }

    lights() {
        const ambientLight = new THREE.AmbientLight(0x404040);
    }

    addObjects() {
        this.time = 0;
        this.geometry = new THREE.PlaneBufferGeometry(10, 10, 16, 16);
        this.material = new THREE.ShaderMaterial({
            uniforms: {
                u_time: {
                    type: "f",
                    value: 0
                },
                u_resolution: {
                    type: "v4",
                    value: new THREE.Vector4()
                },
                u_aspect: {
                    type: "f",
                    value: this.aspectRatio
                },
                u_noiseFreq: {
                    value: 0
                },
                blur: {
                    value: 0
                },
                speed: {
                    value: 0
                }
            },
            transparent: true,
            wireframe: false,
            vertexShader: document.getElementById("vertex").textContent,
            fragmentShader: document.getElementById("fragment").textContent
        });

        this.mesh = new THREE.Mesh(this.geometry, this.material);
        this.mesh.position.set(0, 0, 0);
        this.scene.add(this.mesh);
    }

    render() {
        this.camera.lookAt(this.scene.position);
        this.renderer.render(this.scene, this.camera);

        this.material.uniforms.u_time.value = this.clock.getElapsedTime();
        this.material.uniforms.blur.value = this.settings.blur;
        this.material.uniforms.speed.value = this.settings.speed;
        this.material.uniforms.u_noiseFreq.value = this.settings.noiseFreq;

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

    eventListeners() {
        window.addEventListener("resize", this.onWindowResize.bind(this));
    }

    onWindowResize() {
        this.camera.aspect = this.viewport.aspectRatio;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(this.viewport.width, this.viewport.height);
    }

    get viewport() {
        const width = this.container.clientWidth;
        const height = this.container.clientHeight;
        const aspectRatio = width / height;

        this.aspectRatio = aspectRatio;

        return {
            width,
            height,
            aspectRatio
        };
    }
}

const scene = new THREEScene();