Scene

 

Scene

 

3D 환경을 구성하는 가장 기본적인 단위

Camera를 통해 렌더링되기 위해 여러 Object들이 배치됨

 

 

Three.js 및 React Three Fiber(R3F)에서 Scene을 구성하는 주요 요소

Mesh, Geometry, Material (+ Lighting, Grouping, Interaction 등이 추가됨)

 

 

Mesh (메쉬)

Geometry (형태)와 Meterial (재질)을 결합하여 3D 객체를 생성하는 기본 단위

 

 

예시 코드 조각

<mesh>
  <boxGeometry args={[1, 1, 1]} /> {/* 정육면체 */}
  <meshStandardMaterial color="orange" /> {/* 기본 재질 */}
</mesh>

 

 

Geometry (형태)

 

3D 객체의 형태 또는 구조를 정의하는 요소

 

 

기본 Geometry 종류

• boxGeometry → 박스(큐브)
• sphereGeometry → 구(공)
• planeGeometry → 평면

 

*각 Geometry에는 특정한 args(매개변수)가 존재

 

 

Three.js Geometry

three.js docs

 

 

예시 코드 조각

<boxGeometry args={[1, 1, 1]} /> {/* width, height, depth 순서 */}

 

 

 

Material (재질)

 

객체의 표면 특성 정의

색상, 질감, 반사, 투명도 등의 속성을 설정

 

주요 Material 종류

• meshStandardMaterial
  기본적인 PBR(Material Reflection) 재질
• meshBasicMaterial
  조명을 무시하는 단순한 색상 재질
• meshLambertMaterial
  부드러운 빛 반사를 가지는 재질

 

Three.js Material

three.js docs

 

 

예시 코드 조각

<meshStandardMaterial color="orange" />

 

 

 

Lighting (조명)

 

3D Scene에서는 조명을 추가하여 객체의 재질이 더욱 사실적으로 보이게 함

 

Three.js에서 제공하는 기본 조명 타입

• ambientLight → 전체적으로 균일한 빛을 제공
• pointLight → 특정 점에서 퍼지는 빛
• spotLight → 원뿔 형태의 집중 조명

 

Three.js Lighting

three.js docs

 

 

예시 코드 조각

<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />

 

 

 

Grouping (그룹화)

 

여러 개의 Mesh를 Group으로 묶어서 하나의 단위로 관리할 수 있음

→ 복잡한 Scene을 구성할 때 구조적으로 관리하는 데 유용

 

 

예시 코드 (R3F)

<group>
  <mesh position={[-1, 0, 0]}>
    <sphereGeometry args={[0.5, 32, 32]} />
    <meshStandardMaterial color="blue" />
  </mesh>
  <mesh position={[1, 0, 0]}>
    <boxGeometry args={[1, 1, 1]} />
    <meshStandardMaterial color="red" />
  </mesh>
</group>

 

 

Interaction (상호작용)

R3F에서는 React의 이벤트 핸들링 시스템을 활용, 3D 객체와의 상호작용을 쉽게 구현할 수 있음

→ 클릭, 마우스 오버, 드래그 등의 이벤트를 처리

 

 

예시 코드 (R3F)

<mesh onClick={() => console.log("Clicked!")}>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="green" />
</mesh>

 

 

 

 

---

 

Scene을 구성하는 핵심 요소

1. Mesh → 3D 객체 (Geometry + Material)

2. Geometry → 3D 형태 (박스, 구, 평면 등)

3. Material → 표면 속성 (색상, 반사, 질감)

4. Lighting → 조명 추가 (ambientLight, pointLight 등)

5. Grouping → 여러 Mesh를 묶어 관리

6. Interaction → 사용자와의 상호작용 (클릭, 마우스 오버)