codingfarm

1. 소개three.js 에서 post-process를 구현하기 위해 주로 EffectComposer를 사용해왔다.간단한 효과의 경우, ShaderMaterial에 간단히 쉐이더 코드를 작성하지만,복잡한 효과는 Pass를 상속받는 클래스를 구현한다. r3f의 후처리는 주로 @react-three/postprocessing의 EffectComposer를 사용하며, 이는 Three.js addons의 EffectComposer 가 아니라, postprocessing 라이브러리의 Composer 를 감싼것이다.즉, addons와 postprocessing의 EffectComposer는 이름만 같을 뿐 완전히 다른 구현을 가진, 독립적인 대상이다. 2. addons의 EffectComposerThree.js의 ..

1. 소개그동안 실무에서 3d 개발을 위해 R3F를 중점적으로 사용해왔다.캔버스 사이즈 조절, 카메라 시야각 자동 설정, 렌더링 사이클 관리, 메모리 누수 방지, ray-cast 관리 및 이벤트 제공 등 바닐라 Three.js 에서는 제공해주지 않던, 굉장히 많은 편의성 기능들을 누리는 중이다.이전에는 renderer 생성 -> 캔버스 검색 -> html 엘리먼트 부착 -> 캔버스 사이즈 설정-> 카메라 사이즈 설정 -> 렌더링 사이클 호출 등. 복잡한 과정을 거쳐야 했기에, 간단한 테스트를 하나 수행하기 위해 보일러플레이트 코드를 통째로 복붙해야 했지만, 이제는 그저 컴포넌트를 만들고, 내부에 원하는 요소들을 추가하기만 하면 된다.하지만, R3F 컴포넌트를 통해 Three.js의 3d 객체를 정말로..