Modelec 3D Visualization

フランスの高級電材メーカー Modelec の3Dビジュアライゼーションページ。コレクション（M、Confidence、Fascination、Hitera、Iris、Karo、Désir）を選び、プレートの仕上げとスイッチ側の仕上げを別々に選ぶと、3Dビューが即座に切り替わります。 カスタムレンダラーを一行も書かずに、Googleのオープンソースコンポーネント <model-viewer> と素の glTF 2.0 だけでマテリアルコンフィギュレーターを成立させている、この規模では最もきれいな実例です。 【参考になるポイント】 ・全仕上げの組み合わせが1つのglTFの中に KHR_materials_variants として入っている。3メッシュ・24マテリアルに対して132のバリアント名（例 511_511、542_Ivo）が定義され、仕上げの切り替えはモデルの再読み込みではなくバリアント名の変更だけ。glTF本体は19,431バイト ・カメラ制約の書き方が実務的：min-camera-orbit / max-camera-orbit で回転を上下左右とも制限し、field-of-view の最小＝最大＝12degでズームを封じ、touch-action="pan-y" でモバイルの縦スクロールを殺さない。3Dページでよくある失敗を全部つぶしている ・ar-placement="wall" を指定している。スイッチは床ではなく壁に置くものなので正しく、かつ見かけることの少ない設定。環境マップも model-viewer 既定ではなく自前の暗いHDR（dark_01.hdr）＋ exposure="2.5" ・仕上げには KHR_materials_clearcoat、テクスチャはORMパック（511_base / 511_norm / 511_orm）、接地影は別途焼いたPNGプレーン。glTFのJSONを読むだけでPBRの作法が学べる