모션 이펙트

* index20
const container = document.getElementById("container");

//화면 생성
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000022);

//카메라 설정
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.z = 300;
camera.position.y = 0;

//조명 설정
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(-50, 100, 50);
pointLight.castShadow = true;
scene.add(pointLight);

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

//메쉬 설정
const modelGeometry = new THREE.IcosahedronBufferGeometry(70);
const material = new THREE.MeshPhongMaterial({
    color: 0x23afd3,
    specular: 0x050505,
    shininess: 100
});
const model = new THREE.Mesh(modelGeometry, material);
model.position.x = -20;
scene.add(model);

//렌더링 설정
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

//composer 효과
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
const renderTargetParameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    stencilBuffer: false
};

const savePass = new THREE.SavePass(
    new THREE.WebGLRenderTarget(
        container.clientWidth,
        container.clientHeight,
        renderTargetParameters
    )
);

// ShaderPass 효과
const blendPass = new THREE.ShaderPass(THREE.BlendShader, "tDiffuse1");
blendPass.uniforms["tDiffuse2"].value = savePass.renderTarget.texture;
blendPass.uniforms["mixRatio"].value = 0.8;

// output pass 효과
const outputPass = new THREE.ShaderPass(THREE.CopyShader);
outputPass.renderToScreen = true;

composer.addPass(renderPass);
composer.addPass(blendPass);
composer.addPass(savePass);
composer.addPass(outputPass);

//애니메이션 설정
let counter = 0;
function animate() {
    requestAnimationFrame(animate);

    model.rotation.x += 0.02;
    model.rotation.y += -0.02;
    model.rotation.z += 0.03;
    model.position.x += Math.sin(counter);
    counter += 0.05;

    composer.render();
    //renderer.render(scene, camera);
}
animate();   

//화면 사이즈 설정
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);