바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 )

오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.

비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.

지난 게시글 : https://itadventure.tistory.com/686

바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록

가상공간에 그림같은 집을 짓고 거기서 걱정없이 살 수 있다면 좋겠지만,
세상은 그렇게 우리를 여유롭게 내버려 두지는 않지요 :)
그냥 상상의 나래를 펼쳐 잠깐 쉬어 갈 수 있는 공간으로 생각하는 게 좋을것 같습니다.

오늘은 3차원 세계의 기본 도형만으로 장난감같은 집을 꾸며보는 시간을 가져보도록 하겠습니다.

---

첫단계, 코드 자동완성으로 땅을 만들어봐!

---

가상공간에 무언가를 건설하려면 기본적으로 땅이 있어야지요.
땅은 바빌론JS에서 ground 라고 부르는데요. 땅을 먼저 건설해 봅시다.
처음부터 시작하기 위해 main.js 기본 코드중 아래 코드는 삭제하고 시작하겠습니다.

// Built-in 'sphere' shape.
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

// Move the sphere upward 1/2 its height
sphere.position.y = 1;

// Built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

그리고 1인칭 카메라 코드도

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

아래와 같이 변경해 주세요. 마우스로 제작물을 관찰하기에 용이합니다.

var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);
camera.wheelDeltaPercentage = 0.01;

이제 금방 코드를 삭제한데서부터 시작하면 됩니다.
코드 자동완성 기능을 이용할텐데요.
ground 를 타이핑한 후 자동완성 코드를 선택하면,

아래 화면이 등장합니다.

여기서 땅 이름과 크기를 정해줄 수 있습니다.
참고로 현재 상태는 코드 스니펫 입력 모드이기 때문에 TAB 키를 누르면 width, height 의 숫자 영역으로 이동이 됩니다.

그 반대로 Shift + TAB 키를 누르면 반대로 이동합니다.
이 점을 이용하면 편리하게 작업하실 수가 있지요.

땅 이름은 crayground, 크기는 10 x 10으로 하겠습니다.
땅 이름을 먼저 타이핑한 다음,

TAB 키를 치면 width 의 숫자 영역으로 이동합니다.
거기서 10을 입력하고

다시 TAB 키를 치면 height의 숫자 영역으로 이동합니다. 거기서 또 10을 입력한 다음,

다시 TAB 키를 치면 커서가 맨 마지막으로 이동합니다.

자, 금방 했던 것을 다시 확인해볼까요?
1) ground 타이핑, 코드 스니펫 선택
2) 땅 이름 crayground 입력
3) TAB 키, width 값 10 입력
4) TAB 키, height 값 10 입력
5) TAB 키, 끝

이렇게 자동 완성을 이용하면 전체 코드 입력없이 복붙없이도 쉽게 입력이 가능합니다.
ground 하나만 기억하면 말이지요 :)

이제 웹페이지를 실행하면 아래 땅 모양이 화면에 펼쳐지는데요 ( 사다리꼴이 아닙니다.. )

땅이 좀 밋밋하지요?
땅에 무늬를 좀 입혀서 땅처엄 보이게 하겠습니다.

---

땅을 땅답게, 매트리얼 적용

---

픽사베이(https://pixabay.com/) 무료 이미지 사이트에서 '텍스쳐'로 검색하시면 꽤 괜찮은 땅 이미지를 다운받으실 수 있는데요. 저는 아래 이미지로 정하겠습니다. 여러분은 마음에 드시는 텍스쳐를 다운받아 주세요.

https://pixabay.com/ko/photos/벽-담-돌담-패턴-질감-1087955/

파일을 다운받아 brick.jpg 로 바꾸어 main.js 와 같은 폴더에 저장한 다음,

방금 전 코드 밑에 아래 코드를 추가하면 됩니다.
( 아쉽게도 이 코드는 자동 완성이 없더라구요 )

const groundMat = new BABYLON.StandardMaterial("groundMat");  // 매트리얼 생성 ( 3D 에서는 모든 것이 메트리얼 )
groundMat.diffuseTexture = new BABYLON.Texture("./brick.jpg"); // 매트리얼에 그림을 적용
ground.material = groundMat;  // 땅의 매트리얼에 적용

그러면 땅의 모양이 좀 더 그럴싸하게 바뀌지요.

참고로 3차원 공간에서는 물체에 직접 이미지를 적용하지는 못하고 아래 순서로 진행해야 합니다.

1) 매트리얼을 만들고
2) 매트리얼에 이미지를 입힌 다음
3) 매트리얼을 모델에 적용

1) ~ 3) 의 과정이 바로 앞의 코드 3줄과 같습니다.

---

박스를 만들자!

---

집의 외형은 우선 상자에서 시작해 봅시다.

box 입력 후 코드 자동 완성 기능으로,

아래 코드를 생성해 주세요.

var box = BABYLON.MeshBuilder.CreateBox("house", {size: 1}, scene);

그러면 이런 결과가 보일텐데요.
원래는 정육면체가 나와야 하는데 이상하게 납작하군요?

그것은 박스의 3차원 중심 좌표가 땅과 동일하게 때문입니다.

박스의 중심 좌표는 박스 아랫 부분이 아니라 가운데거든요.

그렇기 때문에 박스를 땅 위에 보이게 하려면 0.5 단위만큼 위로 올려주어야 합니다.
아래 코드를 추가하면 박스가 땅 위에 딱 맞붙어 보입니다.

box.position.y = 0.5;

---

지붕을 만들자!

---

바빌론JS 기본 도형중 원통이란게 있는데요.
영어로는 cylinder 라고 합니다.

이 원통은 원의 모양이 사실은 32각형인데요.
만일 원의 모양을 5각형으로 줄이면 아래와 같이 됩니다

3각형으로 줄이면 어떻게 될까요? 아래와 같습니다.
이제 이걸로 지붕을 만들 겁니다.

금방 코드에 아래를 추가해 주세요.

const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});
roof.scaling.x = 0.75;
roof.rotation.z = Math.PI / 2;
roof.position.y = 1.22;

지붕이 추가되었지요?

---

벽, 지붕 무늬 입히기

---

이제 벽과 지붕도 바닥처럼 무늬를 입혀볼까요?

저는 벽은 아래 이미지를,

https://pixabay.com/ko/photos/벽돌-벽-사각형-네모-2172677/

지붕은 아래 이미지를 사용하였습니다.

https://pixabay.com/ko/photos/나무-텍스쳐-질감-거친-1140368/

각각 wall.jpg, roof.jpg 로 이름을 바꾸어 main.js 와 동일 폴더에 저장해 주세요.

그리고 아래 코드를 추가하면 됩니다.

// 박스 벽 매트리얼
const wallMat = new BABYLON.StandardMaterial("wallMat");
wallMat.diffuseTexture = new BABYLON.Texture("./wall.jpg");
box.material = wallMat;

// 지붕 매트리얼
const roofMat = new BABYLON.StandardMaterial("rootMat");
roofMat.diffuseTexture = new BABYLON.Texture("./roof.jpg");
roof.material = roofMat;

그러면 아래 결과가 보이실 텐데요.

너무 어두 컴컴한 것 같습니다.
조명 강도를 좀 높여보죠.

아래 코드를 찾아

light.intensity = 0.7;

1.0으로 바꾸면 좀 밝아집니다.

뭐 1.5 정도로 하면 아주 밝지요.

---

마무~리

---

3d 모델러분들이 보면 코웃음을 칠지도 모르겠지만 그래도 나름 분위기 있는 집을 자바스크립트 코드로 만들어 보았습니다.
필요하신 분께 도움이 되셨으면 합니다.
오늘도 방문해주신 분들께 감사드립니다~

---

다음 게시글 : https://itadventure.tistory.com/688

바빌론 JS - 집의 벽 표면 지대로.