바빌론JS - GUI 에디터!

바빌론 JS 공식사이트에서 제공하는 GUI 에디터 페이지를 발견했습니다!

https://gui.babylonjs.com/

여기서 GUI 를 편집하고 다운받으면 바빌론js 자바스크립트 코드로 불러올수 있더군요.

아주 간단히 예를 들자면 도구상자의 버튼을 클릭, 화면에 버튼을 띄운 다음에

왼쪽창의 버튼 텍스트 요소를 선택

오른쪽 창의 TEXTBLOCK 속성에서 'Click Me' 를 '나를 클릭하시오'로 변경

그리고 저장하면 됩니다.

그러면 파일이 다운로드되는데요.

다운받은 파일을 main.js 와 같은 폴더에 넣고 파일명을 gui.json 으로 변경합니다.

그리고 아래 코드를 이용하면 GUI 를 불러올 수 있습니다.

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas,true);
let advancedTexture = null;

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera(
        "ArcCam", 
        BABYLON.Tools.ToRadians(90), 
        BABYLON.Tools.ToRadians(65), 
        2,  // 카메라 거리
        BABYLON.Vector3.Zero(), 
        scene
    );
    camera.attachControl(canvas, true);

    // GUI
    advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
    GUISystem();

    // 씬 리턴
    return scene;
};


async function GUISystem(){
    // gui json 불러옴
    await advancedTexture.parseFromURLAsync("./gui.json");
    // W 버튼 ( GUI )
    const Button = advancedTexture.getControlByName("Button");
    Button.onPointerClickObservable.add(() => {
        const button_textblock = advancedTexture.getControlByName("Button_button")
        button_textblock.text = '클릭하였슈';
    } );
}

const scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});

window.addEventListener("resize", function () {
    engine.resize();
});

결과화면

클릭하면 버튼 내용이 바뀌는 코드도 추가해두었습니다 :)

GUI 에디터라니 일일히 좌표값 계산할 일이 없어져 매우 좋은 것 같습니다 :)
좀 더 연구해봐야 겠습니다.

아래 페이지로 오시면 결과물을 확인하실수 있습니다.

http://dreamplan7.cafe24.com/babylon/gui_sample/