React 360 でバーチャルリアリティ (VR) 体験を作成する

React 360 でバーチャルリアリティ (VR) 体験を作成する

[[404840]]

React でバーチャルリアリティ (VR) を体験してみませんか?

これは本当に可能なのでしょうか?はい。 React 360 の導入により、JavaScript を使用して仮想現実体験を作成できるようになりました。

今日のデバイスにおけるVRの活用方法

React 360 とは何かを説明する前に、今日のデバイスで VR がどのように使用されているかを簡単に確認しておきましょう。仮想現実は現在注目の話題であり、ほとんどのゲームやエンターテインメントは優れたユーザーエクスペリエンスを提供するために仮想現実に重点を置いています。

React 360 の導入により、将来のユーザー インターフェイスが広く採用され、文字通り最新の Web アプリケーションで 3D および VR エクスペリエンスが実現されるという期待が生まれます。

さっそく始めましょう。

React 360 とは何ですか?

React 360 は、Web ブラウザで実行されるインタラクティブな 360 度エクスペリエンスを作成するためのフレームワークです。出典: NPM.js

これは NPM パッケージであり、次のようにインストールできます。

  1. npm と react-360
  2.  
  3. // コマンドラインツール
  4.  
  5. npm インストール -g react-360-cli

React や React Native と非常によく似ていますが、VR エクスペリエンスの構築に役立ついくつかの違いがあります。

three.js を使用して、ブラウザー上で VR エクスペリエンスを作成するための低レベルの WebVR (VR デバイスへのアクセス用) および WebGL (3D グラフィックスのレンダリング用) API を容易にします。

React および React Native の経験があれば、React 360 の使用はより簡単になります。また、React 360 で新しいプロジェクトを作成すると、プロジェクト内に 3 つの重要なファイルが作成されます。

  • index.js – アプリケーションのメイン コード。アプリケーションの外観と操作性を決定するコード/ファイルのインポートが含まれます。
  • client.js – このファイルは、ブラウザを React アプリケーションに接続するランタイムです。このファイル内のコードは、新しい React 360 インスタンスを作成し、React コードを読み込み、それを DOM 内の特定の場所に追加します。
  • index.html – 読み込む Web ページ。これは、アプリケーションをロードする JavaScript コードを指します。

さらに、static_assets フォルダーは、Web エクスペリエンスを強化するために使用される画像、パノラマ、オーディオ ファイル、その他の外部コンテンツなどのアセットを保存するために使用されます。

ランタイムは、React コンポーネントを画面上の 3D 要素に変換する役割を担います。

React 360 を実際に使用する

React 360 を正常にインストールしたら、次のコマンドを使用して新しいプロジェクトを初期化できます。

  1. react-360 初期化新しい react-360 アプリ

これにより、new-react-360-app という新しいプロジェクト ディレクトリが作成され、必要な依存関係がすべてインストールされます。

プロジェクト構造は以下の通りです。

npm start コマンドを使用してプロジェクトを開始し、ブラウザの http://localhost:8081/index.html で出力にアクセスできます。

[[404841]]

マウス ポインターを使用して、このフレーム内を 360 度移動できます。

React 360 フレームワークの優れた機能の 1 つは、再利用可能な組み込み UI コンポーネントを提供していることです。例えば、以下のようなものがあります。

  • ビュー
  • 画像
  • 実在物
  • Vrボタン

React 360 アプリケーションを開発するときに使用できます。

先ほど述べた 3 つの重要なファイルのうち、index.js と index.html は非常にシンプルです。

client.js ファイルを見て、その内容をよりよく理解してみましょう。

ここでは、r360.createRoot を使用して、ルート ディレクトリが index.js の hello_vr React コンポーネントに設定されています。

React 360の機能

React 360 には多くの便利な機能があります。いくつか見てみましょう。

  • クロスプラットフォーム開発 - React 360 を使用すると、1 人の React 開発者が、さまざまな言語やテクノロジーで大量のコードを記述することなく、デスクトップ、モバイル、Web で実行する VR アプリケーションを作成できるため、開発コストと労力を節約できます。
  • ピクセルの操作 - React 360 を使用すると、開発者は 3D 空間に埋め込まれた 2D インターフェースを作成できます。 React 360 の Surfaces ライブラリを使用すると、UI パネルをアプリケーションに統合できます。サーフェスを使用すると、開発者は他の測定単位ではなくピクセル単位で環境を開発し、通常のツールを使用して作成された仕様を実装できます。
  • 3D メディア サポート - React 360 には、没入型メディアをより適切に処理するための環境機能があります。これにより、開発者はアプリケーションの外観と操作性を正確に制御できます。
  • 強化されたパフォーマンス - ランタイム アーキテクチャは、フレーム レートを向上させ、ガベージ コレクションを削減することで、アプリケーション全体のパフォーマンスを最適化するように設計されています。

サポートされているデバイス

  • デスクトップ Web ブラウザ (Chrome、Firefox など)
  • モバイルウェブブラウザ
  • VRデバイス

要約する

React 360 は、ユーザーに VR 体験を提供する 3D Web アプリケーションを作成する興味深い方法です。これはオープンソース フレームワークであるため、VR アプリケーションの構築にコスト効率が高くなります。

React の使用経験がある開発者であれば、このフレームワークを簡単に習得し、すぐに VR アプリケーションの構築を開始できます。 React VR アプリは、iOS や Android を含む幅広いデバイスとプラットフォームをサポートしています。

読んでくれてありがとう!

元記事: https://blog.bitsrc.io/creating-virtual-reality-experiences-with-react-360-9f354623731e

ヴィドゥニ・ウィクラマラッチ著

この記事はWeChat公開アカウント「Front-end Full-stack Developer」から転載したものです。以下のQRコードからフォローできます。この記事を転載する場合は、フロントエンドフルスタック開発者アカウントにお問い合わせください。

<<:  OpenInfra Foundation: オープン インフラストラクチャ テクノロジーの次の 10 年の構築

>>:  2021 年の優れたオープンソース Kubernetes ツール 11 選

推薦する

ウェブサイトのユーザーエクスペリエンスを向上させ、より多くのユーザーにウェブサイトを気に入ってもらいましょう

現代社会では、どんな業種であっても「サービス」が大切です。良い商品だけでなく、良いサービスがあってこ...

アマゾン ウェブ サービスが北京で無料枠を開始

本日 2022 年 8 月 25 日、Amazon Web Services は Sinnet との...

ブランドマーケティングには広告だけが含まれますか?

ブランドを宣伝する際、マーケティング手法として広告にお金をかけるだけではいけません。消費者に製品の背...

モバイルインターネットで正確なトラフィックを取得する方法!

この事件の発端は秦剛の日記にある一文である。 PC 時代のウェブサイトは Baidu 向けに書かれて...

2018 年のクラウド コンピューティング開発動向の予測

今年も年末がやってきました。つまり、テクノロジーの世界では予測の季節がやってきたということです。業界...

アンテナビデオ著作権侵害事件の判決:罰金200万、会長に有罪判決

北京ニュース(陳波記者)昨日、朝陽法院は第一審判決を言い渡し、北京賽金メディアテクノロジー株式会社の...

百度の新しいアルゴリズムフォグ:不正サイトを特定するための心理戦

ネットワーク セキュリティの分野では、技術面だけでなく、反ソーシャル エンジニアリング攻撃能力につい...

予算は限られていますか?チャネルプロモーションのためのチャネルの選択と最適化に関する6つの経験

APP プロモーションの核心は、入出力比率を計算することです。限られた予算の中で、勘定科目を把握し、...

コンテンツマーケティングの実践的な方法 - 実践を導くために使用できる方法

コンテンツマーケティングは最近注目のコンセプトです。コンテンツマーケティングの重要性は、次の2つの点...

Linodeについてはどうですか? [年] Linode カナダ データセンター クラウド サーバー レビュー

Linodeはどうですか? Linode Canada クラウド サーバーはいかがでしょうか?カナダ...

パン分析がSEOに及ぼす悪影響の例

>数日前、ウェブマスターツールでウェブサイトをチェックしたところ、同じ IP にバインドされた...

Hawkhost - 全品 60% オフ/本日限定/Web ホスティング/リセラー/VPS/サーバー

Hawkhost のウェブサイトがリニューアルされました。以前の古いスタイルよりもずっと良くなったと...

避けるべきクラウド コンピューティングの 7 つの致命的な間違い

[[338192]] 【51CTO.com クイック翻訳】ビジネスオペレーションの多くがクラウドで行...

エッジコンピューティングとクラウドコンピューティングの関係は何ですか?

IT の観点から見ると、パンデミックの期間中、リモートワーク、仮想コラボレーション、オンライン会議、...

SEO における 5 つの最大の罪を暴露

ウェブサイトのプロモーションやオンライン マーケティングに携わっている人は、現在ウェブサイトをプロモ...