Začínáme s webvrem

Sep 13, 2025
jak
SKOČIT DO:

WebVR je API JavaScript pro vytváření zážitků 3D virtuální reality v prohlížeči. To vyžaduje nízkou latenci, vysokou hodnotu rámce a vynikající výkon. Jeho cílem je usnadnit komukoli dostat se do zážitků VR snížením překážek vstupu.

WebGL umožňuje vývojářům vytvořit bohaté, konzolové zkušenosti, které vykreslují v reálném čase na mobilních zařízeních a desktopových prohlížečích (jen se ujistěte, že dostanete web hosting Právo pro optimální schopnost). Téměř univerzální prohlížeč a podpora zařízení je ideálním přístupem pro webové vývojáře, které chtějí vytvářet neuvěřitelné zkušenosti VR. Zde ukážeme, jak začít s webvrem. V dolní části tohoto článku najdete nějaké užitečné zdroje k dalšímu znalosti.

V naší tutoriálu budeme používat webvr v kombinaci s Three.js. - Jdi na možnost mnoha Web Design Tools. K dispozici pro 3D a VR na webu. Je to volný a otevřený zdroj, lehké a nesčetné oceněné webové stránky používat. Jiné než mít pozadí JavaScriptu, můžete se ponořit do tohoto tutoriálu bez předchozího vědomí a vytvořit svůj první zážitek z webvr. Cílem tohoto návodu je, aby vás začal a inspirovat vás pokračovat v prozkoumání této velmi vzrušující technologie. Chcete něco jednoduššího? Vyzkoušejte A. Webové stránky Builder. .

01. Povolit WebVR vlajku v Chrome

WebVR je stále experimentální technologie a vyžaduje, aby HTTPS spustil na vašem serveru. Nebude spustit na mobilních zařízeních bez Polyfill.github.com/imersive-web/webvr-polyfill. . Můžete však spustit obsah lokálně v Chrome pro testování a budování. Ujistěte se, že povolíte příznak Chrome Webvrr. Typ Chrome: // vlajky / enable-webvr Do prohlížeče URL a potom klepněte na tlačítko Povolit aktivovat jej. Možná budete muset restartovat také chrom.

02. Nainstalujte Plugin Emulation Emulation WebVR API

Pro testování lokálně na ploše a vyhnout se potřebě zařízení, je zde velký plugin, který můžete použít na Chrome ClickTorelease. Plugin bude napodobit a Headsetie VR. Pro vás a dovolte se pohybovat a otočit headset prakticky ( dostat to sem. ).

03. Otevřete panel nástrojů zařízení v nástroji pro vývojáře

Device toolbar within dev tools

Tato napodobuje mobilní zařízení nebo sluchátka

Emulovat mobilní zařízení nebo headsetu funguje nejlépe použít emulaci zařízení v Chrome Tools. Otevřete nástroje pro vývojáře v Chrome a přepněte na panelu nástrojů zařízení, abyste viděli zobrazení mobilního telefonu, otočte se do krajiny a vyberte položku Oblíbený telefonní emulace.

04. Vytvořte základní soubor HTML

Dále musíte nastavit základní soubor HTML. Můžete nastavit externí soubory CSS a JavaScript nebo zahrnout inline pro jednoduchost. Třída three.js 'renderer třída vytvoří & lt; canvas & gt; prvek pro vás. Přidejte následující kód do svého index.html. soubor: 

 & lt; html lang = "en" & gt;
& lt; hlava & gt;
& lt, titul & gt; webvr demo & lt; / titul & gt;
& lt; meta charset = "UTF-8" & gt;
& lt, meta název = "wortport" obsah =
"šířka = šířka zařízení, počáteční měřítko =
1.0, uživatel-škálovatelná = ne "& gt;
& lt; styl & gt;
html, tělo {marže: 0; Polstrování: 0;
Přetečení: skryté; }
& lt; / styl & gt;
& lt; / hlava & gt;
& lt; tělo & gt;
& lt; scénář a gt;
// kód půjde sem
& lt; / script & gt;
& lt; / tělo a gt;

05. Zahrňte tří.js třídy

Zahrnout odkaz na knihovnu tří.js v hlavě svého souboru - buď hostovaní externě, nebo ji stáhnout ze tří.js repozitáře. Budete také potřebovat novou třídu WebVR a třídu BoxlineGeometrie pro tento tutoriál. Knihovna a podpůrné třídy najdete tady . Poznámka: Kód v tomto tutoriálu byl testován na nejnovějším vydání tří.js V99.

jak - Nejoblíbenější články

Jak vytvořit komiksovou stránku

jak Sep 13, 2025

Tento tutoriál vám ukáže, jak vytvořit komickou stránku. I když používáme Clip Studio Paint. Zde je spou..

Vytvořit webggl 3D přistávací stránka

jak Sep 13, 2025

(Image Credit: budoucnost) Vytvoření stránky přistání WebGL 3D je jeden způsob, jak udělat velký první doje..

Jump Start reaguje nativní s expo

jak Sep 13, 2025

Reagovat rodák je platforma, která vám umožní vybudovat nativní mobilní aplikace pomocí JavaScriptu. Jak náz..

Stáhnout soubory pro 3D Svět 232

jak Sep 13, 2025

Chcete-li stáhnout doprovodné soubory pro 3D World Problém 232, jednoduše klikněte na odkaz pod každým článkem a soubor ..

Simulovat transformaci Ghost Rider

jak Sep 13, 2025

Strana 1 z 2: Strana 1 Strana 1 Stránka..

7 Zahradní způsoby, jak ovlivnit chování uživatele

jak Sep 13, 2025

Webové stránky používají psychologické techniky, které ovlivňují chování svých uživatelů. Kreslení na desetiletí akademického výzkumu, který vysvětluje, jak naše mysl fun..

11 Tipy pro vytvoření vodnaté krajiny ve 3D

jak Sep 13, 2025

Clarisse. Je relativně nová aplikace a je to více než jen vykreslení motoru, rozvržení nebo vývoje vývoje. Clarisse osvobozuje umělce z omezení výpočetní síla zach�..

Jak vytvořit 3D vlasy a srst

jak Sep 13, 2025

Můžete snadno dostat ohromeni poprvé, co pracujete s kožešinou v každém 3D umění software. V tomto tutori..

Kategorie