React Three Fiber 복기 4일차

React Three Fiber

 

 

Three.js 를 계속 사용하다보니
Mesh에 대해서 정확하게 인지 하지 않고서는, 이거 Three.js 를 내가 올바르게 공부한게 맞나 싶을 정도로 매우 중요한거 같다.

 

HTML 에서 div 태그를 자주 사용하듯, 현재 자연스럽게 mesh  태그 또한 사용 빈도가 많으며, 마치 내가 
HTML 에서 코드 작성시, div 태그를 사용하듯 mesh 태그를 먼저 사용하고 여기서 내가 원하는걸 표현해야지~ 하는데 실상 mesh 에 대한 이해가 정말 없는거 같아서 정리가 필요한거 같다. 

 

Mesh의 기본 개념

Mesh 는 3D 공간에 표시되는 실제 객체입니다. Three.js 에서 눈에 보이는 거의 모든 3D 객체는 Mesh 를 통해 생성됩니다. 

 

Mesh 의 구성 요소

Mesh 는 크게 두 가지 핵심 구성 요소로 이루어져 있습니다.

1. Geometry(형상) : 객체의 형태와 구조를 정의합니다. 정점(verices) , 면(faces) , 법선 벡터(normals) 등 정보를 포함합니다. 

2. Material(재질) : 객체의 외관을 정의합니다. 색상, 투명도, 텍스처, 반사율 등 시각적 특성을 결정합니다.

 

Three.js

// 1.BoxGeometry 생성 : 1x1x1 크기의 정육면체 형상을 정의
const geometry = new THREE.BoxGeometry(1,1,1);

// 2.MeshBasicMaterial 생성: 노란색(0xffff00)의 기본 재질을 정의 
const material = new THREE.MeshBasicMaterial({color:0xffff00});

// 3. Mesh 생성: 앞서 정의한 형상과 재질을 결합하여 3D 객체를 생성합니다.
const mesh = new THREE.Mesh(geometry , material);

// 4. Scene 에 추가 : 생성된 Mesh 를 scene 에 추가하여 렌더링 대상으로 추가합니다.
scene.add(mesh);

 

 

javascript 

const parent = document.querySelector(".parent");
const childLi = document.createElement("li");

childLi.innerText = "child4";

parent.appendChild(childLi);


//result

<ul class="parent">
  <li>child1</li>
  <li>child2</li>
  <li>child3</li>
  <li>child4</li>
</ul>

 

Mesh 의 특징과 기능

1. 렌더링 대상 

Three.js 에서 Scene에 생성된 객체를 Mesh라고 합니다. Mesh는 삼각형 폴리곤으로 구성된 객체를 표현하는 클래스입니다. 

모든 Mesh는 Scene 에 추가되어야만 화면에 표시됩니다.

 

2. 변형(Transformation) 적용 가능

Mesh 객체는 위치(Position) , 회전(rotation) , 크기(scale) 등의 변형을 적용할 수 있습니다.

mesh.postion.set(x,y,z);
mesh.rotation.set(x,y,z);
mesh.scale.set(x,y,z);

 

3.계층 구조 형성

Mesh는 Three.js 의 object3D 클래스를 상속받아, 다른 객체와 부모-자식 관계를 형성할 수 있습니다.

parentMesh.add(childMesh)

 

4. 다양한 지오메트리와 재질 지원

Three.js는 다양한 기본 지오메트리(BoxGeometry , SphereGeometry .. ) 와 재질 (MeshBasicMaterial, MeshStandardMaterial, MeshPhongMaterial) 을 제공합니다. 

 

5. 상호작용 기능

mesh.addEventListener('click', handleClick);

 

요약
Three.js 의 Mesh는 3D 객체를 표현하는 기본 단위로, HTML 의 div 와 유사한 역할을 합니다. 지오메트리와 재질로 구성되며 , 위치 회전 크기 등을 조절할 수 있습니다. Scene에 추가되어 렌더링되고, 다른 객체와 계층 구조를 형성할 수 있으며, 다양한 상호작용 기능을 지원합니다. 

 

이러한 특성으로 인해 Mesh 는 Three.js로 3D 웹 그래픽을 개발할 때 가장 자주 접하게 되는 핵심 요소이다.