aframe프레임 시작하기


비고

이 섹션에서는 aframe의 개요와 개발자가 왜 그것을 사용하고 싶어하는지에 대한 개요를 제공합니다.

또한 프레임 내에있는 큰 주제를 언급하고 관련 주제에 링크해야합니다. aframe에 대한 문서는 새로운 것이므로 관련 주제의 초기 버전을 만들어야 할 수 있습니다.

버전

A 프레임 0.x

번역 출시일
0.6 2017-05-25
0.5 2017-02-10
0.4 2016-12-17
0.3 2016-08-18

레거시 버전

번역 출시일
0.2 2016-03-26
0.1 2015-12-17

풍모

VR 단순화

script 태그와 a-scene . A-Frame은 3D 보일러 플레이트, VR 설정 및 기본 컨트롤을 처리합니다. 설치할 것은 없으며 빌드 단계가 없습니다.

선언적 HTML

HTML은 읽고, 이해하고, 복사하여 붙여 넣기가 쉽습니다. HTML을 기반으로 한 A-Frame은 웹 개발자, VR 애호가, 아티스트, 디자이너, 교육자, 제작자, 어린이 모두에게 액세스 할 수 있습니다.

교차 플랫폼 VR

Vive, Rift, Daydream, GearVR 및 Cardboard에 대한 VR 응용 프로그램을 구축하여 모든 컨트롤러를 지원하십시오. 헤드셋이나 컨트롤러가 없습니까? 문제 없어! A-Frame은 표준 데스크톱 및 스마트 폰에서 계속 작동합니다.

엔티티 구성 요소 아키텍처

A-Frame은 선언적이며 구성 가능하고 재사용 가능한 엔티티 구성 요소 구조를 제공하는 강력한 three.js 프레임 워크입니다. HTML은 빙산의 일각에 불과합니다. 개발자는 JavaScript, DOM API, three.js, WebVR 및 WebGL에 무제한 액세스 할 수 있습니다.

공연

A-Frame은 WebVR을 위해 처음부터 최적화되었습니다. A-Frame은 DOM을 사용하지만 요소는 브라우저 레이아웃 엔진에 영향을주지 않습니다. 3D 객체 업데이트는 모두 단일 requestAnimationFrame 호출에서 작은 오버 헤드로 메모리에서 수행됩니다. 참고로 A-Painter는 기본 (90+ FPS)처럼 실행되는 A-Frame으로 제작 된 기울기 브러시 복제물을 참조하십시오.

도구 불가지론 자

웹은 HTML 개념으로 구축 되었기 때문에 A-Frame은 React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery를 비롯한 대부분의 라이브러리, 프레임 워크 및 도구와 호환됩니다.

시각 검사기

A-Frame은 편리한 내장 3D 시각 검사기를 제공합니다. A- 프레임 장면을 열고 ctrl + alt + i 를 누르고 두건 뒤에서 들여다 볼 수 있습니다.

시각 검사관

기재

개발자가 게시하고 HTML에서 바로 연결할 수있는 강력한 구성 요소를 사용하십시오. 유니티 자산 저장소와 마찬가지로 A- 프레임 레지스트리는 쉽게 발견 할 수 있도록 이러한 구성 요소를 수집하고 관리합니다.

구성 요소

기하학, 재료, 조명, 애니메이션, 모델, 레이 캐스터, 그림자, 위치 오디오, 텍스트 및 Vive / Touch / Daydream / GearVR / Cardboard 컨트롤과 같은 A-Frame의 핵심 구성 요소를 실행 해보십시오. 입자 시스템, 물리학, 다중 사용자, 바다, 산, 음성 인식, 모션 캡쳐, 순간 이동, 수퍼 핸드 및 증강 현실과 같은 커뮤니티 구성 요소를 추가로 활용하십시오.

시작하기

A-Frame은 아무것도 설치하지 않고 일반 HTML 파일에서 개발할 수 있습니다! 무료로 즉시 호스팅 및 배포 할 수있는 온라인 코드 편집기 인 Glitch에서 A-Frame을 사용해 재시작 할 수있는 좋은 방법입니다. 또는 .html 파일을 만들고 head 에 A-Frame을 포함 시키십시오.

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.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>
 

JS 빌드 포함

A-Frame을 HTML 파일에 포함 시키려면 CDN 빌드를 가리키는 script 태그를 드롭합니다.

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
 

npm에서 설치

npm을 통해 A-Frame을 설치할 수도 있습니다.

$ npm install aframe
 

그런 다음 A-Frame을 응용 프로그램에 번들로 제공 할 수 있습니다. 예를 들어, Browserify 또는 Webpack의 경우 :

require('aframe');
 

npm을 사용하면 A-Frame 용 명령 줄 인터페이스 인 angle을 사용할 수 있습니다. angle은 단일 명령으로 장면 템플리트를 초기화 할 수 있습니다.

npm install -g angle && angle initscene
 

AR 시작하기

웹에 AR 응용 프로그램을 만들려면 AR.js 라는 새 라이브러리를 추가해야합니다. 먼저 AR 프레임을로드 한 다음 AR.js를로드합니다.

Newt 당신은 artoolkit 속성이 추가 된 artoolkit 프레임 a-scene 태그를 사용하여 장면을 설정해야합니다. sourceType 은 웹캠이어야합니다. 이 기능을 사용하여 스마트 폰의 글꼴 카메라도 지원됩니다.

a-marker-camera 태그는 이미지를 나타내는 기록 된 화면 내부의 이미지를 표시합니다. 이 경우 marker.png 입니다. 카메라가이 마커를 감지하면 상자가 마커에 표시됩니다.

아래에서 예제 코드를 찾을 수 있습니다.

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
    THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>

    <a-scene artoolkit='sourceType: webcam;'>
        <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='marker.png'></a-marker-camera>
    </a-scene>

</body>