Moto Finance

「BUILT FOR MODERN WEALTH」を掲げるプレミアムカード Moto の1ページ型サイト。土台はWebflowですが、ビジュアルは手書きのThree.jsで作られています。 マークアップにはWebGLキャンバスが2枚あります。<canvas class="canvas_earth">（aria-label がそのまま「3D animation: a globe morphing into a payment card」）と <canvas id="card_canvas">。地球儀は昼／夜／雲のテクスチャを three/tsl のノードシステムで組んだ SphereGeometry、カードは実際のGLBモデルに自作の平面反射シェーダをかけて鏡面の床に置いたように見せています。さらに3枚目の正投影キャンバスが、フラグメントシェーダだけでグラデーション背景を描いています。 【参考になるポイント】 ・バンドラを使わず、ネイティブの <script type="importmap"> で three@0.181.1 と three/webgpu、three/tsl、three/addons/ を読み込んでいる。Webflowサイトに本物のThree.jsを足すときのきれいな型 ・地球儀はWebGPU/TSLのAPIで書きつつ、new THREE.WebGPURenderer({..., forceWebGL:true}) で意図的にWebGLバックエンドに流している。ノードベースの記述と全ブラウザ対応を両立させる手 ・カードの反射は既製品ではなく手製。WebGLRenderTarget と、uTextureMatrix / uReflStrength / uReflectBump / uReflectSoft といったuniformを持つ ShaderMaterial ＋ onBeforeCompile のパッチで実装されている ・WebGLキャンバスに role="img" と説明的な aria-label を付けている。ヒーローにWebGLを置くサイトの多くが省略している部分 ・※本番に <script src="http://192.168.1.15:3000/dist/js/eyebrow.min.js"> という開発用のローカルIP参照が残っている（訪問者側では必ず失敗する）。反面教師としても参考になる