[Three.js] Three.js 함수

Vector3

• x, y, z 좌표를 사용하여 3차원 공간에서 점 또는 방향을 나타냄
• 기본값은 (0, 0, 0)
• 백터 정규화
  • 벡터의 크기를 1로 만드는 과정
  • .normalize()
• 점곱(.dot)
  • 두 벡터 간의 스칼라 값을 계산하는 연산
  • 주로 벡터 간의 각도를 구하거나 두 벡터가 이루는 각도를 판단하는 데 사용
• 외적(.cross)
  • 두 벡터 간의 새로운 벡터를 계산하는 연산
  • 이 벡터는 원래 두 벡터에 모두 수직이며, 주로 평면의 법선 벡터를 구하거나 회전 축을 찾는 데 사용

QuadraticBezierCurve3

• 세 개의 3차원 점을 사용하여 이차 베지어 곡선을 생성
• 시작점, 제어점, 끝점을 지정하여 곡선 정의

BufferGeometry

• 저수준의 기하학적 모델
• 버텍스(Vertex), 인덱스(Index), 노멀(Normal), UV 및 기타 속성 데이터를 담고 있음
  • 이러한 데이터는 GPU에서 직접 처리될 수 있어 렌더링 성능을 향상 시킬 수 있음

LineBasicMaterial

• 선의 기본 재질을 정의하는 클래스
• 선의 색상을 지정할 수 있으며, 선의 두께나 텍스처와 같은 복잡한 속성은 없음
  • 따라서 간단한 색상으로 선을 그릴 때 사용

LineMaterial

• 선의 재질을 정의하는 클래스
• 선의 색상을 지정할 수 있으며, 선의 두께나 텍스처와 같은 속성 사용 가능
• 해상도(resolution) 속성을 통해 선의 두께가 화면 크기에 맞게 조정 가능

Line

• 선을 나타내는 클래스
• 대부분의 환경에서 LineBasicMaterial의 linewidth 속성이 무시됨
  • 특히 WebGL이 사용하는 대부분의 GPU와 드라이버는 1픽셀 너비의 선만 지원
• THREE.BufferGeometry 또는 THREE.Geometry와 THREE.LineBasicMaterial 또는 THREE.LineDashedMaterial을 사용하여 구성

Line2

• 선을 나타내는 클래스로 선의 두께를 변경할 수 있음
• THREE.LineGeometry와 THREE.LineMaterial을 사용하여 구성

CylinderGeometry

• 실린더의 기하학적 모델을 생성하는 클래스
• 높이, 상단과 하단의 반지름, 둘레 분할 세그먼트 수 등을 설정하여 실린더 모양의 지오메트리를 만들 수 있음
• radiusTop
  • 원기둥의 윗면 반지름
  • 화살표의 경우, 시작 부분에서는 0으로 설정하여 윗면이 없도록 만듦
• radiusBottom
  • 원기둥의 아랫면 반지름
  • 화살표 머리의 너비를 결정
• height
  • 원기둥의 높이
  • 화살표의 머리부분과 몸통의 길이를 결정하는 값
• radialSegments
  • 원기둥을 구성하는 원의 세그먼트(분할된 부분)의 수
  • 이 값이 높을수록 원기둥의 주변을 더 많은 삼각형으로 근사화하여 부드러운 곡선을 형성
• heightSegments
  • 원기둥의 높이를 나눌 세그먼트(분할된 부분)의 수
  • 이 값이 높을수록 원기둥의 높이 방향으로 더 많은 삼각형이 생성되어 세밀한 모양을 나타냄

MeshPhongMaterial

• Phong shading 모델을 사용하는 메쉬의 재질을 정의하는 클래스
• 빛의 반사와 그림자 등을 자연스럽게 처리할 수 있음
• 주로 광택이나 반사가 있는 표면을 표현할 때 사용

Mesh

• Three.js에서 가장 기본적인 3D 객체인 메쉬를 생성하는 클래스
• 버퍼 지오메트리와 메쉬 재질을 이용하여 3D 객체를 만들 수 있음
• 버텍스와 삼각형으로 구성된 3D 모델을 나타냄

AmbientLight

• scene 내의 모든 object들에 전 방향에서 조명을 비춰줌

DirectionalLight

• 태양광, 평행하기 이동하는 빛