未分類

BHSOFTがThree.jsを利用して3Dバーチャルイベントブースを構築した方法

最近のコロナ感染のパンデミックにより、3Dバーチャルイベントブースの人気が高まりました。ビジネス会議、見本市、キャンパス入場ツアーなどの大規模なイベントから小規模なイベントまで、人々はすべて対面の会議を回避するためのソリューションを探しています。

3Dバーチャルイベントブースを構築することにより、ベンダーと訪問者は依然として効果的かつ効率的に相互作用することができます。

BHSoftには、Webベースの仮想見本市向けの独自のソリューションがあります。 私たちは、3Dモデリング、アニメーション、CMS、および3Dプロジェクトのデータ収集の経験が豊富です。 この記事では、Three.jsとWebGLを使用して、クライアントの3D仮想ブースを作成およびレンダリングする方法を説明します。

まず、Three.jsとWebGLが3D仮想ブースを構築するのに最適な組み合わせである理由について説明しましょう。

Three.jsとWebGLを使用して大量の視覚化をレンダリングする利点

Three.jsは、開発者が3Dコンピューターグラフィックスを作成および表示するのに役立つ、使いやすく軽量な3D JavaScriptライブラリです。レンダリングはライブラリの主要な仕事の1つであり、Three.jsは<canvas>を含む4つの主要なレンダラーを提供します。 <svg>、CSSD、WebGL。WebGLは、その多くの便利な機能と高性能のおかげで、群衆から際立っています。
 

WebGLは、単純なポリゴンのレンダリングに関して、CanvasおよびSVGよりも完全に優れています。 これは、非常に大規模なネットワーク視覚化の高レベルのビューをレンダリングするための最も完璧な手法です。 グラフィックカードに応じて、WebGLは、画面上に1万から10万の要素を、完璧なフレームレートで同時にレンダリングできます。

WebGLは、さまざまなブラウザー(Chrome、Firefox、Edge、Safari、および派生物)で適切に機能するだけでなく、組み込みのGPUのおかげで、モバイルデバイス上で膨大な数のアイテムをレンダリングすることもできます。

BHSoftがバーチャルイベントブースプロジェクトでThree.jsとWebGLをどのように利用しました

クライアントが望んでいたこと

クライアントは、ユーザーがイベント計画に適したベンダーを見つけて関与できる仮想イベントWebアプリケーションを構築する必要がありました。 ユーザーはベンダーを厳選し、特定のテーマでイベントサンプルを表示し、プラットフォーム上でお気に入りのベンダーを予約できます。 これにより、仮想プラットフォームで真のエクスペリエンスを顧客に提供しながら、すべてのプロセスを自動化することで、ベンダーとその顧客の両方の時間を節約できます。

どうやってやったのか?

3ds Maxを使用して、ブース、人員、床、家具などの3Dオブジェクトを作成、設計、および変更しました。

このプロジェクトの最大の要件は、仮想ブースをすべてのWebブラウザーで適切に機能させることでした。3Dプロジェクトの経験が少ないため、BHSoftチームは、最高のツールであるThree.jsを知っています。Three.jsで行ったこと :

  1. シーンを作成しました
  2. すべてのglTFモデルをロードします
  3. ライトを追加します
  4. カメラの位置と向きを宣言しま
  5. 最後に、ブースはインタラクティブである必要があるため、インタラクティブ性を追加します

3Dデザインソフトウェアとthree.jsエディターの助けを借りて、すべてのオブジェクトの属性を再構築して割り当てました。3Dモデルを簡単にインポートし、後でレンダリングするためにglTFファイルに変換することができました。

Three.jsは、属性を効果的に操作するのに役立ちました。 このライブラリを使用すると、開発者は特定のオブジェクトを使用して色や素材を簡単にマッピングできます。 チームは、家具やブースの色をすばやく変更し、ハイライトを選択したり、ホバーしたり、イベントを選択したりできます。

特定のオブジェクトがカメラとマウスの位置を結ぶ光線と交差する場合、アクションを追加しました。 たとえば、オブジェクトの外観や素材を変更したり、新しいタブでリンクを開いたりします。

Three.jsは、画面に非常に多くの要素を同時に表示する必要があったため、実際に非常に役立ちました。BHSoftチームは、この仮想イベントプロジェクトにThree.jsを特別に選択しました。理由は次のとおりです。

  • Three.jsは成熟した3Dレンダリングライブラリ
  • ライブラリはGLBファイルタイプとglTFファイルタイプ(現在はオープンスタンダード)をサポート
  • Three.jsは、3Dモデルのジオメトリ/オブジェクトの制御とアクセスが簡単
  • 3Dモデル素材のカスタマイズが簡単
  • 制御3Dモデルに十分な相互作用を提供
  • より良いモデル統合サポート

結論

私たちは徐々に接続された世界に住んでおり、仮想ニーズは間違いなく拡大し続けます。 BHSoftでは、3Dプロジェクトの設計と構築の完全なパッケージを提供しています。 既存のCADモデルから始めることも、ゼロから始めることもできます。 詳細については、お問い合わせフォームまたは hello @ bachasoftware.com までお問い合わせください。

Author

Nguyen Bao Ngoc