aframe Samouczek
Rozpoczęcie pracy z ramką
Szukaj…
Uwagi
W tej sekcji omówiono, co to jest ramka i dlaczego deweloper może chcieć z niej skorzystać.
Powinien również wymieniać wszelkie duże tematy w ramce i zawierać linki do powiązanych tematów. Ponieważ Dokumentacja dla ramki jest nowa, konieczne może być utworzenie początkowych wersji tych pokrewnych tematów.
Wersje
Rama A 0.x
| Wersja | Data wydania |
|---|---|
| 0,6 | 2017-05-25 |
| 0,5 | 10.02.2017 |
| 0,4 | 17.12.2016 |
| 0,3 | 18.08.2016 |
Starsze wersje
| Wersja | Data wydania |
|---|---|
| 0.2 | 26.03.2016 |
| 0,1 | 17.12.2015 |
Pierwsze kroki
A-Frame można opracować z prostego pliku HTML bez konieczności instalowania czegokolwiek! Świetny sposób na wypróbowanie A-Frame do remiksowania przykładu startowego w Glitch, internetowym edytorze kodów, który natychmiast hostuje i wdraża za darmo. Lub utwórz plik .html i .html ramkę A do 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>
Dołącz kompilację JS
Aby dołączyć ramkę A do pliku HTML, upuszczamy znacznik script wskazujący na kompilację CDN:
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
Zainstaluj z npm
Możemy również zainstalować A-Frame przez npm:
$ npm install aframe
Następnie możemy dołączyć A-Frame do naszej aplikacji. Na przykład za pomocą Browserify lub Webpack:
require('aframe');
Jeśli używasz npm, możesz użyć kąt, interfejs wiersza poleceń dla ramki A. Kąt może zainicjować szablon sceny za pomocą jednego polecenia:
npm install -g angle && angle initscene
cechy
VR Made Simple
Wystarczy dodać znacznik script i a-scene . A-Frame obsłuży trójwymiarowy szablon, ustawienia VR i domyślne elementy sterujące. Nic do zainstalowania, żadnych kroków kompilacji.
Deklaratywny HTML
HTML jest łatwy do odczytania, zrozumienia i kopiowania i wklejania. Opierając się na HTML, A-Frame jest dostępny dla wszystkich: twórców stron internetowych, entuzjastów VR, artystów, projektantów, nauczycieli, twórców, dzieci.
Wieloplatformowa VR
Twórz aplikacje VR dla Vive, Rift, Daydream, GearVR i Cardboard ze wsparciem dla wszystkich odpowiednich kontrolerów. Nie masz zestawu słuchawkowego lub kontrolerów? Nie ma problemu! A-Frame nadal działa na standardowych komputerach stacjonarnych i smartfonach.
Architektura encji-komponentów
A-Frame jest potężnym frameworkiem Three.js, który zapewnia deklaratywną, składalną strukturę wielokrotnego użytku, będącą komponentem.js. HTML to tylko wierzchołek góry lodowej; programiści mają nieograniczony dostęp do JavaScript, API DOM, three.js, WebVR i WebGL.
Występ
Rama A jest zoptymalizowana od podstaw dla WebVR. Podczas gdy A-Frame korzysta z DOM, jego elementy nie dotykają silnika układu przeglądarki. Aktualizacje obiektów 3D są wykonywane w pamięci z niewielkim narzutem w ramach pojedynczego wywołania requestAnimationFrame. Dla odniesienia zobacz A-Painter, klon Tilt Brush zbudowany w ramce A, który działa jak natywny (90+ FPS).
Narzędzie agnostyczne
Ponieważ Internet został zbudowany w oparciu o HTML, A-Frame jest kompatybilny z większością bibliotek, frameworków i narzędzi, w tym React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.
Inspektor wizualny
A-Frame zapewnia poręczny, wbudowany wizualny inspektor 3D. Otwórz dowolną scenę A-Frame, naciśnij ctrl + alt + i , i lataj, aby zajrzeć za maskę!
Rejestr
Weź potężne komponenty, które opublikowali programiści i podłącz je bezpośrednio z HTML. Podobnie jak w Unity Asset Store, A-Frame Registry zbiera i selekcjonuje te komponenty w celu łatwego odnalezienia.
składniki
Uderz w ziemię z podstawowymi komponentami A-Frame, takimi jak geometria, materiały, światła, animacje, modele, raycastery, cienie, dźwięk pozycyjny, tekst oraz elementy sterujące Vive / Touch / Daydream / GearVR / Cardboard. Zyskaj jeszcze więcej dzięki komponentom społeczności, takim jak układy cząstek, fizyka, wiele użytkowników, oceany, góry, rozpoznawanie mowy, przechwytywanie ruchu, teleportacja, super ręce i rzeczywistość rozszerzona.
Pierwsze kroki dla AR
Aby tworzyć aplikacje AR w Internecie, musisz dodać nową bibliotekę o nazwie AR.js. Najpierw załadujesz ramkę A, a następnie AR.js.
Traszka musisz skonfigurować scenę za pomocą znacznika A-frame -tag a-scene z artoolkit atrybutem artoolkit. sourceType musi być twoją kamerą internetową. Obsługiwana jest również kamera czcionek w smartfonie.
a-marker-camera oznacza obraz wewnątrz zarejestrowanego ekranu, który reprezentuje obraz. W tym przypadku jest to marker.png . Gdy kamera wykryje ten znacznik, pole zostanie wyświetlone na znaczniku.
Poniżej znajduje się przykładowy kod:
<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>