Frontend

시간 흐름 측정, getDelta()와 getElapsedTime()

getDelta()와 getElapsedTime()주로 3D 라이브러리 Three.js에서 시간 흐름을 측정할 때 사용하는 메서드이다.두 메서드 모두 렌더링이나 애니메이션의 타이밍 조절에 유용하게 사용되지만, 목적과 결과값에서 차이가 있다.  getDelta() 설명마지막 getDelta() 호출 이후 경과된 시간(초 단위)을 반환하는 메서드이다.  용도프레임 간의 간격을 계산해 애니메이션을 프레임 속도에 독립적으로 조정하는 데 사용한다.  특징매번 호출 시 그 이후의 경과 시간만을 계산하므로, 각 프레임마다 경과된 시간이 달라질 수 있다.예를 들어, 60fps로 렌더링 되는 경우 getDelta()는 약 0.0167초를 반환하고, 30 fps로 렌더링 된다면 약 0.033초를 반환한다.프레임 간격이 일..

조명, Light 기본 사용법 (AmbientLight, DirectionalLight, AxesHelper)

✨ AmbientLight : 전체적으로 은은하게 깔아주는 조명  ✨ DirectionalLight : 태양광 같은 조명  ✨ lightHelper: 조명을 시각적으로 확인하는 법  ✨ Dat GUI 만들기 : 객체의 속성을 실시간으로 조정할 수 있는 인터페이스를 이용해 조명 위치 조정  AmbientLight전체적으로 은은하게 깔아주는 조명 AmbientLight( color : Integer, intensity : Float )const light = new THREE.AmbientLight( 0x404040 ); // soft white lightscene.add( light );컴퓨터 그래픽과 3D 렌더링에서 전역 조명을 담당하는 광원이다.이 빛은 씬(scene)의 모든 물체에 고르게 퍼져, 그림..

재질, Material에 Canvas 사용하기

Material에 Canvas 사용하기메모리상의 다른 캔버스를 하나 생성하여 사용하기CanvasTexture는 Three.js에서 HTML5 캔버스를 텍스처로 사용하는 방법이다.이를 통해 동적으로 변경되는 2D 그래픽을 3D 장면의 표면에 입힐 수 있다.  /* CanvasTexture 만들기 */ // Canvas 요소 생성 및 텍스트, 도형 그리기 const texCanvas = document.createElement("canvas"); const texContext = texCanvas.getContext("2d"); // HTML5 캔버스 요소의 2D 렌더링 컨텍스트를 가져오는 코드 texCanvas.width = 500; texCanvas.height = 500; // Canvas..

재질, Environment Map_물체 표면에 반사되는 배경 이미지를 설정

EnvironmentMap3D 장면의 물체 표면에 반사되는 배경 이미지를 설정하여 물체가 주변 환경을 반사하는 효과를 주는 방법이다.장면에 보다 현실적이고 사실적인 재질을 적용할 수 있다.  주요 구성 요소와 기능Cube Texture주로 큐브 형태의 이미지 텍스처를 사용하여 Environment Map을 만든다.6개의 이미지를 사용하여 큐브 맵을 구성하고, 물체 표면에 환경 반사가 매핑된다.HDR 이미지HDR(High Dynamic Range) 이미지 포맷을 사용하면 물체 표면에 더 높은 품질의 빛 반사 효과를 줄 수 있다.이를 통해 빛과 색상이 더 사실적으로 표현된다.Material 설정Environment Map은 MeshStandardMaterial, MeshPhysicalMaterial과 같은 ..