FAI

SAFAA、NADA、GHASAQ という3つの製品を軸にした、ラグジュアリースキンケアブランド FAI（فــــي）の没入型サイト。「影の静けさ」をテーマに、アラビアの意匠を視覚言語にしています。 Viteで作られたSPAで、配信されるHTMLはわずか490バイトのシェル。ReactはUIだけを担当し、Three.jsは react-three-fiber を通さず命令的に直接扱われています（バンドルを useGLTF / useFrame / useThree / @react-three/fiber / drei のいずれで検索してもヒット0件）。Awwwards のタグは「React」となっていますが、3Dの実装は素のThree.jsです。 3Dは実際に読み込まれたジオメトリで、Cloudinaryから8つのGLBが配信されます。3本のボトルに加えて、岩、葉、グジェリの壺、床という舞台美術一式です。 【参考になるポイント】 ・環境物のモデル名に _etc1 / _etc1s が付いており、テクスチャがBasis Universal ETC1Sにトランスコードされて KTX2Loader 経由で読み込まれている。ジオメトリはDraco圧縮。重い3Dページを帯域を意識して作っている実例 ・ShaderMaterial が16、gl_FragColor が61箇所の自作GLSLに、EffectComposer のポストプロセス、InstancedMesh、GSAPによる振り付け（58箇所） ・バンドルが threejs.org/examples/textures/sprites/disc.png を直接参照している。Three.js公式サンプルのソフトディスク画像をそのまま使っているパーティクル実装 ・バンドル内の「spline」5件は Spline（デザインツール）ではなく、Three.js の glTF アニメーション内部処理（CUBICSPLINE、_createCubicSplineTrackInterpolant）。文字列検索だけで使用技術を判定すると間違える好例 ・※og:image も twitter:image も持たないため、当面のサムネイルはAwwwardsの投稿画像。管理画面から差し替え推奨