Overview
이번 사이드 프로젝트 주제는 Blender + Three.js + R3F를 이용한 주사위 게임 만들기 입니다. 따라서 저번 시간에는 Three.js와 R3F에 대해 간단히 살펴봤고, 이번 시간에는 Blender(블렌더)를 설치하고 무작정 유튜브를 보면서 주사위 만들기 실습 과정을 정리해보려고 합니다.
참고로 대학교 2학년 때 진짜 별에 별걸 다 해봤는데... 그 중 하나가 바로 3D 프린터/디자인이었습니다. 그 때는 3D Max를 이용한 경험이 있는데 상당히 무거웠습니다. 근데 요즘에는 Blender라는게 있어서 가볍고 편하게 사용할 수 있다고 들었습니다. 그래서 한번 사용해보고 싶었습니다. 네. 그냥 TMI 입니다.
Blender(블렌더)
Blender 소개
- 홈페이지 : https://www.blender.org/
- Docs : https://docs.blender.org/manual/en/latest/
- (비공식) 나무위키 소개 : https://namu.wiki/w/Blender
“오픈소스 GPL 라이선스이며 무료로 사용할 수 있고, 블렌더 측에서는 항상 무료일 것이라고 언제나 강조한다” 블렌더가 이토록 많은 후원도 받게 되고 유명해지게 된 건 무료 정책으로 끌어모은 전 세계의 거대한 사용자층 덕분이다. 마야는 괜찮지만 둘 다 써 본 사람들은 상당수 블렌더가 우위에 있다고 평가한다. 애니메이션이나 영상 회사들 위주로 블렌더 도입이 늘어나고 있다.
역시 Blender의 강점이라고 한다면 무료라는 점이랑 가볍고 빠르며 기능적으로도 다양하다는 점입니다. 안쓸 이유가 없긴 하죠. 하지만 여전히 전문적인 분야에서는 3D Max와 Maya가 우세하다고 하네요. 근데 뭐 저 같은 일반인은 역시 Blender를 사용하는 것이 가장 좋은 선택지 인 것은 분명해보입니다.
MacOS + Blender 설치
다운로드 : https://www.blender.org/download/ (현재 버전은 3.6.1 LTS)
용량도 얼마 되지 않으며 설치 또한 매우 간단하며 금방 됩니다. 설치가 끝나고 실행해보면 기본적으로 정사각형 박스 하나가 있고 카메라랑 조명이 있는 것을 알 수 있습니다.
파일 import/export 및 포맷 알아보기
일단 파일을 저장(Save As...) 해보면 .blend 라는 파일 포맷으로 저장이 됩니다. 아마 이건 3D 파일 포맷이 아닌 블렌더 자체 파일 저장 포맷인거 같습니다. 3D 파일 포맷으로 내보내기를 하려면 export 를 하면 됩니다.
그렇다면 어떤 3D 파일 포맷으로 내보내면 될까요? Three.js 공식 문서를 참고하면 다음과 같습니다.
Three.js 공식 문서 참고 : https://threejs.org/docs/#manual/ko/introduction/Loading-3D-models
3D 모델들은 각자 다양한 목적, 적합한 특성, 다양한 복잡성을 가지고 있는 수백개의 파일 포맷으로 존재할 수 있습니다. Three.js는 다양한 로더를 지원하지만, 알맞는 포맷과 워크플로우를 선택하는 것이 시간을 아끼고 이후에 생길 문제를 방지할 수 있는 방법입니다. 몇몇 포맷들은 작업하기 어렵거나, 실시간으로 반영하기 어렵거나, 단순히 지금 시점에 전부 지원을 안하기도 합니다. 가능하다면, glTF(GL Transmission Format)를 사용하는 것을 추천드립니다. .GLB 와 .GLTF 버전 포맷 모두 잘 지원될 것입니다.
glTF 참고: https://ko.wikipedia.org/wiki/GlTF
3차원 장면과 모델을 표현하는 파일 포맷으로 JSON 표준에 기반하고 있습니다. 크로노스 그룹의 3D 포맷 작업반에서 제장한 표준이며 HTML5DevConf 2016 행사에서 처음 발표되었습니다. 효율성과 상호 운용성을 강조한 파일 포맷으로서, 실행에 필요한 부하를 최소화 하도록 설계되었습니다.
✍️ 3D 파일 포맷에 대해 정확히는 모르겠지만 glTF 사용하는 걸 추천한다고 하니 glTF를 사용하겠습니다.
Blender 튜토리얼 추천
유뷰트에 Blender 검색만 해봐도 수많은 영상이 존재합니다. 진짜 금손들 많더군요. 허허... 저는 그 중에서 괜찮은 영상에 대해 추천드립니다. (계속 업데이트 예정)
(실습) 3D Dice 만들기
참고 : Blender Tutorial: Learn How to Make a Realistic 3D Dice
블렌더 실습을 진행하기 전에 한가지 알아두면 좋은게 단축키가 제대로 안 먹는 경우가 있었습니다. 정확히는 되었다가 안되었다가를 반복했습니다. 이에 대해 검색을 해보고 해결방법을 따라해봐도 해결되지 않았습니다. 그러던 중... 이 문제는 한영키 문제라는 것을 알게 됩니다. 어쩐지 영어로 되어있는 해결 방법은 소용 없었던 게 이런 이유였습니다.
참고 : https://namu.wiki/w/Blender#s-10.5
나무위키에서도 "한글 입력 상태에서는 단축키가 먹통이 되고, 띄어쓰기나 기호 입력이 원활하지 않다는 점에서는 불완전하다." 라고 명시가 되어있었습니다. 아이러니하게도 이럴때보면 나무위키가 정확하네요...큽...
1단계. Adjusting the position of the cube
먼저 Transform을 통해 위치나 회전이나 크키를 조절할 수 있습니다. 현재 크키는 2x2x2 인 것을 알 수 있습니다. Location Z를 1m 설정을 통해 정사각형 Cube 가 위로 조금 올라오도록 만들어줍니다.
2단계. Adding a bevel modifier
Modifier - Bevel을 통해 코너를 둥글게 만들어보겠습니다. 그 외에도 굉장히 기능이 많군요... 허허
Amount를 통해 깎는 면을 늘려주고 Segments를 통해 부드럽게 만들어줍니다.
이제 Edit Mode로 바꿔봅시다. Tab을 통해서도 바꿀 수 있습니다.
3단계. Adding loop cuts
Loop Cut and Slide (단축키 Ctrl + R). Ctrl + R을 하고 물체에 가져다가 놓으면 노란색 선이 보이는데 이를 마우스 훨을 통해 개수를 늘릴 수 있습니다. 그리고 마우스 클릭하면 그게 최종적으로 선이 됩니다. 결과적으로 아래와 같이 만들 수 있습니다. 이렇게 만드는 이유는 5단계를 보면 알게 됩니다.
마지막으로 Modifier - Bevel을 Apply 해줍니다. 그래야 최종적으로 적용이 됩니다.
4단계. Adding a Subdivision Surface modifier
Modifier - Subdivision Surface을 통해 적은 폴리곤으로 구성된 오브젝트의 면을 세분화하여 쉽고 빠르게 부드러운 면을 가진 오브젝트로 바꾸어 줄 수 있습니다. - 참고
Levels, Render를 3으로 설정해줍니다. Apply는 아직 하지 않습니다. 지금 하게 된다면 5단계를 수행할 수 없을만큼 많은 면과 점이 생성됩니다. 궁금하면 한번 해보면 됩니다.
이렇게 하면 면을 세분화하기 때문에 더욱 곡선이 매끈해집니다.
5단계. Selecting the faces for the pips(holes)
이제 주사위에 구멍을 내줄 차례입니다. 그러기 위해서는 구멍을 내기 위한 면을 선택해 줍니다. select 모드에서 Face select로 바꿔서 면을 선택해줍니다.
주사위 구멍에 해당하는 면을 선택한 결과입니다.
6단계. Insetting and extruding faces
왼쪽 사이드를 보면 Insert Faces(단축키 i)가 있습니다. 이를 통해 0.03 Thickness 만큼 설정해줍니다. 아. 이때 주의할 점이 individual을 해줘야 됩니다. 그래야 개별 면으로 적용되기 때문입니다. 잘 보면 면이 살짝 들어간 것을 알 수 있죠?
그리고 나서 Extrude 시켜줍니다. 돌출시키다는 뜻을 가지고 있습니다. 하지만 안으로 밀어넣는것도 가능합니다. 여기서는 -0.03m offset 만큼 설정해줍니다.
그런 다음 Modifier - Subdivision Surface에서 On Cage를 활성화시켜줍니다. 음... 정확히는 잘 모르겠지만 둥글게 만들어주네요.
그리고 나서 다시 Insert Faces를 0.15 Thickness 만큼 해줍니다. 가운데 면을 하나 더 만들기 위해서?
7단계. Defining the holes
Transform Orientations를 Normal로 하고, Pivot Point를 Individual Origins 설정해줍니다.
그리고 G(move)한다음에 Z(z축 고정)으로 이동시키면 저 선택된 면이 안으로 이동됩니다. 대충 z축으로 -0.037m로 이동시키면 됩니다.
select more를 통해 가운데 선택된 영역 밖으로 선택 영역을 늘려줍니다. materials를 적용하기 위한 사전 작업입니다.
8단계. Adding basic materials
Material Preview 모드로 바꿔줍니다.
이제 materials를 바꿔줄 겁니다. 가장 아래쪽에 있네요.
base color를 0.02 블랙 정도로 맞춰줍니다. black으로 하고 저장해줍니다. 그리고 Material를 새로 추가해줍니다. select > invert를 통해 선택 영역을 반전시켜줍니다. 마지막으로 white 설정해주면 이런 주사위 그림이 나옵니다.
9단계. 최종 apply 및 export 하기
마지막으로 Modifier에 있는 Subdivision Surface를 Apply 해줍니다. 그래야 export할때 최종적으로 적용되게 됩니다. 저는 처음에 이걸 모르고 그냥 export 했다가 왜 안되지...? 를 연발하며 고생했던 경험이 있습니다. Apply를 하면 아래와 같이 됩니다.
그리고 나서 dice.glb 파일로 export 해주면 됩니다.
10단계. Three.js + R3F 에서 사용하기
참고 : https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models
참고 : https://threejs.org/docs/#manual/ko/introduction/Loading-3D-models
3D 모델 확장에는 여러 가지 유형이 있는데, 이 페이지에서는 가장 일반적인 세 가지 유형, 즉 GLTF, FBX 및 OBJ를 로드하는 데 초점을 맞출 것입니다. 이 모든 것은 useLoader 기능을 사용하지만 약간 다른 방식으로 사용합니다.
개방형 표준과 R3F에서 더 많은 지원을 하는 표준을 시작으로 우리는 .gltf 모델을 로드할 것입니다.
import { useGLTF } from "@react-three/drei";
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
export default function BoxLoader() {
const gltf = useLoader(GLTFLoader, "/dice.glb");
return <primitive object={gltf.scene} />;
}마침내 주사위를 불러왔습니다. 어휴 쉽지 않네요.
마치면서
이번시간에는 블렌더 무작정 따라하기... 를 도전했는데 어휴... 쉽지 않네요. 책이나 유튜브 튜토리얼 좀 본 다음에 할 걸 그랬나 싶네요. 아무튼 디자인은 제 영역이 아닌걸로...😂😂
그래도 나름 유익한 시간이었던거 같습니다. 3D 포맷이라던가 이를 불러와서 사용하는 것 정도는 배워두면 나중에 써먹을 일이 생기겠죠. 뭐. 아니면 간단한 3D 모델링 정도는 할 수 있을 거 같다는 자신감도 들고요.
참고 자료
- https://www.blender.org/
- https://docs.blender.org/manual/en/latest/
- https://namu.wiki/w/Blender
- https://threejs.org/docs/#manual/ko/introduction/Loading-3D-models
- https://ko.wikipedia.org/wiki/GlTF
- Blender Tutorial: Learn How to Make a Realistic 3D Dice
- https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models
- https://threejs.org/docs/#manual/ko/introduction/Loading-3D-models
