[Frontend] 블렌더에서 모델 제작하고 웹으로 띄우기

목차 (OPEN)

• 📑 들어가며
• 🟥 블렌더로 제작한 모델
• 🟧 Material Properties
• 🟨 React Three Fiber 환경 구축
• 🟩 블렌더 모델을 R3F로 가져오기
• 📚 결론

 

 

 

 

📑 들어가며

요즘 컴퓨터 그래픽스 수업을 들으면서 너무 재밌어서

'혹시 지금 만들려고 하는 내 개인 웹 페이지에도 3D 모델을 넣을 수 있지 않을까?' 라는 궁금증이 생겼었다.

 

아직 프론트엔드 입문 중이었던 나는 모르는 것이 많았기에 ,,

GPT 한테도 물어보고, 티스토리 등도 참고해봤더니

보통 블렌더로 모델링한 후 Three.js로 웹에 올린다고 해서 바로 도전해보기로 했다 🤩

 

 

---

🟥 블렌더로 제작한 모델

나는 간단하게 내 이름을 모델링해보고 싶었고, 결과물은 다음과 같다.

정면

측면 위 후면

 

굳이 보여주는 이유는 그냥 자랑하고 싶었다 ㅎㅎ 🤗

 

 

---

🟧 Material Properties

혹시나 재질 설정이 궁금한 분들이 있을까 싶어서

내가 사용한 Material 속성 값들을 정리해보았다.

속성	값	설명
Base Color	#9A80FF (내 대표 컬러)	표면의 기본 색상
Metallic	0.7	금속처럼 빛을 반사할지, 비금속처럼 확산광을 낼지 결정하는 값으로, (1에 가까울수록 금속 느낌)
Roughness	0.1	표면의 거칠기로, 낮으면 반사가 선명하고, 높으면 흐릿하고 무광에 가까워짐
IOR	1.35	빛이 소재 내부로 들어가 굴절되는 정도로, 유리·물·플라스틱 등의 깊이감을 결정하는 요소임
Transmission	0.85	얼마나 투명한 재질인지 정의하는 것으로, 값이 높을수록 유리처럼 빛이 통과
Coat Weight	0.25	표면 위에 덧씌워진 투명 코팅층의 강도로, 광택과 하이라이트를 강화함
Coat Roughness	0.03	코팅층의 거칠기로, 값이 낮으면 코팅층 반사가 날카롭고 선명하게 보임

 

처음엔 이런 속성들을 제대로 정리해 준 블로그가 거의 없어서 답답했는데,

실제로 블렌더로 작업해보니까 왜 그런지 알 것 같았다 ,,ㅎㅎ

그냥 내가 직접 값을 이것저것 바꿔보면서 젤 맘에 드는 느낌을 찾는 게 더 빨랐다 🤧

 

그리고 어차피 내가 머릿속으로 완벽하게 상상해서 값을 정한 것 같아도

실제로 보면 쫌 느낌이 다른 경우가 많아서 그냥 하나씩 조정해보는 게 젤 좋은 것 같다 !

 

어쨋든 결론적으로 난 위와 같은 설정으로

살짝 투명한 플라스틱(?) + 은은한 금속 느낌을 섞은 로고를 완성했다.

---

🟨 React Three Fiber 환경 구축

처음에는 Three.js에서 하라는 대로 따라하면 되지 않을까 싶었는데,

좀 더 알아보니 Three.js는 상태 관리나 라이프사이클, 훅 등을 사용하지 못함을 알게 되었다 ..

 

내 프로젝트는 이미 React 기반으로 구조가 잡혀 있었기 때문에,
3D만 완전히 별도의 방식으로 관리해야 하는 점이 계속 마음에 걸렸는데,

찾아보니 React Three Fiber(R3F)라는 것을 발견하게 되었다 ✨

 

R3F를 사용하면 Three.js의 기능을 아래처럼 React스럽게(?) 가져올 수 있다는 점이 상당히 맘에 들었다.

• Canvas부터 Mesh까지 모든 요소를 JSX로 표현 가능함
• useFrame, useEffect, useRef 같은 React 훅으로 3D 씬을 제어할 수 있음
• 기존 UI 개발 방식 그대로 3D를 컴포넌트화해서 관리할 수 있음

 

게다가 @react-three/drei라는 유틸 라이브러리도 있어서

카메라 컨트롤, 환경광(Environment) 같은 기능들을

그냥 레고마냥 조립해서 쓸 수 있다는 점이 넘나리 맘에 들었다 🤧💓

 

 

---

🟩 블렌더 모델을 R3F로 가져오기

Blender에서 만든 모델은 .glb로 export 했고,
이걸 R3F 쪽에서는 @react-three/drei에서 제공하는 useGLTF 훅으로 가져왔다.

import { useGLTF } from '@react-three/drei';

const MyLogo = () => {
  const { scene } = useGLTF('/models/logo.glb');
  return <primitive object={scene} />;
};

 

useGLTF는 내부적으로 Three.js의 GLTFLoader를 감싸고 있어서,

캐싱, 로딩 상태 관리, 타입 지원을 한 번에 해결해준다 🤩

 

 

또한 유저가 실제로 해당 섹션까지 스크롤하기 전에
미리 리소스를 받아올 수 있도록 preload도 함께 추가했다.

useGLTF.preload('/models/logo.glb');

 

이렇게 해두면, 유저가 3d 모델이 있는 섹션까지 스크롤해서 도달하기 전에

백그라운드에서 미리 모델을 받아올 수 있어서 체감 로딩이 더 부드럽워진다.

 

 

 

이렇게 모델을 로딩할 준비까지 끝났다면,

이제 3D 씬을 위한 무대인 <Canvas>가 필요하다.

 

React Three Fiber에서는 기본적으로 이렇게 시작한다.

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

const HeroScene = () => {
  return (
    <Canvas>
      {/* 여기 안에 3D 오브젝트와 조명, 카메라 등을 넣는다 */}
    </Canvas>
  );
};

 

이 <Canvas>는 말 그대로 Three.js의 renderer + 캔버스를 React 컴포넌트로 감싼 것이다.

 

나는 Hero 섹션 안에서 적당한 비율로만 보이게 하기 위해,
CSS로 크기를 고정해두고 그 안에 3D를 가둬두는 방식으로 사용했다.

 

 

 

다음으로 R3F에서는 카메라를 두 가지로 관리할 수 있는데,

• <Canvas camera={{ position: [...] }}> 형태로 바로 넘기거나
• <PerspectiveCamera makeDefault /> 같은 컴포넌트를 별도로 둘 수도 있다.

 

내 경우에는 복잡한 카메라 이동이 필요하지 않아서,
아주 간단하게 정면에서 살짝 위/옆으로 치우친 포지션 정도만 잡았다.

<Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
  {/* ... */}
</Canvas>

 

여기서 fov(field of view)를 너무 넓게 잡으면 모델이 왜곡되어 보이고,
너무 좁게 잡으면 답답해 보여서, 여러 번 조정해 보면서 내 섹션에 잘 어울리는 값을 골랐다.

 

 

 

마지막으로, 3D 모델이 있어도 빛을 안 켜면 아무것도 안 보인다.
그래서 기본적인 조명은 아래 정도로 최소 세팅을 했다.

<ambientLight intensity={0.6} />
<directionalLight position={[2, 4, 5]} intensity={1.2} />

 

ambientLight(환경광)는 전체적으로 그림자를 없애고 모델이 너무 어둡지 않게 해주는 역할이고,

directionalLight(방향광)는 햇빛처럼 한 쪽에서 들어오는 빛이라, 로고의 면과 엣지가 살짝 살아나도록 설정해주는 역할이다.

 

나는 너무 하드한 그림자보다는 살짝 광택 있고 부드러운 느낌을 원해서 intensity를 조절해 가며 테스트했다.

 

 

 

결과적으로 요렇게 잘 올라가있는 것을 볼 수 있다 !!

(지금은 다른 애니메이션도 추가해둔 상태라서 살짝 옆으로 기울어져 있다 ,,ㅎㅎ)

 

---

📚 결론

처음에는 단순히 “내 웹 페이지에도 3D 모델 하나 넣어보고 싶다!”라는 호기심에서 시작했는데,
막상 Blender에서 모델링을 하고, React Three Fiber 환경을 구성하고,
GLTF 로딩과 애니메이션까지 만들어보니 생각보다 훨씬 많은 것을 배울 수 있는 과정이었다.

 

아직 갈 길은 멀고, 더 많은 3D 실험을 해보고 싶지만,
이번 작업만으로도 웹에서도 이런 시각적인 즐거움을 만들 수 있구나 싶다.

 

아 그리고 그래픽스 수업에서 배운 걸 대체 어디다가 써먹을 수 있는거지 싶었는데

웹에서도 마찬가지로 좌표계, 광원, 뷰, 투영, 셰이딩 등의 개념들이 적용되는 걸 보니까 정말 신기했다.

뭔가 곧 있을 기말고사 대비 시험공부를 좀 더 열심히 할 열의가 생긴 것 같다 ㅋㅋ