AI로 신세계 발견, A-frame AR/VR 라이브러리

"vr 회사 홈페이지를 만들거야. vr 안경으로 주위를 둘러볼 수 있게 하고 360도 방향마다 적절하게 입체적으로 메뉴를 배치해줘."

음? 이게 뭐지 .. ?! 오!

사실 위 결과가 한번에 나온건 아니고 꽤 수정요청 및 직접 수정도 했습니다.
Windsurf 에게 일을 시켰는데 생전 처음 보는 A-Frame 를 사용해서 꾸며보겠다고 하더군요.
처음에는 실행이 안되고 몇번 오류가 나서 고쳐달라고 하다 보니 이런 화면이 나왔습니다.

가운데 동그란게 바라보는 시점인데요.
카메라를 조정해 메뉴에 가져다 대면 잠시 후 팝업이 뜹니다.
닫기 버튼에 가져다 대면 잠시 후 사라지구요.
VR 로 화면을 볼 때는 터치가 불가하기에 이런 방식을 터치로 인식하게 하거든요.

Three.js 를 기반으로 하지만, 정작 물체의 배치는 스크립트를 사용하지는 않는데요.
아래와 같은 HTML 태그를 사용하는 방식이라 색다르기도 하고 Three.js 보다 더 쉽다는 느낌도 들었습니다.

<a-entity position="0 1 -5" rotation="0 -90 0">
    <a-box class="menu-item" color="#FF6B6B" depth="0.1" height="0.6" width="1.5" position="0 0 0"
          animation="property: rotation; to: 0 360 0; loop: true; dur: 15000; easing: linear">
        <a-plane color="#000000" opacity="0.8" width="1" height="0.4" position="0 0 0.06"></a-plane>
        <a-image id="menu2" position="0 0 0.07" height="0.3" width="0.6"></a-image>
    </a-box>
</a-entity>

재미 있는 것은 모바일에서 VR, AR 모드 버튼이 뜨는데요.

VR 이야 내가 요청했으니 뜨는건 당연하지만, AR 버튼도 뜨더라구요.

참고로 VR 버튼은 구글카드보드나 스마트폰을 VR 안경상자 안에 넣으면 입체적으로 보이는 방식입니다.
오큘러스같은 장비도 작동할것 같기도 합니다.

AR? 이게 뭐지?
눌러봤는데 딱히 바뀌는게 없어서 혹시나 해서 찾아봤는데요.아래 태그를

<a-sky id="skybox" src="https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg" rotation="0 -90 0"></a-sky>

아래와 같이 바꾸라고 하더라구요. AR 모드에서는 배경을 감추는 설정이라고 해서 해보니,

<a-sky hide-on-enter-ar id="skybox" src="https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg" rotation="0 -90 0"></a-sky>

아래와 같은 화면이 나온 거지요. 현실을 배경으로 3차원 물체들이 앞에 둥둥 떠다니는 것입니다.

기술모음.zip으로 포획해놔야 겠다는 생각이 들었습니다. ㅎㅎ

A-Frame 라이브러리의 공식 URL은 아래와 같은데요.

https://aframe.io/

장비가 없어서 그렇지 VR 컨트롤러로 물체를 제어하는 것도 가능한 것 같습니다.
언제 한번 알아볼 연구과제가 생긴것 같습니다.

이 게시글의 실행결과는 아래 URL에서 보실수 있습니다.

https://cray7.mycafe24.com/vr1/

VR 테크놀로지 - 미래를 경험하세요

신기술을 발견해 유쾌한 크레이입니다.
흥미로운 주제가 되셨을까요?
오늘도 방문 감사합니다!