ホームページ > ウェブフロントエンド > jsチュートリアル > PrimroseとWebVRを使用してVRで仮想現実を構築します

PrimroseとWebVRを使用してVRで仮想現実を構築します

Jennifer Aniston
リリース: 2025-02-18 09:13:11
オリジナル
845 人が閲覧しました

今年、Virtual Reality(VR)は人気の急増を経験しており、VRヘッドセットが棚から飛び出しています。 開発プラットフォームは、熱狂的な開発者からの需要の高まりを満たすために、VR開発にますます注力しています。 UnityとUnrealエンジンの特にエキサイティングな開発は、VR環境自体内でVRシーンを編集する機能です。 WebVRおよびJavaScript開発者の場合、プロトタイプと実験に同様の機能を提供する新しいフレームワークが出現しています:Primrose。

プリムローズの重要な機能:

    Primroseは、VRシーンのVR編集を可能にするフレームワークであり、VR開発への関心の高まりに直接対処します。 VRコンテキスト内での迅速なプロトタイピングと視覚的反復を促進します。
  • Primroseを使用するには、開発者はWebVRサポートを備えたWebGL対応ブラウザー(最近のChromium WebVRビルドやFirefoxの夜間など)、Oculus Rift、またはGoogle Cardboardヘッドセット(ヘッドセットなしではブラウザベースの実験が可能です)が必要です。 Webサーバー(WAMP/MAMP/NODE/Python Suppiess Suppies)、およびタッチタイピングスキルなど。
  • Primroseはライブコーディングを特徴としており、VR環境内で、またはヘッドセットなしでブラウザ内で直接リアルタイムコード編集を可能にします。
  • 開発者は、軸、ポイントクラウド、ハブ、ライト、ボックス、シリンダーなど、プリムローズにさまざまなシーン要素を追加できます。これらは、ファイルを介して、またはVRエディター内に直接追加できます。
  • まだ初期段階にある間、Primroseは将来のVRアプリケーションの大きな可能性を示しています。 コミュニティの貢献は、その成長を加速することをお勧めします
  • プリムローズとは?app.js
  • 公式ウェブサイトで述べたように、Primroseは、WebVRアプリケーション内の生産性ツールを構築するためのクロスブラウザーのマルチデバイスフレームワークです。開発者がVRの概念を実験し視覚化するためのブラウザベースの環境を提供します。 それはオープンソースであり、積極的に開発中です。

システム要件:

プリムローズでWebVRの旅を始めるには、必要です:

WebVRサポートを備えたWebGL対応ブラウザ(たとえば、最近のChromium WebVRビルドまたはFirefoxの毎晩)。 Oculus Rift、HTC Vive、またはGoogle Cardboard Headset(ブラウザーベースの作業ではオプション)。 Webサーバー(Wamp、Mamp、Node.js、Pythonなどのローカルサーバー)。

タッチタイピングの習熟度。

  • 始めましょう:
  • 完全に機能するライブコーディングデモは、PrimroseのWebサイトで入手できます(WebGL対応ブラウザーを使用してください)。 ローカルのコピーについては、Primrose Githubリポジトリから最新バージョンと例をダウンロードまたはクローンしてください。
  • 簡略化されたバージョン:
  • プリムローズデモに基づいたが、説明のための機能が低下しているため、単純化されたライブコーディングデモは、別のGitHubリポジトリで利用できます[GitHub Repoへのリンクはこちらに行きます]。
>

単純化されたバージョンを実行してください:

Webサーバーに簡略化されたデモを配置し、WebGL対応ブラウザー(例:http://localhost/primrose)に開きます。 リソースへのアクセスに関するブラウザのセキュリティ制限のため、ファイルシステムから直接実行されないことを忘れないでください。

例スクリーンショットの例(実際の画像に置き換え):

Build Virtual Reality in VR with Primrose and WebVR

プリムローズの仕組み:

Primroseアプリケーションのコアには、テクスチャの定義とPrimroseアプリの初期化が含まれます。

エディター領域は、
var BRICK = "images/brick.png",
    GROUND = "images/deck.png",
    SKY = "images/bg2.jpg",
    app = new Primrose.BrowserEnvironment("Our Simplified 3D Editor", {
      skyTexture: SKY,
      groundTexture: GROUND
    });
ログイン後にコピー

を使用して定義されています Primrose.Surface

イベントリスナー内に要素が追加されています:
editorFrame = new Primrose.Surface({
  bounds: new Primrose.Text.Rectangle(0, 0, 2048, 2048)
});
ログイン後にコピー

"ready"Primroseは、テキスト編集機能に

のオブジェクトを使用します。
app.addEventListener("ready", function() {
  // ... (add subScene, editor, initial code) ...
});
ログイン後にコピー
イベントは、シーンの更新とアニメーションを処理します。

Primrose.Textなどのその他のイベントは、ユーザーインタラクションを管理します ^関数は、同じ構造を維持し、元のテキストを言い換えると、ここに含まれます。 updatekeydown(「結論」、「よくある質問」、そしてそれぞれの回答もここに含まれ、同じ構造を維持し、元のテキストを言い換えます。)mousedownプレースホルダー画像リンクを置き換えることを忘れない実際の画像urls。

以上がPrimroseとWebVRを使用してVRで仮想現実を構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート