Za pět let, co jsem v Mozille, jsem viděl několik úžasných projektů. Některé z nich jsou velmi oblíbené, některé velmi úzce zaměřené, ale žádný z nich mě neinspiroval tak, jako práce týmu MozVR s WebVR a projektem A-Frame.
A-Frame je komunitní projekt, jehož cílem je být „stavebními kameny pro web virtuální reality“, knihovnou pro vytváření prostředí VR v prohlížeči pomocí značek nebo JavaScriptu. Skočit do používání takového projektu může být zdrcující, takže začněme jednoduše: vytvoření interaktivního ukázky panoramatického snímku, jako je tato!
Zobrazit ukázkuPořízení 3D obrázku
Nejjednodušší způsob, jak pořídit snímek, který splňuje požadavek na panoramatický efekt (známý jako ekviditní formát), je pomocí telefonu. Guri VR:Virtual Reality for the Rest of Us od Dana Zajdbanda identifikuje aplikace pro iOS (Google Street View) a Android (Photo Sphere nebo Cardboard Camera). Danův úžasný článek také poukazuje na skupinu Equirectangular na Flickru, pokud byste pro své experimentování raději vzali existující obrázek.
Pořízení kvalitního obrázku na vašem telefonu může být trochu problém – budete potřebovat pevnou ruku, abyste se vyhnuli zubatým okrajům, když telefon otáčíte a pořizujete snímky v každé poloze.
Rychlá poznámka:pro ukázku používám ukázkový obrázek poskytnutý A-Frame, protože obrázek Google Street View vygeneroval obrázek o velikosti 10 MB a naservírovat vám ho by byla bestie. Pokud byste chtěli vidět, co jsem vytvořil pomocí aplikace GSV, obrázek najdete zde. Obrázek je pořízen z pohledu, kdy stojím uprostřed slepé uličky, ve které žiji.
Vytvoření panoramatického efektu pomocí A-Frame
Věřte nebo ne, pořídit dobrý obrázek je ta nejtěžší část, protože A-Frame neuvěřitelně snadno převede obrázek na 3D vizualizaci. <a-sky> prvek v rámci A-Frame bude použit k vytvoření panoramatického efektu:
<a-scene> <a-sky src="https://davidwalsh.name/demo/3d-image.jpg" rotation="0 -130 0"></a-sky> </a-scene>
Výše uvedený kód je deklarativní použití (napsané v HTML) A-Frame; místo toho můžete k vytvoření prvku použít programový JavaScript:
// Create the scene
var scene = document.createElement('a-scene');
// Create the sky
var sky = document.createElement('a-sky');
sky.src = '3d-image.jpg';
sky.setAttribute('rotation', { x: 0, y: -130, y: 0 });
// Inject into page
scene.appendChild(sky);
document.body.appendChild(scene);
rotation atribut přijímá x oddělené mezerami , y a z hodnoty rotace os; můžete si s nimi pohrát a upravit umístění pohledu.
A-Frame umožňuje kliknout, podržet a přetáhnout komponentu a otočit ji kolem obrázku. Můžete také kliknout na obrázek VR brýlí a zobrazit obrázek ve 3D na svém telefonu (karton je pěkný doplněk!) nebo prohlížeči s podporou WebVR.
Zobrazit ukázkuA-Frame usnadňuje 3D!
Nepřeháněl jsem, když jsem řekl, že pořízení fotografie bylo nejtěžší; množství značek potřebné k vytvoření 3D panoramatického efektu je minimální, když využijete sílu A-Frame. I když je vytváření panoramatických snímků oblíbeným případem použití, výsledkem je pouze jednoduché použití A-Frame. Chcete vidět, co dalšího A-Frame umí? Podívejte se na ukázky na webu A-Frame a těšte se, až uvidíte více o WebVR na celém webu – je to další velká věc!