aframe Handledning
Komma igång med aframe
Sök…
Anmärkningar
Det här avsnittet ger en översikt över vad aframe är, och varför en utvecklare kanske vill använda den.
Det bör också nämna alla stora ämnen inom aframe och länka till relaterade ämnen. Eftersom dokumentationen för aframe är ny kan du behöva skapa initialversioner av relaterade ämnen.
versioner
A-ram 0.x
| Version | Utgivningsdatum |
|---|---|
| 0,6 | 2017/05/25 |
| 0,5 | 2017/02/10 |
| 0,4 | 2016/12/17 |
| 0,3 | 2016/08/18 |
Äldre versioner
| Version | Utgivningsdatum |
|---|---|
| 0,2 | 2016/03/26 |
| 0,1 | 2015/12/17 |
Komma igång
A-Frame kan utvecklas från en vanlig HTML-fil utan att behöva installera någonting! Ett bra sätt att prova A-Frame för att remixa startexemplet på Glitch, en online-kodredigerare som omedelbart är värd och distribuerar gratis. Eller skapa en .html fil och inkludera A-Frame i head :
<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>
Inkludera JS Build
Om du vill inkludera A-Frame till en HTML-fil, vi släppa en script som pekar på CDN bygga:
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
Installera från kl
Vi kan också installera A-Frame till och med npm:
$ npm install aframe
Då kan vi pakka A-Frame i vår applikation. Till exempel med Browserify eller Webpack:
require('aframe');
Om du använder npm kan du använda vinkel, ett kommandoradsgränssnitt för A-Frame. vinkel kan initialisera en scenmall med ett enda kommando:
npm install -g angle && angle initscene
Funktioner
VR Made Simple
Bara släppa in ett script tag och a-scene . A-Frame hanterar 3D-pannplatta, VR-installation och standardkontroller. Inget att installera, inga byggsteg.
Deklarativ HTML
HTML är lätt att läsa, förstå och kopiera och klistra in. Baserat på toppen av HTML är A-Frame tillgänglig för alla: webbutvecklare, VR-entusiaster, konstnärer, designers, lärare, tillverkare, barn.
Korsplattform VR
Bygg VR-applikationer för Vive, Rift, Daydream, GearVR och Cardboard med stöd för alla respektive styrenheter. Har du inte headset eller styrenheter? Inga problem! A-Frame fungerar fortfarande på vanliga stationära datorer och smartphones.
Enhetskomponentarkitektur
A-Frame är ett kraftfullt tre.js-ramverk som tillhandahåller ett deklarativt, komposibelt, återanvändbart enhetskomponentstruktur.js. HTML är bara toppen av isberget; utvecklare har obegränsad tillgång till JavaScript, DOM API: er, three.js, WebVR och WebGL.
Prestanda
A-Frame är optimerad från grunden för WebVR. Medan A-Frame använder DOM, berör dess element inte webbläsarens layoutmotor. Uppdateringar av 3D-objekt görs alla i minnet med lite overhead under en enda requestAnimationFrame-samtal. För referens, se A-Painter, en Tilt Brush-klon inbyggd i A-Frame som fungerar som native (90+ FPS).
Verktyg Agnostic
Eftersom webben byggdes på uppfattningen om HTML är A-Frame kompatibel med de flesta bibliotek, ramverk och verktyg inklusive React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.
Visuell inspektör
A-Frame ger en praktisk inbyggd visuell 3D-inspektör. Öppna alla A-Frame-scener, slå ctrl + alt + i , och flyga runt för att kika bakom huven!
Register
Ta kraftfulla komponenter som utvecklare har publicerat och anslut dem direkt från HTML. I likhet med Unity Asset Store samlar in och sammanställer A-Frame-registret dessa komponenter för enkel upptäckt.
Komponenter
Slå marken med A-Frame kärnkomponenter som geometrier, material, lampor, animationer, modeller, raycasters, skuggor, positionsljud, text och Vive / Touch / Daydream / GearVR / Kartonkontroller. Gå ännu längre med samhällskomponenter som partikelsystem, fysik, multianvändare, hav, berg, taligenkänning, rörelsefångst, teleportering, superhänder och förstärkt verklighet.
Komma igång för AR
För att skapa AR-applikationer på webben måste du lägga till ett nytt bibliotek med namnet AR.js. Först laddar du A-ram följt av AR.js.
Nytt måste du ställa in din scen med hjälp av A-frames a-scene taggen med artoolkit -attributen tillagd. sourceType måste vara din webbkamera. Teckensnittskameran på din smartphone stöds också med hjälp av detta.
a-marker-camera taggen markerar en bild inuti den inspelade skärmen som representerar en bild. I det här fallet är det marker.png . När kameran upptäcker denna markör visas rutan på markören.
Nedan hittade du exemplskoden:
<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>