この記事はバージョン Spring ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。
全3回でお届けしている3Dカーコンフィギュレーターの実装ガイドも、本記事で最終回となります。
第1回でシームレスなUIレイアウトを構築し、第2回でLWS等のシステム制約を越えて外部3Dモデルを描画する土台を整えました。
最終回となる本記事では、画面内に配置された3Dモデルを「実車さながらの美しさ」に引き上げるためのWebGL実装（UIと調和する視点制御、スタジオ環境の構築、PBRマテリアルの動的チューニング）に焦点を当てます。
今回の記事で作成したコンポーネントと.glbファイル(ZIP)をGitHubで公開しています。 ぜひ Clone して、あなたの組織で動かしてみてください。
Three.jsにおける空間構築とPBRマテリアルの仕様
高品質な3D表現を行う上で、前提となるThree.jsの技術仕様は以下の通りです。
- PBRマテリアルのプロパティ
Three.jsのMeshStandardMaterial等は物理ベースレンダリングに対応しており、単なる色（color）だけでなく、金属感（metalness）、粗さ（roughness）、そして表面のクリアコート（clearcoat）の数値を組み合わせることで、車の塗装のような複雑な質感を表現する仕様です。 - 自己発光（Emissive）とトーンマッピング
ライトやディスプレイが自ら光っているように見せるには、マテリアルのemissiveプロパティを設定します。この際、描画エンジン全体のトーンマッピングの影響を除外（toneMapped = false）することで、より鮮やかな発光を得られます。 - 影（Shadow）の投影と受け取り
光源が影を生み出す（castShadow）設定に加えて、その影を落とすための物理的なオブジェクト（receiveShadowが有効な床や壁）を空間内に配置しなければ、影は視覚化されません。
リアルな質感を生み出す実装アプローチ
前述の仕様を踏まえ、カーコンフィギュレーターとしての完成度を高めるための具体的な実装ロジックを解説します。
UIレイアウトを考慮した視点のオフセット
右側に設定パネル（.config-panel）が常時オーバーレイされている状態において、カメラの注視点を原点 (0, 0, 0) にすると車体がパネルの下に隠れてしまいます。これを解決するため、OrbitControls のターゲットをX軸方向へシフトさせ、車両全体を左寄りに配置します。
抜粋コード（JavaScript）
// パネルが右側にあるため、車を左寄りに表示するためにターゲットをX軸プラス方向にシフト
this.controls = new window.THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target.set(0.6, -0.4, 0.25);
床と壁を配置した仮想スタジオライティング
環境マップ（RoomEnvironment）と複数の SpotLight を配置するだけでなく、影を受け止めるための「ダークな床」と「シリンダー状の壁」をThree.js側で動的に生成して配置します。これにより、車体が空間に接地し、実在感が大幅に向上します。
抜粋コード（JavaScript）
// --- 床の配置（反射を抑える） ---
const floorGeometry = new window.THREE.PlaneGeometry(30, 30);
const floorMaterial = new window.THREE.MeshStandardMaterial({
color: 0x050505, // ダークな床
roughness: 0.8, // 反射を大きく抑える
metalness: 0.1
});
const floor = new window.THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true; // 影を受け取る設定
this.scene.add(floor);
// （※壁のシリンダー配置や各スポットライトの設定詳細はGitHubを参照）
PBRマテリアルの動的チューニングとクローン処理
カラーパレットがクリックされた際、単に色を適用するだけでは塗装の深みが出ません。
対象メッシュのマテリアルを clone() して色移りを防ぎつつ、metalness や clearcoat をJavaScript側で上書きし、高級スポーツカー特有の質感を動的に付与します。
抜粋コード（JavaScript）
/**
* 指定した色をターゲットマテリアルに適用し、質感を調整します。
*/
applyColorToMaterial(targetColor, targetName) {
if (!this.carModelGroup || !targetName) return;
this.carModelGroup.traverse((node) => {
if (node.isMesh && node.material) {
// マテリアルの質感を調整するヘルパー関数
const applyMaterialTweaks = (mat) => {
const newMat = mat.clone(); // 色移り防止のための独立化
newMat.color.set(targetColor);
// 車体の場合、深みと艶を出すためのPBR調整
if (targetName === 'McLaren') {
newMat.metalness = 0.75;
newMat.roughness = 0.15;
if (newMat.clearcoat !== undefined) {
newMat.clearcoat = 1.0;
newMat.clearcoatRoughness = 0.05;
}
}
return newMat;
};
// （※配列マテリアルへの適用ロジック等はGitHubを参照）
}
});
}
ロード時の自己発光（Emissive）設定
テールライトやヘッドライトなど、発光すべきパーツをモデルロード時に走査し、動的に自己発光パラメータを付与します。
抜粋コード（JavaScript）
// ライト類の発光処理（loadCarModel内の処理一部抜粋）
const matName = mat.name.toLowerCase();
if (matName.includes('light') || matName.includes('emission')) {
if (matName.includes('tail') || matName.includes('rear') || matName.includes('stop')) {
mat.emissive = new window.THREE.Color(0xff0000);
mat.emissiveIntensity = 2.0;
} else {
mat.emissive = new window.THREE.Color(0xffffff);
mat.emissiveIntensity = 2.5;
}
mat.toneMapped = false; // 発光を鮮やかにするための設定
}
これらの実装により、Experience Cloudの標準枠組みを越え、Webアプリケーションとして最高峰の視覚体験を提供するカーコンフィギュレーターが完成します。フロントエンドの描画基盤が確立した後は、選択された仕様データをApex経由でSalesforceのリードや商談オブジェクトへシームレスに連携させることが可能となります。
参考URL
Three.js Documentation: RoomEnvironment
Three.js Documentation: OrbitControls
Three.js Documentation: Material.clone
McLaren 720S 3D model | C&C Studio
読者の声