VR 프레임워크 "A-Frame"에서 Hello 3D World

2140 단어 aframeWebVRVR
VR 유행하고 있네요. 나도 Oculas Go가 나왔을 때부터 관심이 솟아 왔기 때문에
간단하게 Web에서 VR을 만들 수 있는 Mozilla 근제의 프레임워크 「A-Frame」을 만져 보고 싶습니다.

사실은 middleman + s3_sync로 정적 호스팅을 원합니다.
급히 이번은 과거에 만든 PlayFramework + Heroku 환경 로 간편하게 공개합니다.

로컬 개발 환경에서 aframe.js를 실행하기 위해 Content-Security-Policy 헤더에 다음 설정을 추가했습니다.
play.filters.headers.contentSecurityPolicy = "script-src 'self' https://aframe.io 'unsafe-eval'; object-src 'self'"

우선 공식 문서 에 있는 아래의 샘플 코드를 움직여 보자.
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

이것만으로 이런 느낌의 VR 공간을 만들 수 있다.


실제의 움직임은 이런 느낌.
h tps : // p ぁ y - sc. 어리석은 p. 코m/

각 요소에 대한 자세한 내용은 추후 추가 예정

감상



마크업만으로 그것 같은 3D를 실현할 수 있는 것은 매우 편하고 좋네요.
좀 더 정교한 VR 공간을 만들 수 있도록 계속 A-Frame에 대해 조사하고 싶습니다.

좋은 웹페이지 즐겨찾기