ThreeJSでホーチミンのオフィスをバーチャル空間上に再現
ThreeJSを使って、弊社のホーチミンにあるオフィスをバーチャル空間上に再現してみました。
マウスをスクロールしたり、ナビゲーションボタンをクリックすると実績や会社紹介が表示されます。
デモは下記からご覧いただけます。
https://udl-3d-landing-page.vercel.app/
使用した技術
R3F
このデモのフロントエンドには、ReactJSを採用しました。また、ReactとThreeJSをシームレスに統合するため、react-three-fiber (R3F)を利用しました。ReactJSはユーザーインターフェイスの構築を担い、ThreeJSは3Dグラフィックスの実現を担います。
react-three-fiberはこれら二つのライブラリを橋渡しし、ReactJSでの3Dグラフィックスの統合を容易にします。
pmndrs
Drei
React Three Fiberは、ブラウザでの3D体験を構築するための神ライブラリです。しかし、ときどき繰り返しのタスクやボイラープレートコードに行き詰まることがあります。そのためDreiというライブラリを導入しました。
pmndrs
Dreiは、React Three Fiberの開発を簡素化し加速するために設計された、事前に構築されたコンポーネントと関数のコレクションです。3Dプロジェクトのクリエイティブな側面に集中させるための便利なヘルパーがいっぱいのツールボックスと考えてください。
事前に構築されたコンポーネントには、カメラコントロール、照明、アニメーションなど、必要なものがすべて準備されています。
Blender
ThreeJSはシーン照明のためのさまざまなリアルタイムのライティング機能を提供していますが、このデモでは、照明をすべて事前にテクスチャに焼き付けることにしました。
この作業にはBlenderを使用し、すべての照明を4Kテクスチャに焼き付けた上で圧縮しました。これにより、ウェブサイトで使用するすべての3Dモデルやテクスチャがわずか12.3MBに収まりました。
このデモで達成したこと
上述の通り、全コンテンツを12.3MBに圧縮したことで、わずか2秒でバーチャルオフィスがブラウザにロードされるようになりました。また、RAMの使用が50MBに収まるようパフォーマンスが最適化されています。
フレームレートも一般的なPCのブラウザで60FPSを達成しています。
関連記事
【2026年最新版】デジタルツインとは？仕組み・歴史・活用事例・メタバースやシミュレーションとの違いを徹底解説
デジタルツインとは、現実の対象やプロセスをデジタル空間に表現し、データを連携して監視・分析・予測・最適化に活用する仕組みです。本記事では、アポロ計画から現在までの歴史、IoT・AIを用いた構成、製造・都市・建設・医療・航空分野の事例、シミュレーション・メタバース・CPSとの違い、3Dを使わない実装や2D図面から始める方法を解説します。
3D Tilesとは何か？基本概念から最新トレンド、活用事例まで徹底解説
3D Tilesは、大規模な3D地理空間データをWebやモバイルへ効率的に配信するためのオープン規格です。HLOD、Bounding Volume、tileset.json、3D Tiles 1.0と1.1の違いを整理し、Project PLATEAU、Google Photorealistic 3D Tiles、BIM・点群での活用、CesiumJSによる複数タイルセットの重ね合わせとLOD制御まで解説します。
GLB Texture Editor：ブラウザ上で3Dモデルのテクスチャとマテリアルをリアルタイム編集
GLB Texture Editorは、GLB形式の3Dモデルをブラウザ上で編集できるWebツールです。テクスチャの差し替え、色や粗さ、金属感、透明度の変更、UV・Projection Mappingの調整をリアルタイムで確認できます。3D EC、建築、デジタルツイン、ゲーム・XR開発における確認・修正作業を効率化します。
