React Three Fiber로 mesh 추가, group 하기 [Three.js 비교]

 

일단 먼저 Three.js 에서 추가하는 방법을 보자

 

Three.js 에서의 Mesh 추가

const geometry = new BoxGeometry(2, 2, 2);
const material = new MeshStandardMaterial()
const cube = new Mesh(geometry, material)

scene.add(cube)

BoxGeometry , MeshStandardMaterial 도 변수에 담아서

Mesh( geometry(기하학), material(재질) ) 을 넣으면서 인스턴스화한다.

그리고 scene 에 추가한다.

 

React Three Fiber 에서의 Mesh 추가

import { Canvas } from "@react-three/fiber";

export default function R3fDemo() {
  return (
    <Canvas>
      <mesh>
      	<boxGeometry attach="geometry" args={[2, 2, 2]}/>
        <meshStandardMaterial attach="material"/>
      </mesh>
    </Canvas>
  );
}

 

mesh 요소 안에 boxGeometry ,  meshStandardMaterial  넣는다.

여기서 주의할건 Threejs 파스칼케이스와는 다르게 맨 앞글자를 소문자로 쓴 카멜케이스로쓴다..

 

Boxgeometry (너비, 높이, 깊이) 가 인수로 들어가 있다.

React Three Fiber 에서는 동일한 작업은 args 속성을 추가하여 인수로 퍼지는 배열에 담을 수 있다.

 

Attaching (속성 부착) 

attach 라는 특수 속성이 없는 요소의 모든 자식은 cube.add() 방식으로 추가 된다.

이들은 mesh 의 cube.add() 방식으로 추가 되서는 안되기 때문에 attach 속성을 넣어줬다.

 

attach 추가가 아닌 부착이 된다고 개념을 이해하면 된다.

attach 속성이 있는 경우 부모의 자식으로 추가되는 대신 부모의 해당 속성으로 부착 된다.

 

즉,

<boxGeometry attach="geometry" /> 는

부모의 <mesh> 에 geometry 속성에 추가합니다. 라는 뜻이다.

 

하지만! 

attach 를 추가하지 않아도 정상적으로 작동하는거를 알 수 있다.

 

그 이유는

React Three Fiber 자체에서 geometry라고 끝나는 모든 geometry를

geometry속성에 자동으로 연결시키기 때문이다. material 도 마찬가지이다.

 

그럼 만약 <mesh>요소안에 또 다른 <mesh> 를 넣으면 ?

mesh.add(다른 mesh) 랑 같은 말이다.

 

Three.js 에서 봤을때 mesh 중첩 코드

const geometry = new BoxGeometry();
const material = new MeshStandardMaterial()
const cube = new Mesh(geometry, material)

scene.add(cube)

cosnt anotherMesh = new Mesh();
cube.add(anotherMesh)

하지만 일반적으로 매쉬요소를 중첩해서 쓰진 않는다.

 

왜냐면 그룹(grop) 이라는 요소로 사용할 수 있기 때문이다.

다음 그룹 내부에 여러 메시를 가질 수 있으며,

그룹은 모든 자식을 전체적으로 이동할수 있는 고유한 위치 및 회전 속성 등을 가지고 있다.

group 하는 법

import { Canvas } from "@react-three/fiber";

export default function R3fDemo() {
  return (
    <Canvas>
       <group>
          <mesh>
            <boxGeometry args={[2, 2, 2]}/>
            <meshStandardMaterial />
          </mesh>
      </group>
    </Canvas>
  );
}

 

Three.js 측에서도 그룹은 새로운 개념이 아니다.

const geometry = new BoxGeometry(2,2,2);
const material = new MeshStandardMaterial()
const cube = new Mesh(geometry, material)

scene.add(cube)

cosnt anotherMesh = new Mesh();
cube.add(anotherMesh)

const group = new Group();
group.add(cube)

group 을 생성한다 음 매쉬를 그룹에 담을 수 있다.

 

이와 같이 React Three Fiber 가 

React 내에서 3D 세계를 구축하는데 필요한 모든문서를 제공 할 것 처럼 보이지만

사실은 바닐라 three.js 를 react 생태계에서 작동 할 수 있게 해줄 뿐.

three.js 가 먼저 어덯게 작동하는지를 이해하는게 중요한거 같다. 

그런 다음 react에서 빌드하려는 것이 훨씬 이해하기 쉽다.