배경 효과

index90
const container = document.body

let width = container.offsetWidth,
    height = container.offsetHeight,
    currentTime = 0,
    timeAddition = Math.random() * 1000

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0, 100)
renderer = new THREE.WebGLRenderer({ alpha: true }),
startTime = new Date().getTime()
renderer.setSize(container.offsetWidth, container.offsetHeight)
container.appendChild(renderer.domElement)

let uniforms = {
    time: {
        value: 1 + timeAddition
    },
    resolution: {
        value: new THREE.Vector2(container.offsetWidth, container.offsetHeight)
    }
}

let shaderMaterial = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: shaders.vertex,
    fragmentShader: shaders.fragment,
    //blending:       THREE.AdditiveBlending,
    depthTest: false,
    transparent: true,
    vertexColors: true
});

let geometry = new THREE.PlaneGeometry(width, height, 32);
let plane = new THREE.Mesh(geometry, shaderMaterial);
scene.add(plane);
plane.position.z = 0.5;

camera.position.y = 0;
camera.position.x = 0;
camera.position.z = 100;

function render() {
    var now = new Date().getTime();
    currentTime = (now - startTime) / 1000;
    uniforms.time.value = currentTime + timeAddition;

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