분류 전체보기86 [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-4] Particles 개요이번 포스트에서는 Three.js를 사용하여 웹에서 동적인 파티클 효과(별, 눈, 연기 등)를 구현하는 방법을 알아보겠습니다. 파티클은 수많은 작은 이미지를 사용해 화려한 시각 효과를 만들어내지만, 그만큼 성능 최적화가 매우 중요합니다. 이 글에서는 파티클의 기본 개념과 애니메이션을 다뤄볼 것이고, 추후에 셰이더에서 파티클을 더 자세하게 다뤄보겠습니다. Points, PointsMaterial 가장 먼저, 파티클이 무엇인지 이해해야 합니다. Three.js에서 파티클은 수많은 작은 Plane(평면)으로 이루어져 있으며, 이 Plane들은 항상 카메라를 바라보도록 설정되어 있습니다.(이것을 '빌보드'라고 합니다.) 가장 간단하게 파티클을 만드는 방법은 일반적인 Geometry와 PointsMateri.. 2025. 8. 12. 이전 1 2 3 4 ··· 15 다음
