aframe Zelfstudie => Aan de slag met aframe

Opmerkingen

Deze sectie geeft een overzicht van wat aframe is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen een kader vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de documentatie voor aframe nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

A-frame 0.x

Versie	Publicatiedatum
0.6	2017/05/25
0.5	2017/02/10
0.4	2016/12/17
0.3	2016/08/18

Oude versies

Versie	Publicatiedatum
0.2	2016/03/26
0.1	2015/12/17

Ermee beginnen

A-Frame kan worden ontwikkeld op basis van een gewoon HTML-bestand zonder iets te hoeven installeren! Een geweldige manier om A-Frame uit te proberen om het startervoorbeeld op Glitch te remixen, een online code-editor die direct gratis host en implementeert. Of maak een .html bestand en neem A-Frame op in de 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>

Neem de JS Build op

Om A-Frame in een HTML-bestand op te nemen, laten we een script vallen die naar de CDN-build verwijst:

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

Installeren vanaf npm

We kunnen A-Frame ook installeren via npm:

$ npm install aframe

Dan kunnen we A-Frame in onze applicatie bundelen. Bijvoorbeeld, met Browserify of Webpack:

require('aframe');

Als u npm gebruikt, kunt u hoek gebruiken, een opdrachtregelinterface voor A-Frame. angle kan een scènesjabloon initialiseren met een enkele opdracht:

npm install -g angle && angle initscene

Kenmerken

VR eenvoudig gemaakt

Geef gewoon een script tag en a-scene . A-Frame werkt met 3D-boilerplate, VR-instellingen en standaardinstellingen. Niets te installeren, geen build-stappen.

Declaratieve HTML

HTML is gemakkelijk te lezen, te begrijpen en te kopiëren en plakken. Omdat A-Frame gebaseerd is op HTML, is het voor iedereen toegankelijk: webontwikkelaars, VR-enthousiastelingen, kunstenaars, ontwerpers, opvoeders, makers, kinderen.

Cross-platform VR

Bouw VR-applicaties voor Vive, Rift, Daydream, GearVR en Cardboard met ondersteuning voor alle respectieve controllers. Heb je geen headset of controllers? Geen probleem! A-Frame werkt nog steeds op standaard desktop en smartphones.

Entiteit-component architectuur

A-Frame is een krachtig three.js-raamwerk dat een declaratieve, samengestelde, herbruikbare entiteit-componentstructuur.js biedt. HTML is slechts het topje van de ijsberg; ontwikkelaars hebben onbeperkte toegang tot JavaScript, DOM API's, three.js, WebVR en WebGL.

Prestatie

A-Frame is vanaf de grond geoptimaliseerd voor WebVR. Hoewel A-Frame de DOM gebruikt, raken de elementen ervan de browser-layout-engine niet. 3D-objectupdates worden allemaal in het geheugen gedaan met weinig overhead onder een enkele requestAnimationFrame-aanroep. Zie voor meer informatie A-Painter, een Tilt Brush-kloon gebouwd in A-Frame die draait als native (90+ FPS).

Hulpmiddel Agnostisch

Aangezien het web is gebouwd op basis van HTML, is A-Frame compatibel met de meeste bibliotheken, frameworks en tools, waaronder React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.

Visuele inspecteur

A-Frame biedt een handige ingebouwde visuele 3D-inspecteur. Open een A-Frame scène, druk op Ctrl + Alt + i en vlieg rond om achter de motorkap te gluren!

Registry

Neem krachtige componenten die ontwikkelaars hebben gepubliceerd en plug ze rechtstreeks in vanuit HTML. Net als de Unity Asset Store verzamelt en beheert het A-Frame Registry deze componenten voor eenvoudige ontdekking.

Components

Ga aan de slag met de kerncomponenten van A-Frame zoals geometrieën, materialen, lichten, animaties, modellen, raycasters, schaduwen, positionele audio, tekst en Vive / Touch / Daydream / GearVR / Cardboard-bedieningselementen. Ga nog verder met communitycomponenten zoals deeltjessystemen, natuurkunde, multiuser, oceanen, bergen, spraakherkenning, motion capture, teleportatie, superhanden en augmented reality.

Aan de slag voor AR

Als u AR-toepassingen op internet wilt maken, moet u een nieuwe bibliotheek met de naam AR.js toevoegen . Eerst laad je A-frame gevolgd door AR.js.

Nieuw moet u uw scène instellen met behulp van de A-frames a-scene tag met het toegevoegde artoolkit -attribute. Het sourceType moet uw webcam zijn. De fontcamera van uw smartphone wordt hiermee ook ondersteund.

de a-marker-camera tag markeert een afbeelding in het opgenomen scherm die een afbeelding vertegenwoordigt. In dit geval is het marker.png . Wanneer de camera deze markering detecteert, wordt het vak op de markering weergegeven.

Hieronder vindt u de voorbeeldcode:

<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>

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

aframe Zelfstudie
Aan de slag met aframe

Zoeken…