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 |
시작하기
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
풍모
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의 핵심 구성 요소를 실행 해보십시오. 입자 시스템, 물리학, 다중 사용자, 바다, 산, 음성 인식, 모션 캡쳐, 순간 이동, 수퍼 핸드 및 증강 현실과 같은 커뮤니티 구성 요소를 추가로 활용하십시오.
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>