Tabasco - The Root Of A Legacy

3Dウェブデベロッパー Abdurrahim Ali（Abdu.3dev）が個人で作った、タバスコブランドを題材にしたコンセプトサイト。155年の歴史を、唐辛子が色づく過程、オーク樽での熟成、最後の製品リビールという流れでスクロールに沿って語ります。クライアントワークではなく、スクロールテリングの技術デモを兼ねたポートフォリオ作品です。 実装は Three.js と WebGL によるリアルタイム3Dで、スクロール位置をタイムラインとして唐辛子の色変化・樽の展開・ボトルのカメラワークに割り当てています。Awwwards のタグは WebGL / GSAP / Three.js / Scrolling / Responsive。デスクトップとモバイルの両方に対応させた点を制作者自身が売りにしています。 【参考になるポイント】 ・素材（唐辛子）の色変化をそのまま時間の経過の表現に使う。スクロール量を物語の年数に直接マッピングする分かりやすい設計 ・スクロールテリング系WebGLをモバイルまで通すのは負荷的に難しく、レスポンシブ対応を前面に出している点が珍しい ・実在ブランドを題材にした個人のコンセプトワークがアワードに載る、というポートフォリオの作り方の例 ・※ページ本文は JavaScript で描画されるため、WebFetch では章立てもモデルファイル名（.glb / .gltf / .hdr）も取得できなかった。技術情報は meta description と Awwwards のタグが根拠 ・※実サイトに og:image / twitter:image の URL が無いため、サムネイルは Awwwards の投稿画像を使用