[Three.js] 인터랙티브 페이지 중간 보고

Olivia·2025년 10월 17일

3D ThreeJS blender three.js 인터랙티브

[Threejs]

목록 보기

2/2

Three.js 프로젝트를 통해 웹의 새로운 가능성을 탐구하고, 사용자에게 혁신적인 온라인 경험을 제공하고자 합니다.

1. 프로젝트 개요

1.1 프로젝트명

“3D 인터랙티브 웹 경험 (3D Interactive Web Experience)”

1.2 프로젝트 중간 보고

Three.js를 사용하여 개발된 인터랙티브 3D 우주 시뮬레이션입니다.

메인 프로젝트 전 three.js를 학습하고자 만든 페이지 입니다.
지구와 달, 주변의 별들로 이루어진 간단한 태양계를 시뮬레이션화 했습니다.
지옥에서 온 고양이 캐릭터와 함께 다양한 카메라 컨트롤을 통해 사용자 상호작용 요소를 포함하고 있습니다.

1.3 기술 스택

Frontend: HTML5, CSS3, JavaScript
3D 렌더링: Three.js
배포 관리: Netlify
버전 관리: Git

2. 프로젝트 세부 내용

# 2.1 프로젝트 구조

현재 프로젝트 구조

project_root/
│
├── dist/
├── node_modules/
│── src/
│   ├── texture/
│   │   ├── cat_eyes.png
│   │   └── fur.jpg
│   ├── cat.js
│   ├── index.html
│   ├── main.css
│   ├── main.js
│   ├── planet.js
│   └── spaceProject.js
├── babel.config.js
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js

현재 프로젝트 구조의 문제점

[모듈화 부재]

spaceProject.js 에 scene, camera, 객체 생성 등 너무 많은 다양한 기능들이 혼재되어 있음.
cat, planet만 분리되어있고, 다른 주요 컴포넌트들은 개별 모듈로 분리되어있지 않다.

→ 가독성 및 유지보수성 떨어짐

#2.2 프로젝트 구조 개선 방안

컴포넌트 기반 구조화

project_root/
│
├── dist/
├── node_modules/
└── src/
    ├── components/
    │   ├── Planet.js
    │   ├── Star.js
    │   └── Cat.js
    ├── scenes/
    │   ├── MainScene.js
    ├── controllers/
    │   └── OrbitController.js
    ├── assets/
    │   ├── textures/
    │   └── models/
    ├── styles/
    │   └── main.css
    ├── index.html
    └── main.js

components: 각 3D 객체를 개별 컴포넌트로 분리하여 재사용성과 유지보수성을 높일 수 있다.
scenes: 여러 씬을 관리할 수 있게 되어 추후 로딩 화면, 메인 화면 등을 별도로 구현할 수 있다.
controllers: 입력 처리와 관련된 로직을 한 곳에서 관리할 수 있다. 현재는 카메라 관련 컨트롤러만 넣어 놓은 상태다.
assets : 모든 외부 리소스를 관리한다.
styles: CSS 파일을 별도 폴더에서 관리한다

3. 주요 기능

Geometry & Material만 가지고 만든 
“지옥에서 온 고양이..”

1. 우주 시뮬레이션

지구와 달의 사실적인 3D 모델
bump 매핑과 반사 하이라이트를 통해 텍스쳐 표면
지구와 달의 대기 효과
지구 주위를 도는 달의 rotation

2. 우주 환경 효과

움직이는 별
은하수같은 별 배경 효과

3. 조명

사실감을 위한 그림자 생성
다양한 조명 포함

2. 상호작용

줌인/아웃 등 카메라 효과
scene 내에서 드래그 가능한 고양이 캐릭터
카메라 및 회전 등 설정을 조정할 수 있는 GUI 컨트롤
전체 화면 rotation

4. 기술적 시도

핵심 컴포넌트로 createPlanet 를 통해 지구 및 달을 생성한다.

[행성 표면 만들기]

const surfaceGeometry = new THREE.SphereGeometry(surface.size, 32, 32);
const surfaceMaterial = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load(surface.textures.map),
  bumpMap: new THREE.TextureLoader().load(surface.textures.bumpMap),
  bumpScale: surface.material.bumpScale,
  specularMap: new THREE.TextureLoader().load(surface.textures.specularMap),
  specular: surface.material.specular,
  shininess: surface.material.shininess,
});
const planetSurface = new THREE.Mesh(surfaceGeometry, surfaceMaterial);
planetGroup.add(planetSurface);

SphereGeometry로 구 모양을 만든 뒤 . surface.size로 크기를 정한다.
MeshPhongMaterial로 행성 표면의 재질을 만든다.
- map: 행성 표면의 기본 이미지
- bumpMap: 표면에 울퉁불퉁한 느낌을 주는 이미지
- specularMap: 빛이 반사되는 부분
Mesh로 구 모양과 재질을 합쳐 행성 표면을 만든다
만든 표면을 planetGroup에 추가한다.

[행성 표면 만들기]

const surfaceGeometry = new THREE.SphereGeometry(surface.size, 32, 32);
const surfaceMaterial = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load(surface.textures.map),
  bumpMap: new THREE.TextureLoader().load(surface.textures.bumpMap),
  bumpScale: surface.material.bumpScale,
  specularMap: new THREE.TextureLoader().load(surface.textures.specularMap),
  specular: surface.material.specular,
  shininess: surface.material.shininess,
});
const planetSurface = new THREE.Mesh(surfaceGeometry, surfaceMaterial);
planetGroup.add(planetSurface);

SphereGeometry로 구 모양을 만든 뒤 . surface.size로 크기를 정한다.
MeshPhongMaterial로 행성 표면의 재질을 만든다.
- map: 행성 표면의 기본 이미지
- bumpMap: 표면에 울퉁불퉁한 느낌을 주는 이미지
- specularMap: 빛이 반사되는 부분
Mesh로 구 모양과 재질을 합쳐 행성 표면을 만든다
만든 표면을 planetGroup에 추가한다.

[⭐️ 지구와 달의 대기효과 만들기]

Shader 사용

Shader를 사용하기 전에는 단순한 Mesh만을 이용한 구를 사용해 대기를 표현했다.
이 방식을 사용하니 실제 대기와 같은 자연스러운 발광 효과를 만들기 어려웠고, 그라데이션 효과를 구현하는 것도 한계가 있었다.

Shader의 경우 픽셀 단위로 색상과 투명도를 정밀하게 제어할 수 있고, 카메라 위치에 따라서 대기의 모습을 동적으로 변경할 수 있었다.
또한, 수학적인 계산을 통해 더 사실적인 발광 효과를 만들 수 있어서 Shader를 사용하게 되었다.

const atmosphereMaterial = new THREE.ShaderMaterial({
  vertexShader: `
    ...
  `,
  fragmentShader: `
    uniform vec3 glowColor;
    uniform float coefficient;
    uniform float power;
    void main() {
      float intensity = pow(coefficient - dot(vNormal, vec3(0, 0, 1.0)), power);
      gl_FragColor = vec4(glowColor, 1.0) * intensity;
    }
  `,
  uniforms: {
   ...
  },
  ...
});

[코드 설명]

GLSL과 Shader 사용

Shader은 픽셀 단위로 색상을 정의하기 때문에 GLSL를 사용했다.
shader에게 명령을 전달하기 위해서는 shader 언어(GLSL, HLSL 등)으로 작성된 작성된 코드가 필요하기 때문이다.

GLSL은 Three.js의 기본 material로는 구현하기 어려운 복잡한 시각 효과를 만들 수 있고, vec3, dot() 와 같은 함수를 사용해서 그래픽에 필요한 함수를 제공하기 때문이다.
사실 GLSL은 C 기반 언어라서 C/C++를 사용할 수 있다면 쉽게 작성할 수 있겠지만, 나는 C언어에 대한 지식이 부족하여 공부 후 더 정리하도록 하겠다.

uniform vec3 glowColor;
uniform float coefficient;
uniform float power;

uniform vec3 glowColor;

uniform은 셰이더 프로그램 전체에서 동일한 값을 가지는 변수를 선언할 때 사용한다. vec3는 RGB 색상을 나타낸다. glowColor는 발광 효과의 색상을 지정하는 변수로, 색상 코드를 사용해 대기에 빛나는 부분을 설정한다.
`uniform float coefficient;
float는 소수점이 있는 숫자 타입, 그리고 coefficient`으로, 위에 설정한 발광 효과의 강도를 조절하는 것이다.
`uniform float power;
power`는 발광 효과가 얼마나 강한지 약한지를 제어해주는 값.

[계산식]

void main() {
  float intensity = pow(coefficient - dot(vNormal, vec3(0, 0, 1.0)), power);
  gl_FragColor = vec4(glowColor, 1.0) * intensity;
}

intensity: 각 픽셀의 발광 강도
float intensity = pow(coefficient - dot(vNormal, vec3(0, 0, 1.0)), power);
- pow(… , power)
- pow는 지곱 함수로, 사용자가 에서 설정한 발광 효과 강도에서 dot(..) 값을 뺀뒤, 발광 효과의 강도를 조절한다, 이를 통해 가장자리에서 중심으로 갈때 더 자연스럽게 발광 효과가 줄어들 수 있도록 설정할 수 있다.
만약, pow를 사용하지 않더라면, 직선 형태로 일정하게 연한 값으로 줄어들기 때문에 자연스럽지 못하다.

coefficient - dot(vNormal, vec3(0, 0, 1.0))
vNormal은 지구나 달 표면의 각 점에서의 방향을 말한다.
vNormal과 카메라 방향이 일치하면 (dot = 1) ⇒ 행성 중심 ( 구 가운데 )
vNormal과 카메라 방향이 거의 수직이라면 (dot = 0) ⇒ 행성 가장자리 (구 보면 옆에 동그라미 라인)
vec3(0, 0, 1.0)은 카메라 방향을 나타내며 정면을 가르키고 있다.
ceofficient - dot()
ceofficient를 1이라고 가정한다면, 행성의 중심: 1 - 1 = 0 (어두움) | 행성 가장자리: 1 - 0 = 1 (밝음)
위의 값에서 coefficient를 빼는 이유:
행성의 가장자리가 밝고, 점점 어두워지는 효과를 주기 위해서임. 그냥 값을 뒤집어서 우리가 원하는 밝다가 점점 어두워지는 효과를 만들기 위함.