Interactive

Three.js 딥다이브 전 준비운동 중….

나도 멋진 애니메이션 만들고 시포요

마우스나 키보드 동작으로 카메라를 이동시켜보자

Three.js의 빌트인 Geometry와 자바스크립트의 Float32Array 타입을 이해해보자

개체에 텍스쳐를 입혀보자!

lil-gui 를 사용해서 디버깅을 해보자

Three.js에서 Material은 3D 객체의 표면을 렌더링하는 방법을 정의하는 중요한 요소입니다. 각 Material은 빛과 상호 작용하는 방식, 색상, 반사율, 투명도 등의 속성을 결정합니다.

TextGeometry는 Three.js에서 3D 텍스트를 생성하는 데 사용되는 기하학적 형상(Geometry)입니다. 일반적인 2D 텍스트가 아닌 3D 입체 문자를 생성할 수 있으며, 다른 Mesh 객체처럼 Material을 적용하여 스타일링할 수 있습니다.

자바스크립트로 조명을 구현해보자

Shadow Map은 3D 그래픽에서 그림자(Shadow)를 표현하기 위한 핵심 기법 중 하나다. Shadow Map은 카메라가 아닌 빛(Light)의 시점에서 본 장면의 깊이 정보(depth)를 저장한 텍스처(texture)다.

Three.js에서 Shadow를 최적화해보자