전체 글118 getter setter getter settergetter와 setter는 클래스에서 객체의 속성 값을 안전하게 가져오거나 설정할 수 있도록 도와주는 메서드입니다. 이를 통해 데이터의 무결성을 유지하고, 속성에 대한 추가적인 로직(예: 검증, 변환 등)을 적용할 수 있습니다.getter와 setter의 기본 개념getter: 클래스 속성 값을 가져올 때 사용하는 메서드입니다.setter: 클래스 속성 값을 설정할 때 사용하는 메서드입니다.JavaScript에서 get과 set 키워드를 사용하여 정의합니다.기본 예제class Person { constructor(name, age) { this._name = name; // 언더스코어(_)를 붙여 직접 접근을 방지 this._age = age; .. 2025. 2. 2. try catch try catchtry...catch 문은 예외 처리(Exception Handling)를 위해 사용됩니다. 코드 실행 중 오류가 발생하면 try 블록에서 예외가 감지되고, catch 블록에서 해당 예외를 처리할 수 있습니다. 이를 통해 프로그램이 예상치 못한 오류로 인해 중단되는 것을 방지할 수 있습니다.try...catch 문 기본 구조try { // 오류가 발생할 가능성이 있는 코드} catch (error) { // 오류가 발생했을 때 실행되는 코드} finally { // 선택적으로 사용 가능하며, 오류 발생 여부와 관계없이 실행됨}finally 블록은 예외 발생 여부와 상관없이 실행되는 부분으로, 주로 리소스 정리 등에 사용됩니다.fetch와 async/await을 활용한 예제.. 2025. 2. 2. atan2 atan2Math.atan2(y, x)는 아크탄젠트(arctangent) 함수로, 양의 x축과 (0, 0)에서 (x, y)점까지의 광선 사이의 평면 각도(라디안 단위)를 반환합니다.atan2(y, x)는 결과를 -π부터 π까지 반환하여 사분면을 정확히 판별할 수 있습니다.Three.js에서 atan2 활용 사례Three.js에서는 atan2를 주로 두 점 사이의 회전 각도를 계산할 때 사용합니다.예를 들어 다음과 같은 경우에 활용할 수 있습니다.두 개체가 특정 방향을 바라보도록 설정카메라가 특정 개체를 바라보게 만들기2D 평면에서 캐릭터가 마우스를 향하게 만들기예제: atan2로 오브젝트 회전하기아래 코드는 Three.js에서 Math.atan2를 사용하여 마우스 위치에 따라 박스가 마우스를 바라보도록 .. 2025. 2. 2. Raycaster RaycasterRaycasting은 화면에서 마우스 클릭이나 드래그 같은 입력이 3D 공간에서 어떤 객체와 충돌하는지 검사하는 방법입니다. 쉽게 말해, 보이지 않는 레이저(광선)를 쏘아서 그 광선이 어떤 물체에 닿았는지 확인하는 방식입니다.Raycast가 언제 필요할까?마우스로 3D 오브젝트 선택하기오브젝트 간 충돌 감지레이저 포인터 만들기 (VR, AR 등)캐릭터가 땅을 밟고 있는지 확인하기 (물리적 충돌 감지)Three.js에서 Raycast 사용법1️⃣ Raycaster 객체 생성const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();Raycaster는 광선을 쏘는 역할을 하고, Vector2는 마우스 위치를 저장하는 역.. 2025. 2. 1. Cannon.js Cannon.jsCannon.js는 물리 엔진(Physics Engine)으로, Three.js에서 물리적인 충돌, 중력, 힘, 마찰 등을 구현할 때 사용됩니다.Three.js 자체에는 물리 엔진이 없기 때문에, Cannon.js 같은 물리 엔진을 사용하여 사실적인 충돌 및 중력 효과를 추가할 수 있습니다. Three.js + Cannon.js 연결 방법 (기본 예제)이제 Three.js와 Cannon.js를 함께 사용하여 물리적으로 떨어지는 박스 만들기 예제를 살펴보겠습니다.1. 필요한 라이브러리 불러오기먼저, Cannon.js와 Three.js를 불러옵니다.import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.mod.. 2025. 2. 1. Three.Clock Three.ClockTHREE.Clock은 Three.js에서 시간을 다루는 클래스로, 애니메이션을 부드럽게 만들 때 사용합니다.주요 기능경과 시간(deltaTime) 계산→ 이전 프레임과 현재 프레임 사이의 시간 차이를 구할 수 있음게임 루프에서 부드러운 애니메이션 구현→ 프레임 속도(FPS)가 변해도 일관된 움직임 유지 가능타이머 역할→ 특정 이벤트를 일정 시간 후 실행할 때 사용 가능기본 사용법import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';const clock = new THREE.Clock(); // 시계 생성function animate() { requestAnimationFra.. 2025. 2. 1. 이전 1 2 3 4 ··· 20 다음