본문 바로가기

three.js16

[threejs-journey 2-2] shadows 개요3D 세계에 가장 중요한 요소는 바로 빛과 그림자입니다. 아무리 멋진 모델이라도 조명이 없으면 그저 검은 화면에 불과하죠. 이번 포스팅에는 Three.js의 사실감을 더하는 그림자를 효율적으로 구현하는 방법까지 깊이 있게 다뤄보겠습니다. 그림자의 기본 원리Three.js에서 그림자는 '섀도우 맵(Shadow Map)' 이라는 기술을 통해 구현됩니다. 원리는 생각보다 간단합니다.광원의 위치에서 장면을 바라봅니다.광원에게 보이는 물체까지의 거리를 흑백 이미지(텍스처)로 저장합니다.(섀도우 맵)최종적으로 장면을 렌더링 할 때, 특정 픽셀이 광원에 가려졌는지 이 섀도우 맵을 보고 판단하여 그림자를 그립니다.이러한 원리 때문에, 우리는 renderer, light, 그리고 각 객체에 '그림자'와 관련된 설정.. 2025. 7. 23.
[threejs-journey 1-10] Texture 개요3D 모델을 리얼하게 만들고 싶다면, 단순히 메쉬만으로는 부족합니다. 바로 이때 필요한 것이 텍스처(Texture) 입니다. 텍스처는 이미지 파일을 3D 모델의 표면에 입혀 색상, 질감, 반사, 광택, 음영 등 현실적인 시각 효과를 만들어주는 역할을 합니다. 요즘에는 주로 PBR (Physically Based Rendering) 방식이 널리 사용되며, 아래는 대표적인 7가지 PBR 텍스처에 대한 정리입니다. 아래 링크는 유명한 Door Texture 예시를 기준으로 각 텍스처가 어떤 역할을 하는지 살펴봅니다.https://3dtextures.me/2019/04/16/door-wood-001/ Door Wood 001Door Wood 001 – Free seamless texture, 1024 x 1.. 2025. 6. 25.
[threejs-journey 1-9] Debug UI 개요Three.js를 사용하면서 3D Scene의 파라미터를 실시간을 조정하고 싶은 순간이 있습니다. 조명 세기, 카메라 위치, 메쉬의 회전값, 머터리얼의 컬러 등 에 매우 유용한 도구가 바로 dat.GUI와 lil-gui입니다. 이 글에서는 그 차이와 사용법, 그리고 실제 실무에서 활용할 수 있는 예제들을 하나씩 정리해봅시다. dat.GUIdat.GUI는 Three.js 예제에서 오랫동안 사용된 고전적인 UI 컨트롤 라이브러리입니다. 사이드에 뜨는 슬라이더 기반의 컨트롤러를 통해 개발자가 실시간으로 3D 오브젝트 속성값을 조절할 수 있도록 도와줍니다.const gui = new dat.GUI();gui.add(light, 'intensity', 0, 2, 0.01); // 라이트 세기 조절gui.add.. 2025. 6. 22.
[threejs-journey 1-8] Geometries 개요Three.js의 Geometry는 정점(Position), 법선(Normal), UV, 인덱스(Index) 등으로 구성되며, 모델의 형태를 정의하는 핵심 데이터입니다. 실무에서는 GPU에 최적화된 BufferGeometry와 Mesh 객체를 조합해 효율적인 렌더링과 조작을 수행합니다. - GeometryThree.js의 Geometry는 다음과 같은 요소로 이루어져 있습니다:Position: 각 정점의 3D 위치. (x, y, z) 좌표값Normal: 정점 또는 면의 방향 벡터. 조명 연산에 사용 UV: 텍스처 맵핑을 위한 2D 좌표. (u, v) 범위는 보통 0~1의 UV좌표 존재Index: 중복 정점의 재사용을 위한 인덱스 배열이러한 정보는 BufferGeometry를 통해 효율적으로 GPU에 .. 2025. 6. 16.
[threejs-journey 1-7] Resizing & FullScreen 개요Three.js를 이용해 웹에서 3D Scene을 구현할 때는 브라우저의 크기 변화나 디스플레이 환경에 따라 다양한 문제가 발생할 수 있습니다. 본 문서에서는 창 리사이징 시 발생하는 화면 찌그러짐과 여백 문제, 그리고 전체화면(Fullscreen) 모드 구현에 대한 해결 방법을 다루겠습니다. - ResizingThree.js로 만든 3D Scene을 웹을 렌더링하면, 브라우저 창 크기를 조절할 때 그림이 찌그러지거나, 모서리에 하얀 여백이 생기는 현상이 발생할 수 있습니다. 기존 sizes를 800x600 에서 window.inner 변수를 이용해 실제 뷰 포트를 조정해줍니다.const sizes = { width: window.innerWidth, height: window.in.. 2025. 6. 12.
[threejs-journey 1-6] Control 개요Three.js에서는 다양한 카메라 및 오브젝트 제어 컨트롤(Controls)이 제공되어, 3D 장면을 보다 자유롭고 직관적으로 탐색하거나 조작할 수 있도록 도와줍니다. 각 컨트롤은 사용 목적과 조작 방식이 다르므로, 모든 기능을 암기할 필요는 없습니다. 대신, 사용하려는 상황에 따라 적절한 컨트롤을 선택하여 문서를 참고하면서 적용하면 됩니다.- 각 컨트롤은 Three.js 공식 문서에서 예제와 함께 확인할 수 있습니다.- 대표적인 컨트롤로는 OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, TransformControls, DragControls 등이 있으며, 각각의 특성과 입력 방식이 다릅.. 2025. 6. 10.

티스토리툴바