Three.js/Intro12 [threejs-journey 1-12] 3D Text 개요Three.js Scene에 3D Text를 추가하는 방법을 알아봅니다. 3D Text는 단순히 정보를 보여주는 것을 넘어, 디버깅이나 인터랙티브한 경험을 만드는 데 매우 유용한 요소가 될 수 있습니다. 화면에 정보를 띄우는 디버그 UI의 3D 버전이라고 생각하면 쉽습니다. TextureGeometry 사용법 3D 텍스트를 만들기 위해서는 먼저 폰트 파일을 로드하고, 이를 바탕으로 TextGeometry를 생성해야 합니다. Three.js는 자체적으로 폰트 파일을 가지고 있지 않기 때문에, 직접 폰트 파일을 프로젝트에 포함해야 합니다. Three.js에서 제공하는 기본 헬베티카(Helvetica) 폰트를 사용해 보겠습니다./node_modules/three/examples/fonts/ 경로에서 he.. 2025. 7. 4. [threejs-journey 1-11] Material 개요머터리얼(Material)은 3D 객체의 겉 표면을 어떻게 보이게 할지를 결정하는 요소입니다. 각 픽셀에 색을 어떻게 입힐지, 질감은 어떤지, 빛에 어떻게 반응할지를 담당합니다. 이전에 했던 작업들을 복습하고, 해당 작업과 머터리얼을 합쳐 이용하는 방법을 알아봅시다. Three.js의 기본 머터리얼부터 텍스처 활용, 그리고 다양한 옵션까지 한 번에 이해할 수 있도록 구성했습니다. - 기본 빌트인 머터리얼Three.js에서는 여러 가지 빌트인 머터리얼을 제공합니다. 추후에 커스텀 쉐이더를 써서 직접 머터리얼을 만들어볼 수도 있지만, 지금은 준비될 걸로도 충분히 만들 수 있습니다. 먼저 가장 기본적인 예제를 보겠습니다./** * Objects */// MeshBasicMaterialconst materi.. 2025. 6. 27. [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. 이전 1 2 다음
