본문 바로가기

Three.js/Advanced techniques3

[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.