분류 전체보기86 [threejs-journey 2-3] Haunted House 개요지금까지 배운 내용들을 정리해 처음부터 끝까지 직접 유령의 집을 만들어보는 프로젝트입니다. 미리만들어진 3D 모델을 불러오는 대신, Three.js가 제공하는 기본 도형(Primitives)만으로 프로젝트를 진행하면서, 기본 도형을 자유자재로 다루게 되며, 해당 지식은 Three.js 개발의 튼튼한 기초가 됩니다. 텍스처는 고품질의 무료 에셋을 제공하는 Poly Haven에서 직접 고르고, 다운로드하고, Scene에 최적화하여 적용하는 방법까지 함께 알아봅시다.https://polyhaven.com/ Poly Haven • Poly HavenThe Public 3D Asset Librarypolyhaven.com 기본 환경 설정본격적으로 집을 짓기 전에, 몇 가지 중요한 개념을 짚고 넘어가겠습니다.시.. 2025. 8. 10. [threejs-journey 2-2] shadows 개요3D 세계에 가장 중요한 요소는 바로 빛과 그림자입니다. 아무리 멋진 모델이라도 조명이 없으면 그저 검은 화면에 불과하죠. 이번 포스팅에는 Three.js의 사실감을 더하는 그림자를 효율적으로 구현하는 방법까지 깊이 있게 다뤄보겠습니다. 그림자의 기본 원리Three.js에서 그림자는 '섀도우 맵(Shadow Map)' 이라는 기술을 통해 구현됩니다. 원리는 생각보다 간단합니다.광원의 위치에서 장면을 바라봅니다.광원에게 보이는 물체까지의 거리를 흑백 이미지(텍스처)로 저장합니다.(섀도우 맵)최종적으로 장면을 렌더링 할 때, 특정 픽셀이 광원에 가려졌는지 이 섀도우 맵을 보고 판단하여 그림자를 그립니다.이러한 원리 때문에, 우리는 renderer, light, 그리고 각 객체에 '그림자'와 관련된 설정.. 2025. 7. 23. [threejs-journey 2-1] Lights 개요3D 그래픽에서 조명은 단순히 Scene을 밝히는 것을 넘어, 객체의 재질감, 깊이, 그리고 전체적인 분위기를 결정하는 핵심 요소입니다. Three.js는 다양한 시나리오에 맞춰 사용할 수 있는 풍부한 조명 컴포넌트를 제공합니다. 본 포스트에서는 Three.js의 주요 조명들의 특징과 사용법을 알아보고, 사실적인 Scene을 구성하기 위한 성능 고려사항과 최적화 기법까지 다뤄보겠습니다. 테스트를 위해 MeshStandardMaterial이 적용된 여러 기하학 객체(Sphere, Cube, Torus, Plane)를 Scene에 배치한 상태를 가정하고 시작하겠습니다. 이 재질은 물리적으로 반응하므로, 각 조명의 효과를 명확하게 관찰하기에 적합합니다. AmbientLight(전역광)AmbientLigh.. 2025. 7. 15. [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. 이전 1 2 3 4 5 ··· 15 다음
