プロジェクト概要
「Regalia Motors（レガリア・モーターズ）」は、英国の伝統的な美学と先進エンジニアリングの融合をコンセプトとした架空の高級スポーツカーブランドです。
本プロジェクトでは、Experience Cloudのフロントエンドにおける描画性能の限界と、プラットフォームの拡張性を実証するため、WebGLを用いたインタラクティブな3Dカーコンフィギュレーターを実装しました。ゲストユーザーがアクセスする公開サイトにおいて、「Salesforceで構築されたとはわからないレベル」の没入感とパフォーマンスを実現するためのアーキテクチャと実装ノウハウを体系化しています。
完成イメージ
トップ画面
トップ画面は開発を一切せず、標準コンポーネントとSalesforce Labs謹製のAppExchangeを使用して構築しています。
カーコンフィギュレーター画面
LWC上でThree.jsによってモデルデータを描画するコンフィギュレーターを搭載した画面です。
- ダークモード（ディープチャコール）を基調とし、ブリティッシュ・レーシング・グリーンをアクセントとしたブランドデザイン。
- Three.jsの
RoomEnvironmentとカスタムライティングによる、PBRマテリアル（クリアコートや金属）のリアルな質感表現。 - グラスモーフィズム（すりガラス効果）を用いた設定パネルのオーバーレイ配置。
動画ギャラリー
サイト全体像
読み込みモーション（ステンシル）紹介
技術スタックとアーキテクチャ
本プロジェクトにおける、プラットフォームの制約とそれを解決する実装アプローチの全体像です。
- フロントエンドフレームワーク: Lightning Web Components (API Version 66.0)
- 3D描画エンジン: Three.js (Rollupによる独自ビルド)
- アセットホスティング: 外部サーバー（Xserver）による .glb モデルの配信とCORS連携
- レイアウト設計: コンポーネント間通信を排除した、単一LWCとCSS絶対配置（
position: absolute）によるシームレスUI - セキュリティ対策: LWS（Lightning Web Security）環境下の
ImageBitmap生成エラーを回避するフォールバック処理
連載記事一覧
プロジェクトの実装手順は、以下の全3回に分けて解説しています。
[第1回] LWC単一コンポーネントで作る3DコンフィギュレーターのシームレスUI実装
標準のカラムレイアウトに依存せず、画面全体を1つのLWCで構成するアーキテクチャを解説します。Three.jsの描画キャンバス上に設定パネルを絶対配置し、backdrop-filter によるグラスモーフィズムや、Stencilsを用いたロード状態の制御手法を実装します。
[第2回] Three.jsを独自ビルドし外部サーバーの3DモデルをLWCで読み込む
ES Modules非対応というLWCの仕様を Rollupによる統合ビルドで解決し、静的リソースの5MB制限を外部サーバー連携で突破するインフラ構築編です。LWS環境下で発生する致命的な blob: Worker 生成エラーの回避策など、Salesforce環境特有のノウハウを共有します。
[第3回] LWCで実現する3D空間のライティング設計と高度なマテリアル制御
右側パネルのUI配置を考慮したOrbitControlsのターゲット移動、物理的な床と壁を配置した仮想スタジオライティング、そしてPBRマテリアル（金属感や艶）の動的制御や発光（Emissive）表現など、実車さながらの美しさを生み出すWebGLの実装ロジックを解説します。
ソースコード (GitHub)
本プロジェクトで使用したLWCの完全なソースコード（HTML, CSS, JavaScript, メタデータ）およびThree.jsのビルド設定ファイルは、以下のGitHubリポジトリで公開しています。
※モデルファイル（.glb）等のアセット類はサイズ超過のためZIP化しています。実装検証を行う場合は、解凍してから任意のサーバー上に格納してLWCから読み込むようにしてください。