What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

* index19
let frag = `
    vec4 abyssColor = vec4(1, 0.8, 0.4, 0);
    vec4 tunnelColor = vec4(2, 0.9, 0.3, 1);

    uniform float time;
    uniform vec2 resolution;

    void main() {
        vec2 uv = ( gl_FragCoord.xy - .6 * resolution.xy) / resolution.y * 0.3;
        
        float r = length(uv);
        float y = fract( r / 0.05 / ( r - 0.02 ) + time * 1.);
        
        y = smoothstep( 0.01, 4., y );
    
        float x = length(uv);
        x = smoothstep( 0.5, .01, x );

        gl_FragColor = mix( tunnelColor, abyssColor, x ) * y;
    }
`
let startTime = Date.now()

//화면 생성
const scene = new THREE.Scene();

//카메라 설정
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2);
camera.position.z = 1

//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

//메쉬 설정
geometry = new THREE.PlaneGeometry(10, 2)
material = new THREE.ShaderMaterial({
    uniforms: {
        time: { type: 'f', value: 1.0 },
        resolution: { type: "v2", value: new THREE.Vector2() }
    },
    fragmentShader: frag
})
mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)


//애니메이션 설정
let clock = new THREE.Clock()
function animate() {
    requestAnimationFrame(animate);

    let elapsedMilliseconds = Date.now() - startTime
    material.uniforms.time.value = elapsedMilliseconds / 2000

    renderer.render(scene, camera);
}
animate();
material.uniforms.resolution.value.x = window.innerWidth
material.uniforms.resolution.value.y = window.innerHeight

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