[RTF] 2. 물체 다루기 Geometry, Material and Mesh

React/React Three Fiber

[RTF] 2. 물체 다루기 Geometry, Material and Mesh

개발자 뭄뭄 2023. 3. 25. 18:30

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.

1. Mesh

Scene에서 보이는 모든 물체(3D, 2D) … 을 Mesh 라고 부른다. 모든 Mesh에는 geometry(모양), material(속성-색상 혹은 재질) 이라는 속성을 갖는다.

geometry는 구, 큐브 등 다양한 모양이 있고 각 물체마다 필요한 argument가 다르다. 자세한 것은 공식문서를 참고

2. Ambient Light

Scene에 Ambient Light가 없다면 모든 물체가 검은색으로 보인다.

components > three.tsx

import React from 'react'

function Three() {
  return (
    <>
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="#E0DA46" />
      </mesh>
      <ambientLight args={['#ffffff', 1]} />
    </>
  )
}

export default Three

ambient Light는 (빛의 색깔, 빛의 세기) 라는 두가지 인자를 사용한다 위의 코드는 흰색 빛을 1의 세기로 쏴주는 겁니다.

3. Floor

import React from 'react'

function Three() {
  return (
    <>
      {/* circle */}
      <mesh>
        <sphereGeometry args={[0.5, 32, 32]} />
        <meshStandardMaterial color="#E0DA46" />
      </mesh>

      {/* floor */}
      <mesh >
        <planeGeometry args={[7, 7]} />
        <meshStandardMaterial color="#60FC4E" />
      </mesh>
      <ambientLight args={['#ffffff', 1]} />
    </>
  )
}

export default Three

planeGeometry (평면)을 이용해서 바닥을 만들었다. 가로, 세로크기를 인자로 사용하고 <meshStandardMaterial>을 이용해서 색을 바꿨다.

4. 평면의 각도 바꾸기

위의 예시까지 따라하면, 네모 위에 원이 있는 모양이 된다.

평면을 회전시켜서 평면 “위”에 구가 위치하도록 만들어본다. three.js에서는 각도를 라디안 단위로 사용하기 때문에, 사용자의 편의를 위해서 각도를 라디안으로 바꿔주는 함수를 추가해준다.

src > utills > angle.ts

export const angleToRadians = (angleInDeg: number) =>
  (Math.PI / 180) * angleInDeg

import React from 'react'
import { angleToRadians } from '@/utills/angle'

function Three() {
  return (
    <>
     
      {/* circle */}
      <mesh>
        <sphereGeometry args={[0.5, 32, 32]} />
        <meshStandardMaterial color="#E0DA46" />
      </mesh>

      {/* floor */}
      <mesh rotation={[-angleToRadians(90), 0, 0]}>
        <planeGeometry args={[7, 7]} />
        <meshStandardMaterial color="#60FC4E" />
      </mesh>
      <ambientLight args={['#ffffff', 1]} />
    </>
  )
}

export default Three

이제 평면이 90도 회전했기 때문에 사용자의 화면에서는 보이지 않는다. (마치 얇은 a4용지의 두께를 사용자의 눈으로 보고 있다고 상상해보세요!)

평면과 물체를 함께 보기 위해서 사용자의 관점을 바꾸는 코드를 추가로 작성한다.

5. Perspective Camera

Perspective Camera는 사람의 눈과 닮아있다. 멀리에서 보면 물체가 작게 보이고, 가까이에서 보면 물체가 커보인다. 자세한 설명은 아래 블로그가 도움 되었다!

지금은 구와 평면 모두 0,0,0 을 중심으로 하기 때문에 구의 절반만 평면 위에 올라와있는 것 처럼 보인다. (react three fiber는 명시하지 않으면 default 값으로 0,0,0 을 사용한다. )

⇒ 이 문제를 해결하기 위해서 구의 중심 위치를 0.5만큼 이동시켜서 평면 “위” 에 위치하도록 코드를 수정한다.

import React from 'react'

import { PerspectiveCamera } from '@react-three/drei'
import { angleToRadians } from '@/utills/angle'

function Three() {
  return (
    <>
      <PerspectiveCamera makeDefault position={[0, 1, 5]} />
      {/* circle */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry args={[0.5, 32, 32]} />
        <meshStandardMaterial color="#E0DA46" />
      </mesh>

      {/* floor */}
      <mesh rotation={[-angleToRadians(90), 0, 0]}>
        <planeGeometry args={[7, 7]} />
        <meshStandardMaterial color="#60FC4E" />
      </mesh>
      <ambientLight args={['#ffffff', 1]} />
    </>
  )
}

export default Three

6. 최종코드

import React from 'react'

import { PerspectiveCamera } from '@react-three/drei'

import { angleToRadians } from '@/utills/angle'

function Three() {
  return (
    <>
      <PerspectiveCamera makeDefault position={[0, 1, 5]} />
      {/* circle */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry args={[0.5, 32, 32]} />
        <meshStandardMaterial color="#E0DA46" />
      </mesh>

      {/* floor */}
      <mesh rotation={[-angleToRadians(90), 0, 0]}>
        <planeGeometry args={[7, 7]} />
        <meshStandardMaterial color="#60FC4E" />
      </mesh>
      <ambientLight args={['#ffffff', 1]} />
    </>
  )
}

export default Three

Uploaded by N2T