바빌론JS - 비를 피하고 싶어!

지난 시간에는 케이군의 진짜 정체를 알아보았습니다.

https://itadventure.tistory.com/699

바빌론JS - 내 진짜 정체를 알려주지.

케이군은 계속되는 비에 이제는 몸이 추워 으슬으슬하다고 하는군요.
그러면서 몸을 피할 곳이 있으면 좋겠다고 합니다.
그러고 보니 집이야 많긴 하지만 다들 문이 꽝꽝 닫혀 있어 케이군이 거주할 곳이 없군요.

크레이는 케이를 위해 집을 만들어 주기로 했습니다.
케이 마음에 들지는 모르겠지만요 :)

---

새로운 집 가져오기

---

크레이가 만든 로우폴리 집 모델입니다.
아래 파일을 다운받아

house1_lowpoly.glb

0.11MB

main.js와 같은 폴더에 넣어 주세요.
파일명은 house1_lowpoly.glb 로 정해주셔야 합니다.

이제 코드를 수정합시다.
main.js 에서 마을을 불러오는 코드를 찾아.

// 마을 부르기
BABYLON.SceneLoader.ImportMeshAsync("", "./", "dwellings.glb")
.then((result) =>  house_callback(scene, result) );

아래 코드를 추가합니다.

 // 전용 집
BABYLON.SceneLoader.ImportMeshAsync("", "./", "house1_lowpoly.glb")
.then((result) =>  house1_lowpoly_callback(scene, result) );

그리고 함수화 코드 적당한 곳, 아래 코드를 찾아

function car_callback(scene, result){

그 윗부분에 아래 코드를 넣습니다.
위치나 크기, 각도는 자유롭게 정해주셔도 됩니다 :)

function house1_lowpoly_callback(scene, result){
    // 로딩 후 실행할 코드        
    var mesh = result.meshes[0];
    mesh_car = mesh;
    mesh.scaling = new BABYLON.Vector3(0.5, 0.5, -0.5);
    mesh.position = new BABYLON.Vector3( -2.61, 0.00, -3.90 );
    mesh.rotation = new BABYLON.Vector3(0, BABYLON.Tools.ToRadians(-30), 0);
}

이제 플레이어 케이로 변신하면,

걸어서 새로 만든 집에 찾아갈 수 있습니다.

새로 만든 집은 사실 벽을 뜷고 들어갈 수 있습니다.
실제 벽이 존재하지 않기 때문이지요.

---

기능성 하우스

---

사실 이 집에는 2가지 기능이 있는데요.
첫번째는 터치로 문을 열고 닫을 수 있다는 것입니다.

문을 열고 닫기 위해서는 코드를 약간 추가해 주어야 하는데요.
바로 피킹 시스템입니다. 지난번 좌표를 조사했던 것과 비슷한 코드이지요.

아래 코드를 찾아

GUISystem();

아래 코드를 추가하고,

mousepickSystem(scene);

아래 코드를 찾아

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

그 위에 아래 코드를 추가해 줍니다.

// 마우스 피킹 시스템
function mousepickSystem(scene){
    let lastClick=false;
    // 랜더 프레임별 실행 코드
    scene.onBeforeRenderObservable.add(() => {
        // 클릭중 반복 동작 방지
        const Click = mouseDeviceSource.getInput(BABYLON.PointerInput.LeftClick);
        if(Click && lastClick)return;
        lastClick = Click;

        if (Click) {
            // 피킹 오브젝트
            const picking = scene.pick(scene.pointerX, scene.pointerY);
            if (picking.hit) {
                
                // 피킹 메쉬
                let pickedMesh = picking.pickedMesh;
                switch(pickedMesh.name)
                {
                    case 'door':    // 문
                        if(pickedMesh.open==true)
                            pickedMesh.rotation = new BABYLON.Vector3(0, 0, 0);
                        else
                            pickedMesh.rotation = new BABYLON.Vector3(0, BABYLON.Tools.ToRadians(80), 0);
                        pickedMesh.open = !pickedMesh.open;
                        break;
                }
            }
        }
    });
}

이제 케이를 이동한 후 집의 문을 클릭하면,

문이 열리고 닫힙니다.

두번째 기능을 살펴보겠습니다.
방금 추가한 코드의 switch 코드를 찾아

switch(pickedMesh.name)

버튼 타입을 추가해 줍시다.

switch(pickedMesh.name)
{
    case 'door':    // 문
        if(pickedMesh.open==true)
            pickedMesh.rotation = new BABYLON.Vector3(0, 0, 0);
        else
            pickedMesh.rotation = new BABYLON.Vector3(0, BABYLON.Tools.ToRadians(80), 0);
        pickedMesh.open = !pickedMesh.open;
        break;
    case 'button':  // 집 기능 버튼
        if(pickedMesh.press==true)
            scene.getMeshByName("body").position = new BABYLON.Vector3(0, 2, 0);
        else
            scene.getMeshByName("body").position = new BABYLON.Vector3(0, 0, 0);
        pickedMesh.press = !pickedMesh.press;
        break;
}

그리고 나서 집 우측 바닥의 빨간 버튼을 터치하면

이게 뭔 일입니까? 집의 몸통이 하늘로 올라간 것을 확인할 수 있습니다.
이제 쉽게 집에 드나들 수 있겠군요.

사실 이와 같이 단순한 코딩이 가능한 것은, 블랜더3D에서 모델링할 때 구조를 그와 같이 잡아 놓았기 때문입니다. 문의 이름이 door 인 것도, 문의 회전할 중심축도 다 세팅을 해 놓았기 때문이고,

 

버튼 터치시 집의 몸체와 지붕 등의 부속물들이 한꺼번에 올라간믄 것도
body의 하위 개체로 포함하였기 때문입니다.

바빌론 샌드박스 페이지를 찾아가 다운받은 모델링 파일을 드래그하셔도 비슷하게 구조를 보실 수 있습니다 :)https://sandbox.babylonjs.com/

실습이 어려우신 분은 크레이가 마련한 결과물 페이지를 참조해 주세요.http://dreamplan7.cafe24.com/babylon/ex17/

---

마무~리

---

가까스로 비를 피해 거처를 찾은 케이군이 만족스럽다 하네요.
그래서 흐뭇한 크레이입니다 :)

흥미롭게 보셨는지 모르겠습니다 :)

오늘도 방문해 주셔서 감사합니다.

---

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

바빌론JS - 모바일웹에서 캐릭터 이동