【カーコンフィギュレーションサイト 制作日誌 Vol.1】LWC単一コンポーネントで作る3DコンフィギュレーターのシームレスUI実装

高品質なデジタル体験が求められる現代において、Webブラウザ上で動作する3Dカーコンフィギュレーターは、ブランドの世界観と製品の魅力を直感的に伝える強力な手段です。本連載では、架空の英国高級スポーツカーブランド「Regalia Motors」のコンフィギュレーター画面を題材に、LWRサイト上でThree.jsを最適に動作させるための実装ノウハウを全3回にわたって解説します。

第1回となる本記事では、3D空間とUIをシームレスに統合するための「フロントエンドのアーキテクチャ設計」に焦点を当てます。

LWCにおけるレイアウト制約とCSS仕様

Experience Cloudで独自のUIを構築する際、プラットフォームの仕様として以下の制約と特性を考慮する必要があります。

• 標準レイアウトとZ軸（奥行き）の表現
  エクスペリエンスビルダーが提供する標準のカラムレイアウトは、要素を平面的（X軸・Y軸）に並べる用途には適していますが、背景の3Dキャンバスの上に設定パネルを被せるような、Z軸方向のオーバーレイ表現には対応していません。
• Shadow DOMによるスタイルのカプセル化
  LWCはShadow DOMの仕様に準拠しており、コンポーネント内で定義したカスタムCSSは外部に影響を与えず、安全に独自のスタイリング（透過やぼかし効果など）を適用できます。

---

シームレスなUIを実現するアーキテクチャと実装

標準機能の制約を越え、没入感の高いコンフィギュレーターを構築するため、以下のアーキテクチャを採用します。

単一コンポーネントによる絶対配置（Z軸レイアウト）

3D描画エリア（Canvas）と設定パネルを別々のLWCに分割して標準レイアウトに配置した場合、カラー選択などの高頻度なUI操作のたびに、LMS（Lightning Message Service）等のコンポーネント間通信が発生し、状態管理が複雑化します。

これを回避するため、画面全体を1つのLWC（carConfigurator）として実装し、内部のCSSで position: absolute を用いてUIを上書きする設計とします。

抜粋コード（HTML / CSS）

<template>
    <div class="container">

        <div class={canvasContainerClass} lwc:ref="canvasContainer"></div>

        <div lwc:if={isModelLoaded} class="config-panel">
            </div>
    </div>
</template>

.container {
    position: relative;
    width: 100%;
    height: 900px;
    background-color: #111315;
}

.config-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 360px;
    height: 100%;
    z-index: 10;
}

グラスモーフィズム（すりガラス効果）の適用

オーバーレイした設定パネル（.config-panel）の背景が完全に不透明だと、3Dモデルの視認性が損なわれます。Shadow DOMの特性を活かし、コンポーネント固有のCSSとして backdrop-filter を適用し、背景の車両が美しく透けるグラスモーフィズムを実装します。

抜粋コード（CSS）

.config-panel {
    /* 半透明の背景色とぼかし効果を組み合わせて質感を高める */
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

3. Stencils（スケルトン）によるロード状態の制御

数十MBにおよぶ高精細な3Dモデルのロードには一定の時間がかかります。単なるスピナーではなく、SLDSのガイドラインに沿ったStencils（プレースホルダー）を採用し、ユーザーの体感パフォーマンスを向上させます。

Three.jsの描画先であるCanvas要素は renderedCallback で確実に参照（lwc:ref）を取得するため、DOMからは削除せずCSSクラスで表示・非表示を制御し、ロード用のStencilsのみ lwc:if で制御します。

抜粋コード（JavaScript）

import { LightningElement } from 'lwc';

export default class CarConfigurator extends LightningElement {
    isLoading = true;
    isModelLoaded = false;

    // Getterを使用して動的にクラスを返却
    get canvasContainerClass() {
        return this.isLoading ? 'slds-hide' : 'canvas-container slds-show';
    }

    // モデルのロード完了コールバック内で実行
    handleModelLoaded() {
        this.isLoading = false;
        this.isModelLoaded = true;
    }
}

このように、1つのコンポーネント内で絶対配置と状態管理を完結させることで、コンポーネント間通信のオーバーヘッドを排除し、滑らかで没入感のあるUIを構築することができます。

次回の「第2回：Three.js導入の壁とLWS/CSP制約の回避」では、Salesforce環境でThree.jsと外部3Dモデルを扱う際に直面するセキュリティ制約と、その具体的な回避策について解説します。

参考URL

CSS backdrop-filter (MDN Web Docs)

Lightning Design System: Stencils

McLaren 720S 3D model | C&C Studio