처음에

최근 만남 축제를 참가했습니다. 우리 오쿠타마 일본어학교는 VR 체험 프로젝트를 만들었습니다. 저는 그 프로젝트 개발 담당입니다. 전 나는 VR의 경험 별로 없기 때문에, 처음 여러가지 VR을 찾아, 다양한 방법을 찾아냈다. 그 후 하나 재미있는 프레임워크 선택했습니다, A-Frame 라고 하는 프레임워크입니다. 그런 다음 VR 경험 프로젝트를 위해 A-Frame 프레임 워크를 사용합니다. 글쎄, 조금 자바 스크립트도 사용합니다. 다음은 VR 경험의 샘플 뷰입니다.

A-Frame

간략한 설명은 A-Frame은 VR 경험을 구축하기위한 웹 프레임 워크입니다. HTML 태그와 Entity-Component를 사용하여 웹 VR을 만들 수 있습니다.

개발 환경

개발

개발을 위해 OS는 Windows 10 Home. Sublime 텍스트 편집기를 사용합니다.

브라우저

IOS의 Safari와 Google 크롬, 안드로이드 Chrome에서 작동합니다. Windows(Chrome, Firefox).

장치

VR 헤드셋을 사용합니다. 이것은 안드로이드와 IOS 모두에서 작동합니다. 하지만 큰 전화는 조금 문제가 있습니다.

코드

아래는 화면 상단에 저작권 이름을 표시하는 코드입니다.

<div style="background-color: white; position: absolute; z-index: 2;">© <span id="cp-name">Sho Tanaka</span></div>

<a-assets>
  <!-- 360 image -->
  <img id="bit" crossorigin="anonymous" src="images/1.jpg">
  <img id="borobudur" crossorigin="anonymous" src="images/5.jpg">
  <img id="nacpan_beach" crossorigin="anonymous" src="images/2.jpg">
  <img id="okutama_lake" crossorigin="anonymous" src="images/3.jpg">
  <img id="ogouchi_jinja" crossorigin="anonymous" src="images/4.jpg">

  <!-- thumb image -->
  <img id="bit-thumb" crossorigin="anonymous" src="images/vr_bit.jpg">
  <img id="borobudur-thumb" crossorigin="anonymous" src="images/vr_indonesia.jpg">
  <img id="nacpan_beach-thumb" crossorigin="anonymous" src="images/vr_phili.jpg">
  <img id="okutama_lake-thumb" crossorigin="anonymous" src="images/vr_okutama.jpg">
  <img id="ogouchi_jinja-thumb" crossorigin="anonymous" src="images/vr_okutama.jpg">

  <!-- Image link template to be reused. -->
  <script id="link" type="text/html">
    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1.3"
      material="shader: flat; src: ${thumb}"
      event-set__1="_event: mousedown; scale: 1 1 1"
      event-set__2="_event: mouseup; scale: 1.2 1.2 1"
      event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
      event-set__4="_event: mouseleave; scale: 1 1 1"
      set-image="on: click; target: #image-360; src: ${src}">
    </a-entity>
  </script>
</a-assets>

이상은 360 image와 썸네일 설정입니다. 360 이미지를 변경하는 자바 스크립트도 있습니다.

<a-sky id="image-360" radius="10" src="#bit" ></a-sky>

이 코드는 360° 이미지를 장면으로 설정하는 코드입니다. 배경색을 설정할 수도 있습니다.

<a-entity id="links" layout="type: line; margin: 1.5" position="-1.7 1 -4">
  <a-entity id="bit_frame" class="clickable" onclick="hideframe(50,'bit_frame', 'Sho Tanaka')" template="src: #link" data-src="#bit" data-thumb="#bit-thumb" position="0 0 0" sound="on: click; src: /sound/BIT.mp3" preload="auto"></a-entity>
  <a-entity id="borubudur_frame" class="clickable" onclick="hideframe(95,'borubudur_frame', '2018 Google')" template="src: #link" data-src="#borobudur" data-thumb="#borobudur-thumb" position="2 0 0" sound="on: click; src: /sound/Borobudur.mp3" preload="auto"></a-entity>
</a-entity>

이 코드는 썸네일 개체를 표시하고 썸네일 위치, 커서 이벤트가 트리거될 때 사운드와 이벤트를 설정합니다.

<a-entity camera look-controls>
  <a-cursor id="cursor" 
    animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
    animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 150"
    event-set__1="_event: mouseenter; color: springgreen"
    event-set__2="_event: mouseleave; color: white"
    fuse="true"
    raycaster="objects: .clickable">
  </a-cursor>
</a-entity>

이 코드는 카메라와 커서 설정용입니다. 카메라의 중간에는 ○ 커서가 있습니다. 커서를 썸네일에 포커스하여 다른 화면을 표시합니다.

사용한 자바 스크립트

<script type="text/javascript">
  function hideframe(delay, framevalue, copyright){
    document.getElementById('cp-name').innerText = copyright;
  var frame = ["bit_frame","borubudur_frame","nacpan_beach_frame","okutama_lake_frame","oogouchi_jinja_frame"];
    for(i=0; i< frame.length; i++){
      if(frame[i] != framevalue){
        var frameK = document.getElementById(frame[i]);
        frameK.setAttribute('visible', false);
        frameK.setAttribute('class', "");
        setTimeout(getFrame(frameK), delay * 1000);
      }
    }
  }

  function getFrame(element){
    return function() {
      element.setAttribute('class', "clickable");
      element.setAttribute('visible', true);
    }
  }
</script>

위의 자바스크립트 함수는 일정 시간 이미지 축소판을 숨기고 저작권도 표시합니다. 내가 그것을 숨기는 이유는 장면마다 설명이 있기 때문입니다.