바빌론JS - 마을 저장 & 열기

지난 시간에는 멋진 마을을 꾸며 보았습니다.

https://itadventure.tistory.com/689

바빌론JS - 마을 꾸미기

그런데 소스량이 만만치가 않습니다.
이렇게 만든 마을을 장면 파일로 저장하면 관리하기 편리한데요.
.glb 장면 파일로 저장하는 법을 알아보고 파일을 불러오는 부분도 다뤄보겠습니다.

---

장면 저장 cdn 설정

---

사실 지난 게시글에 장면을 저장하는 부분을 다뤄보았습니다.
https://itadventure.tistory.com/683

바빌론JS - 장면 만들고 뷰어로 불러오기

다만 이 방법은 플레이그라운드에서 코딩할 ㅒ만 쓸수 있었지요.
장면을 저장하려면 cdn 파일을 추가로 불러와야 합니다.

index.html 에서 스크립트 태그가 몰려 있는 곳을 찾아,

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>

한줄을 추가해 주세요. 이 스크립트가 바로 glb 장면 저장을 가능하게 합니다.

<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>

---

원본 집 이름 부여

---

장면을 저장하기 전 한가지 수정할 부분이 있습니다.
바로 원본 집의 이름을 정하는 것인데요.
비록 원본 집을 숨겨놓았으나 장면을 다시 불러오면 나타나기 때문입니다.
게다가 이렇게 이상한 면 겹침 효과까지 발생하는데요.

원본 집을 장면을 불러올 때 숨기려면 이름을 붙여 주어야 합니다.

buildHouse 함수를 찾아 아래 코드로 변경하고,

const buildHouse = () => {
    const box = buildBox(); // 상자2
    const roof = buildRoof();   // 지붕2
    // 메시 합치기, 멀티 메터리얼
    const house = BABYLON.Mesh.MergeMeshes([box, roof], true, false, null, false, true);
    house.name = "house1_base";
    return house;
}

buildHouse2 함수를 찾아 아래 코드로 변경해 주세요.

// 집2 함수화
const buildHouse2 = () => {
    const box2 = buildBox2(); // 상자2
    const roof2 = buildRoof2();   // 지붕2
    // 메시 합치기, 멀티 메터리얼
    const house2 = BABYLON.Mesh.MergeMeshes([box2, roof2], true, false, null, false, true);
    house2.name="house2_base";
    return house2;
}

각각 house1_base, house2_base 라는 이름을 붙였습니다.

---

glb 장면 파일 저장

---

이제 장면 파일을 저장하려면 아래 명령을 사용하면 되는데요.

BABYLON.GLTF2Export.GLBAsync

buildDwellings(); 를 찾아 그 아래 추가하면 됩니다. 파일명은 dwellings.glb로 하겠습니다.

BABYLON.GLTF2Export.GLBAsync(scene, "dwellings.glb").then((glb) => {
    glb.downloadFiles();
});

그리고 웹페이지를 실횅하면 파일이 다운로드됩니다.

혹시 이런 화면이 나온다면 계속 버튼을 눌러주세요. URL 이 https 가 아니어서 그런 겁니다.

---

바빌론 샌드박스에서 장면 파일 확인하기

---

바빌론JS 공식 사이트에는 장면 파일을 다루는 유용한 도구가 있습니다.
바로 샌드박스라는 건데요.

https://sandbox.babylonjs.com/

이 사이트에 접속하여 금방 다운받은 장면 파일을 화면에 드래그하면,

뷰어 화면이 펼쳐집니다.
마을 구성이 제대로 저장된것 같습니다.

여기서 인스펙터(Inspector) 창을 띄워 편집하는 방법도 있긴 하지만 불편해 추천하지 않습니다.

여기서 유용한 사용법은 바로 각 모델들의 이름을 확인할 수 있다는 것입니다.
왼쪽의 SCENEA EXPLORER 창에서 + 기호를 펼쳐 각 모델들의 이름을 확인할 수 있는데요.
금방 저장했던 장면의 원본집  house1_base, house2_base 등을 찾아볼 수 있습니다.

---

마을 불러오기

---

이제 마지막 대망의 꽃, 장면 불러오기입니다.

아래 코드를

buildDwellings(); // 마을

BABYLON.GLTF2Export.GLBAsync(scene, "dwellings.glb").then((glb) => {
    glb.downloadFiles();
});

 

아래 코드로 변경하고,

// 마을 부르기
BABYLON.SceneLoader.ImportMeshAsync("", "./", "dwellings.glb").then(() =>  {
    // 로딩 후 실행할 코드    
});

함수화한 모든 코드를 삭제합니다.

const buildGround = () => {
        :
        :
        :
const buildDwellings = () => {\
        :
        
}

혼동될수 있어 전체 스크립트를 나열합니다.

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas,true);
var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);
    camera.wheelDeltaPercentage = 0.01;
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 1.5;

    // 마을 부르기
    BABYLON.SceneLoader.ImportMeshAsync("", "./", "dwellings.glb").then(() =>  {
        // 로딩 후 실행할 코드    
    });

    return scene;
};

const scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});
window.addEventListener("resize", function () {
    engine.resize();
});
var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);

그러면 이런 결과 화면이 나올겁니다.
성공적으로 장면을 불러온 것인데요.

한가지 문제가 있습니다.
원본 집을 분명 숨겼는데 다시 나타나 벽 표면이 이상하게 보이고 있습니다.

이 때는 장면 파일을 불러온 후 다시 숨겨주어야 하는데요.
아래와 같이 코드를 수정하여 숨길 수 있습니다.

// 마을 부르기
    BABYLON.SceneLoader.ImportMeshAsync("", "./", "dwellings.glb").then(() =>  {
        // 기본 집 숨김        
        scene.getNodeByName("house1_base").setEnabled(false);
        scene.getNodeByName("house2_base").setEnabled(false);
    });

결과 화면입니다.

이로써 마을을 하나의 .glb 장면으로 저장하고 불러서 사용하는 방법을 알아 보았습니다.

실습이 어려우신 분은 마을을 저장하는 코드와 마을을 불러오는 코드 웹 페이지를 준비했으니 참조해 주세요.

http://dreamplan7.cafe24.com/babylon/ex8/index.html

http://dreamplan7.cafe24.com/babylon/ex8/index2.html

---

마무~리

---

필요하신 분께 도움이 되셨을까요?
오늘도 방문해주신 모든 분들께 감사드립니다.

아래는 연습으로 만들어 본거입니다 :)

---

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

바빌론JS - 미니자동차