TIL-2024.03.12 - 3js - Fonts - 3

 

목표:

1. 마우스 인터렉티브
2. Shadow
3. 후처리 (EffectComposer)

 

 

마우스 인터렉티브:

 

/* Mouse Interaction : 커서의 움직임에 따라 spotLight도 움직임 */
window.addEventListener("mousemove", (event) => {
    const x = ((event.clientX / window.innerWidth) - 0.5) * 5;
    const y = -((event.clientY / window.innerHeight) - 0.5) * 5; // ThreeJS 와 y 좌표 다름
    spotLight.target.position.set(x, y, -3);
});

 

 

 

Shadow:

renderer.shadowMap.enabled = true; // 그림자 맵 활성화
text.castShadow = true; // 텍스트 객체에 그림자 투영 활성화
plane.receiveShadow = true; // 바닥면(평면)에 그림자 수신 활성화
spotLight.castShadow = true; // 스포트라이트에 그림자 투영 활성화
spotLight.shadow.mapSize.width = 1024; // 스포트라이트 그림자 맵의 너비 설정
spotLight.shadow.mapSize.height = 1024; // 스포트라이트 그림자 맵의 높이 설정

 

 

 

 

 

 

후처리(EffectComposer):

 

참고

https://threejs.org/docs/#examples/en/postprocessing/EffectComposer

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';

 

 

let composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass)

let unrealBloomPass = new UnrealBloomPass({
    strength: 0, // 블룸 효과의 강도
    radius: 0, // 블룸 효과의 반지름
    threshold: 0 // 블룸 효과의 임계값
});
composer.addPass(unrealBloomPass)