Frontend/Three.js

삼각함수를 이용해 원형적인 움직임을 구현하기

Math.cos와 Math.sin은 삼각함수를 이용해 각도를 기반으로 한 값을 반환하는 JavaScript의 내장 함수이다.두 함수는 주로 그래픽, 애니메이션, 주기적인 패턴 생성 등에서 많이 사용된다.  Math.cos() 설명Math.cos() 함수는 특정 각도의 코사인 값을 반환한다.이 값은 주어진 각도의 x 축에서의 위치를 의미한다.  입력 및 반환 값입력 값은 라디안 단위이다. 예를 들어, 90도는 Math.PI / 2라디안으로 표현된다.반환 값은 -1에서 1 사이이며, 주기는 2π이다.  용도주기적이고 수평적인 움직임(예: 회전하는 물체의 x 위치 계산).원형 궤도를 따라 이동하는 애니메이션에서의 x 좌표 계산.  예시const angle = Math.PI / 4; // 45도const x =..

시간 흐름 측정, 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..