Home [three.js] React에서 three.js 사용(3D공간, 재질&스타일링, 빛)
Post
Cancel

[three.js] React에서 three.js 사용(3D공간, 재질&스타일링, 빛)

Posted Aug 27, 2023
By 김태욱
12 min read

React에서 three.js 사용(1)
지난 글에 이어서 평평해 보이는 직육면체를 3D로 보이게 만들고 빛이란 것도 추가해볼 것 이다.

3D로 만들기

직육면체를 우리가 원하는 3D처럼 보이게 하는 것은 간단하다 OrbitControls 컴포넌트를 Canvas 컴포넌트 안에 넣어주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//App.js
import { Canvas } from "@react-three/fiber";
import { Box, OrbitControls } from "@react-three/drei";

function App() {
  return (
    <Canvas>
      <OrbitControls />
      <Box />
    </Canvas>
  );
}

export default App;

재질 & 스타일링, 빛

재질이 변하는 것을 쉽게 확인하기 위해 조명에 종류를 directionalLight 변경하고 직육면체가 아닌 도넛 모양에 torusGeometry로 변경해줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//App.js
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <Canvas>
      <OrbitControls />
      <directionalLight position={[1, 1, 1]} />
      <mesh>
        <torusGeometry />
        <meshStandardMaterial color="red" />
      </mesh>
    </Canvas>
  );
}

export default App;

meshStandardMaterial에 color 속성을 사용해 red로 바꿧지만 검은색으로 나오고 있다.
이유는 빛! 조명이 없기 떄문이다. 캄캄한 어둠에는 언제나 검은색을 보인다.

meshStandardMaterial 색상변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//App.js
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <Canvas>
      <OrbitControls />
      <directionalLight position={[1, 1, 1]} />
      <mesh>
        <torusGeometry />
        <meshStandardMaterial color="red" />
      </mesh>
    </Canvas>
  );
}

export default App;

장면 전체에 균일한 조명을 추가해주는 ambientLight 조명을 추가해 meshStandardMaterial 속성에 color=”red”로 인한 붉은색이 잘 보입니다.

ambientLight 적용

여기에 빛을 반사하는 듯한 물체로 재질을 바꾸고 싶다면 빛에 반응하여 물체의 표면을 반사하고 반사광을 만드는 MeshPhongMaterial을 사용해야 한다.
그리고 장면 전체에 균일한 조명으로는 파악하기 힘드므로 특정 방향에서 평행한 빛을 생성하는 DirectionalLight 조명을 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//App.js
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <Canvas>
      <OrbitControls />
      <directionalLight position={[1, 1, 1]} />
      <mesh>
        <torusGeometry />
        <meshPhongMaterial shininess={1700} color="red" />
      </mesh>
    </Canvas>
  );
}

export default App;

shininess 재질 적용

Material

현실적인 조명, 그림자, 반사, 굴절 등을 표현하여 물체를 더 현실적으로 보이게 하는 데 사용됩니다

💡 Material 종류

컴포넌트명기능
Material이 컴포넌트는 주어진 재질로 3D 모델을 렌더링할 수 있도록 도와줍니다. 다양한 재질 옵션을 설정할 수 있습니다.
MeshBasicMaterial기본적인 물체 재질로, 빛에 반응하지 않고 색상만 표현합니다.
MeshStandardMaterial표준 재질로, 빛에 반응하여 그림자와 하이라이트를 생성하며 물체를 더 현실적으로 만들어 줍니다.
MeshPhongMaterial포앙 재질로, 빛에 반응하여 물체의 표면을 반사하고 반사광을 만듭니다.
MeshLambertMaterial램버트 재질로, 빛에 대한 광택이 없는 물체를 나타냅니다.
MeshToonMaterial툰 재질로, 쉐이딩을 통해 물체를 단순하게 나타냅니다. 일반적으로 만화 스타일의 렌더링에 사용됩니다.
MeshPhysicalMaterial물리 재질로, 물리 기반의 재질 렌더링을 지원합니다. 실제 재질과 유사한 시각적 효과를 얻을 수 있습니다.
PointsMaterial포인트 재질로, 점 또는 입자 시스템에 사용됩니다.

💡 공통 속성

속성명기능
color재질의 색상을 정의합니다.
transparent물체가 투명한지 여부를 지정합니다.
opacity물체의 투명도를 조절합니다.
side물체의 어떤 면을 렌더링할지 설정합니다.
visible물체의 가시성 여부를 조절합니다.
wireframe물체를 와이어프레임으로 표현할지 여부를 설정합니다.
map텍스쳐 맵을 지정합니다.
normalMap노말 맵을 지정하여 물체의 표면 노말을 조절할 수 있습니다.
envMap환경 맵을 적용하여 반사 효과를 생성할 수 있습니다.

💡 각 Material의 고유 속성

Material명기능
MeshStandardMaterialroughness: 물체의 거칠기를 조절합니다. 값이 낮을수록 빛이 더 많이 반사됩니다.
metalness: 물체의 금속성을 조절합니다. 값이 높을수록 물체가 금속적으로 보입니다.
MeshPhongMaterialshininess: 물체의 광택을 조절합니다. 값이 높을수록 광택이 더 많이 나타납니다.
MeshToonMaterialgradientMap: 그라데이션 맵을 적용하여 툰 렌더링 스타일을 설정할 수 있습니다.
PointsMaterialsize: 포인트(입자)의 크기를 조절합니다.

조명

3D 장면에 깊이와 입체감을 부여하고 물체 간의 시각적 관계를 강조하는 역할을 합니다. 조명은 장면의 물체에 그림자와 하이라이트를 생성하여 현실적인 느낌을 연출하거나, 특정 분위기나 감정을 전달하는 데 사용됩니다.1

💡 조명 종류

조명명기능
AmbientLight (주변 조명) 장면 전체에 균일한 조명을 추가합니다. 물체에 그림자나 강조 효과는 없고 모든 방향에서 동일한 밝기로 조명됩니다.
DirectionalLight (직사광) 특정 방향에서 나오는 평행한 빛을 생성합니다. 햇빛과 비슷한 효과로, 조명이 특정 방향으로 투사되며 그림자가 만들어질 수 있습니다.
PointLight (점광) 특정 지점에서 모든 방향으로 빛을 발산하는 조명입니다. 공간 내에서 빛이 방출되며, 주변에 있는 물체에 그림자와 광택 효과를 줄 수 있습니다.
SpotLight (스포트 라이트) 특정 위치에서 특정 방향으로 빛을 집중시켜 조명하는 방식입니다. 터치 라이트나 스포트라이트와 유사한 효과를 만들 수 있습니다.
HemisphereLight (반구 조명)하늘과 지면처럼 두 개의 다른 색상을 가진 두 개의 빛을 사용해 조명하는 방식입니다. 주변 조명과 그림자의 연출에 활용할 수 있습니다.
RectAreaLight (사각 영역 조명)특정 영역에서 빛을 발산하는 조명입니다. 평면 또는 사각형 형태의 영역에서 빛을 투사하며 조명 효과를 만들 수 있습니다.

💡 주요 속성

속성명기능
position (위치) 조명의 위치를 지정합니다. 배열로 x, y, z 좌표 값을 입력하여 조명이 어디에서 발산하는지 결정할 수 있습니다.
color (색상) 조명의 색상을 지정합니다. RGB 값을 입력하여 조명의 빛 색상을 조절할 수 있습니다.
intensity (강도) 조명의 강도를 조절합니다. 0에서 1 사이의 값을 입력하여 조명의 밝기를 설정할 수 있습니다.
distance (거리) 조명의 최대 효과 거리를 지정합니다. 조명에서 멀어질수록 빛의 강도가 약해집니다.
decay (감쇠) 조명의 감쇠를 설정합니다. 거리에 따라 빛이 어떻게 감쇠하는지를 결정하는 계수입니다.
angle (각도) 스포트 라이트 조명의 조준 각도를 지정합니다. 0에서 Math.PI/2 사이의 값을 가집니다.
penumbra (빛 중심 영역 비율) 스포트 라이트 조명의 빛 중심 영역과 그림자 영역의 비율을 조절합니다. 0에서 1 사이의 값이며, 값이 작을수록 그림자의 경계가 부드럽게 변화합니다.
castShadow (그림자 투사) 조명이 그림자를 생성하는지 여부를 나타내는 불리언 값입니다. true로 설정하면 해당 조명이 그림자를 만듭니다.
shadowCameraNear (그림자 카메라 최소 거리)그림자를 만들 때 사용하는 카메라의 최소 효과 거리를 지정합니다.
shadowCameraFar (그림자 카메라 최대 거리) 그림자를 만들 때 사용하는 카메라의 최대 효과 거리를 지정합니다.
shadowCameraFov (그림자 카메라 시야각) 그림자를 만들 때 사용하는 카메라의 시야각을 지정합니다.
shadowBias (그림자 바이어스) 그림자의 경계를 선명하게 하거나 조정하기 위해 사용하는 바이어스 값입니다.

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.

three.js, React
three.js react
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents