aframeKomma igång med aframe


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

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!

Visuell inspektör

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

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
 

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>