지난 게시글에 바빌론JS를 이용하여 재미난걸 만들어보았었는데요.
https://itadventure.tistory.com/680
바빌론js - 3차원 웹!
평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에
itadventure.tistory.com
원리를 모르고 진행했기 때문에 신기하긴 했지만 어떻게 그런건지 이해가 어려울 수 있습니다.
오늘은 그 원리를 하나씩 밝혀 보고자 합니다 :)
기초코드
가장 기본적인 코드는 아래와 같습니다.
scene 와 camera 는 필수로 제공되어야 하는데요
scene 은 가상공간을, camera 는 카메라를 의미합니다.
상세 내용은 주석을 읽어 보시면 도움 되실 겁니다.
const createScene = () => {
// 장면 생성
const scene = new BABYLON.Scene(engine);
// 카메라 생성
const camera = new BABYLON.ArcRotateCamera(
"camera",
-Math.PI / 2, // 가로 방향 회전
Math.PI / 2.5, // 위아래 방향 회전
4, // 거리
new BABYLON.Vector3(0, 0, 0), // 카메라의 좌표
scene // 연결할 장면
);
// HTML 페이지 canvas 에 카메라 연결
camera.attachControl(canvas, true);
// 빛, 사물, 특수효과를 배치
// 코드 추가 영역...
return scene;
}플레이 그라운드 ( https://playground.babylonjs.com/ ) 에서
이 코드를 실행하면 어떻게 될까요?
( Alt+Enter 또는 ▷, 이제부터 이 설명은 생략하겠습니다. )
아무것도 안 보입니다. 아무런 물체도 빛도 없기 때문이지요.
물체(상자) 배치
이제 물체(상자)를 하나 배치해보겠습니다.
코드 추가 영역에 아래 코드를 입력해 실행해보세요.
// 상자를 배치합니다.
const box = BABYLON.MeshBuilder.CreateBox("box", {});시커먼 물체가 보이실 겁니다. 상자는 맞는데 빛이 없기 때문에 온통 검은색으로 보이는 것이지요.
빛 배치
다음으로 빛을 배치해 보겠습니다.
대체로 빛은 사물보다 코드를 먼저 써주는게 관례입니다.
상자 배치 코드 윗 부분에 아래 코드를 넣고 실행하면,
// Hemispheric(반구) 조명
const light = new BABYLON.HemisphericLight(
"light",
new BABYLON.Vector3(0, 1, 0) // 위쪽 방향에 빛
);칙칙했던 상자가 아래와 같이 밝게 보입니다.
장면을 파일로 저장하기
자, 이렇게 완성한 장면은 바빌론 장면 파일(.babylon) 또는 GLB 파일(.glb)로 저장할 수 있습니다.
플레이그라운드 상단 상자모양의 인스펙터(Inspector) 아이콘이 바로 그 도구인데요.
버튼 클릭시 아래 창이 등장합니다.
Node 항목을 펼쳐서(+ 기호) 장면의 구성을 보실 수도 있지요.
장면 파일을 저장하려면 연장 아이콘 선택 후
Export to Babylon 버튼이나,
Export to GLB 버튼을 찾아 선택하시면 됩니다.
그러면 파일이 다운로드 되거든요
웹에서 장면 간단히 띄우기
.glb 파일은 바로 웹페이지에 뷰어로 써먹을 수 있습니다.
아래와 같이 HTML 소스를 구성하면 되거든요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<babylon model="./scene.glb" style="width:400px;height:300px;"/>
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
</body>
</html> scene.glb 파일로 장면을 다운받은 후 호스팅 서버에 이 웹페이지와 함께 띄우면 아래와 같이 보입니다.
상자가 천천히 돌아가는데 실험해보실 수 없는 환경이라면 아래 페이지를 방문하시면 구경하실 수 있습니다.
http://dreamplan7.cafe24.com/babylon/ex2/index.html
.babylon 장면 띄우기
.babylon 장면은 뷰어로는 띄울 수 없고, babylonjs로 띄울 수 있는데요.
호스팅 서버에 파일을 올려서 플레이그라운드에서 띄우거나 다운로드하고 웹에 올려서 띄우는 방식이 있습니다.
전자는 시도해보니 https 도메인에서만 가능한 관계로, 후자로 시도해 보았습니다.
다운로드 버튼을 선택하면 압축파일이 다운로드되는데요.
압축파일을 풀어 호스팅 서버에 업로드하고 동일한 위치에 scene.babylon 파일도 업로드합니다.
그리고 index.html 파일을 열면 꽤 긴소스가 등장할텐데요.
아래 코드를 찾아,
// 상자를 배치합니다.
const box = BABYLON.MeshBuilder.CreateBox("box", {});아래와 같이 수정합니다.
// 장면 불러오기
BABYLON.SceneLoader.ImportMeshAsync(
"", // 공백이면 장면에 포함된 모든 모델
"./", // 현재폴더
"scene.babylon", // 장면 파일
scene // 불러온 장면 객체
);그리고 페이지를 확인하면, 상자가 배치된 장면 파일을 사용했기에 아래 화면을 볼 수 있는 것입니다.
실습이 어려운 분은 아래 웹페이지에서 결과를 보실 수 있습니다.
http://dreamplan7.cafe24.com/babylon/ex3/
아래 내용은 시도해보지는 않았지만 공식 문서에 있는 내용이라 그대로 될것 같습니다.
// 장면 파일에서 'model1' 이라는 이름의 물체만 가져옵니다.
BABYLON.SceneLoader.ImportMeshAsync(
"model1",
"경로",
"장면.babylon"
);
// 장면 파일에서 'model1', 'model2' 이라는 이름의 물체만 가져옵니다.
BABYLON.SceneLoader.ImportMeshAsync(
["model1", "model2"],
"경로",
"장면.babylon"
);이상 간단하게 장면을 구성하고 불러오는 방법을 살펴보았는데요.
필요하신 분에게 도움이 되셨으면 합니다 :)
다음 게시글 : https://itadventure.tistory.com/684
바빌론JS - 장면에서 모델 불러오기
지난 시간에는 장면을 생성하고 이를 뷰어에서 불러오는 방법을 살펴보았습니다.https://itadventure.tistory.com/683 바빌론JS - 장면 만들고 뷰어로 불러오기지난 게시글에 바빌론JS를 이용하여 재미난
itadventure.tistory.com
'자바스크립트와 캔버스' 카테고리의 다른 글
| 바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록 (0) | 2024.07.12 |
|---|---|
| 바빌론JS - 웹개발 기본형 (0) | 2024.07.11 |
| 블로그에 스케치팹 3D 장면 넣기 (0) | 2024.07.08 |
| 바빌론js - 3차원 웹! (0) | 2024.07.07 |
| 돈 뽑는 기계 (17) | 2022.04.09 |
