aframe Tutorial => Iniziare da capo

Osservazioni

Questa sezione fornisce una panoramica di ciò che è, e perché uno sviluppatore potrebbe voler usarlo.

Dovrebbe anche menzionare tutti i soggetti di grandi dimensioni all'interno di una volta e collegarsi agli argomenti correlati. Dal momento che la documentazione di aframe è nuova, potrebbe essere necessario creare versioni iniziali di tali argomenti correlati.

Versioni

A-Frame 0.x

Versione	Data di rilascio
0.6	2017/05/25
0.5	2017/02/10
0.4	2016/12/17
0.3	2016/08/18

Versioni legacy

Versione	Data di rilascio
0.2	2016/03/26
0.1	2015/12/17

Iniziare

A-Frame può essere sviluppato da un semplice file HTML senza dover installare nulla! Un ottimo modo per provare A-Frame per remixare l'esempio di avvio su Glitch, un editor di codice online che istantaneamente ospita e distribuisce gratuitamente. Oppure crea un file .html e includi A-Frame nella 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>

Include la build JS

Per includere A-Frame in un file HTML, rilasciamo un tag script punta alla build CDN:

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

Installa da npm

Possiamo anche installare A-Frame tramite npm:

$ npm install aframe

Quindi possiamo raggruppare A-Frame nella nostra applicazione. Ad esempio, con Browserify o Webpack:

require('aframe');

Se si utilizza npm, è possibile utilizzare l'angolo, un'interfaccia della riga di comando per A-Frame. l'angolo può inizializzare un modello di scena con un singolo comando:

npm install -g angle && angle initscene

Caratteristiche

VR Made Simple

Basta inserire un tag script e a-scene . A-Frame gestirà il boilerplate 3D, l'impostazione VR e i controlli predefiniti. Niente da installare, nessuna procedura di costruzione.

HTML dichiarativo

L'HTML è facile da leggere, capire e copiare e incollare. Essendo basato su HTML, A-Frame è accessibile a tutti: sviluppatori web, appassionati di VR, artisti, designer, educatori, produttori, bambini.

VR multipiattaforma

Crea applicazioni VR per Vive, Rift, Daydream, GearVR e Cardboard con supporto per tutti i rispettivi controller. Non hai un auricolare o controller? Nessun problema! A-Frame funziona ancora su desktop e smartphone standard.

Architettura di entità-componente

A-Frame è un potente framework three.js che fornisce una struttura dichiarativa, componibile e riutilizzabile structure.js. HTML è solo la punta dell'iceberg; gli sviluppatori hanno accesso illimitato a JavaScript, API DOM, three.js, WebVR e WebGL.

Prestazione

A-Frame è ottimizzato da zero per WebVR. Mentre A-Frame usa il DOM, i suoi elementi non toccano il motore di layout del browser. Gli aggiornamenti degli oggetti 3D sono tutti fatti in memoria con un piccolo sovraccarico in una singola richiesta di chiamata AimationFrame. Per riferimento, vedi A-Painter, un clone di Tilt Brush incorporato in A-Frame che funziona come nativo (90+ FPS).

Agnostico dello strumento

Poiché il Web è stato costruito sulla nozione di HTML, A-Frame è compatibile con la maggior parte delle librerie, framework e strumenti, inclusi React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.

Visual Inspector

A-Frame fornisce un pratico ispettore 3D visivo integrato. Apri qualsiasi scena A-Frame, premi Ctrl + Alt + I e vola in giro per sbirciare dietro al cofano!

Registro

Assumi potenti componenti che gli sviluppatori hanno pubblicato e collegali direttamente dall'HTML. Simile a Unity Asset Store, il registro A-Frame raccoglie e cura questi componenti per una facile individuazione.

componenti

Supera il terreno con i componenti principali di A-Frame come geometrie, materiali, luci, animazioni, modelli, raycast, ombre, audio posizionale, testo e controlli Vive / Touch / Daydream / GearVR / Cardboard. Andare ancora oltre con componenti della comunità come sistemi di particelle, fisica, multiutente, oceani, montagne, riconoscimento vocale, acquisizione del movimento, teletrasporto, super mani e realtà aumentata.

Iniziare per AR

Per creare applicazioni AR sul Web, è necessario aggiungere una nuova libreria denominata AR.js. Prima si carica A-frame seguito da AR.js.

Newt devi impostare la tua scena usando la A-frames a-scene -tag con l' artoolkit artoolkit aggiunto. Il sourceType deve essere la tua webcam. Anche la fotocamera font del tuo smartphone è supportata da questo.

il a-marker-camera contrassegna un'immagine all'interno dello schermo registrato che rappresenta un'immagine. In questo caso è marker.png . Quando la fotocamera rileva questo marker, la casella verrà visualizzata sul marker.

Qui sotto puoi trovare il codice di esempio:

<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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

aframe Tutorial
Iniziare da capo

Ricerca…