Three.js/Class techniques6 [threejs-journey 2-6] Scroll based animation 개요Three.js를 활용하여 스크롤에 반응하는 동적인 3D 배경을 만드는 방법을 단계별로 알아보겠습니다. 사용자의 스크롤에 따라 카메라가 움직이고, 마우스 위치에 따라 패럴랙스 효과가 나타나며, 특정 섹션에 도달했을 때 오브젝트 애니메이션이 실행되는 인터랙티브한 웹페이즈를 만들어 봅시다. 기본 환경 설정 및 배경 투명화가장 먼저 HTML, CSS 그리고 Three.js의 기본 구조를 설정합니다. 초기 문제점은 스크롤 시 Three.js 캔버스 영역 외에 흰색 배경이 나타나는 것입니다. 이를 해결하기 위해 캔버스를 투명하게 만들고 HTML 배경색이 보이도록 설정해야 합니다. 핵심 수정 사항:WebGLRenderer 설정 변경: alpha: true 옵션을 추가하여 캔버스 배경을 투명하게 만듭니다.CSS.. 2025. 8. 16. [threejs-journey 2-5] Galaxy Generator 개요Three.js 파티클(THREE.Points)을 응용하여 아름다운 나선 은하를 만드는 방법을 단계별로 문제를 정의해 분할하는 방식으로 안내합니다. dat.gui를 사용해 실시간으로 은하의 형태를 바꾸면서 파티클 시스템의 원리를 깊이 있게 이해해 보겠습니다. 기본설정(함수와 파라미터) 먼저 은하를 생성할 generateGalaxy함수를 선언하고, dat.gui로 제어할 설정값들을 parameters 객체에 모아 관리합니다. 이렇게 하면 코드가 깔끔해지고 값을 변경하기 쉬워집니다.// GUI 컨트롤러const gui = new dat.GUI();// 은하의 속성을 관리할 파라미터 객체const parameters = {};parameters.count = 100000; // 파티클 개수paramet.. 2025. 8. 13. [threejs-journey 2-4] Particles 개요이번 포스트에서는 Three.js를 사용하여 웹에서 동적인 파티클 효과(별, 눈, 연기 등)를 구현하는 방법을 알아보겠습니다. 파티클은 수많은 작은 이미지를 사용해 화려한 시각 효과를 만들어내지만, 그만큼 성능 최적화가 매우 중요합니다. 이 글에서는 파티클의 기본 개념과 애니메이션을 다뤄볼 것이고, 추후에 셰이더에서 파티클을 더 자세하게 다뤄보겠습니다. Points, PointsMaterial 가장 먼저, 파티클이 무엇인지 이해해야 합니다. Three.js에서 파티클은 수많은 작은 Plane(평면)으로 이루어져 있으며, 이 Plane들은 항상 카메라를 바라보도록 설정되어 있습니다.(이것을 '빌보드'라고 합니다.) 가장 간단하게 파티클을 만드는 방법은 일반적인 Geometry와 PointsMateri.. 2025. 8. 12. [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. 이전 1 다음
