three.js16 [threejs-journey 3-3] Raycaster and Mouse Events 개요Raycaster는 3D 공간에 보이지 않는 광선(Ray)을 쏘아서 그 광선과 부딪히는(교차하는) 물체가 있는지 감지하는 도구입니다. 마치 레이저 포인트를 쏴서 벽에 점이 생기는 것을 확인하는 것과 같습니다. 이를 통해 다음과 같은 다양한 상호작용을 구현할 수 있습니다.충돌 감지: 플레이어 캐릭터 앞에 벽이 있는지 확인할 수 있습니다.정확한 타겟팅: 총을 쏘았을 때 어떤 물체에 맞았는지 판별할 수 있습니다.마우스 인터렉션: 사용자가 마우스로 클릭하거나 카리키는 3D 객체를 알아낼 수 있습니다.상태 알림: 우주선이 행성 방향으로 향하고 있을 때 경고 메시지를 띄울 수 있습니다.해당 기능들은 게임에 경우에는 마우스로 다양한 이벤트를 사용하고 있습니다. Mouse Events와 함께 만들어보겠습니다. R.. 2025. 8. 23. [threejs-journey 3-2] Imported models 개요Three.js는 다양한 기본 도형(Geometries)을 제공하지만, 복잡하고 정교한 모델을 제작하려면 블렌더 (Blender), 3ds Max, Maya와 같은 전문 3D 소프트웨어를 사용하는 것이 훨씬 효율적입니다. 3D 모델 파일 포맷은 매우 다양하며, 각각 다른 목적을 가지고 있습니다. 포맷을 선택할 때는 아래와 같은 기준들을 고려하게 됩니다.데이터 종류: Geometry, Material, Animation 등 어떤 정보를 담을 수 있는가?파일 크기(무게): 파일의 용량이 얼마나 큰가?압축률: 데이터를 얼마나 효율적으로 압축하는가?호환성: 다양한 소프트웨어와 엔진에서 지원되는가?라이선스: 오픈 소스인가, 특정 기업에 종속적인가?데이터 형식: 텍스트 기반의 ASCII인가, 컴퓨터가 직접 읽.. 2025. 8. 20. [threejs-journey 3-1] Physics 개요물리 효과를 구현할 때, RayCast는 특정 지점에서 광선을 쏘아 충돌을 감지하는 기초적인 기술입니다. 예를 들어 캐릭터가 땅을 밟고 있는지, 벽에 얼마나 가까워졌는지를 확인하는 데 사용될 수 있습니다. 하지만 이는 단순한 '감지'에 가깝습니다. 실제와 같은 물리 현상 즉 마찰력(friction), 장력(tension), 탄성/반발력(bouncing), 질량(mass) 등을 종합적으로 시뮬레이션하려면 전문 물리 엔진 라이브러리가 필요합니다. 이 라이브러리들이 복잡한 물리 법칙을 대신 계산해줍니다. 2D vs 3D 물리 라이브러리 선택프로젝트의 성격에 따라 2D와 3D 라이브러리 중 선택해야 합니다.3D 라이브러리(Ammo.js, Cannon.js, Oimo.js): Z축을 포함한 모든 방향으로의 상.. 2025. 8. 19. [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-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. 이전 1 2 3 다음
