こんにちは。
今回はThree.jsとGLSLシェーダーを活用して、水族館をテーマにしたインタラクティブなポートフォリオサイトを制作しました。
一般的なポートフォリオサイトでは作品をカード形式で並べることが多いですが、今回は「作品を見る体験そのもの」をデザインしています。
■ 制作コンセプト
テーマは「デジタル水族館」。
サイトにアクセスすると、水中空間が広がり、魚たちがゆったりと泳ぎます。
そして魚をクリックすると、その魚に紐づいた制作実績が表示される仕組みです。
単に情報を並べるのではなく、ユーザーが探索しながら作品を発見できる構成を目指しました。
■ 実装した技術
・Three.js
・GLSL Shader
・JavaScript
・GLTFモデル
・Raycasterによるクリック判定
背景にはシェーダーを使用し、水面の揺らぎや波紋をリアルタイムで描画しています。
また、マウス操作に応じて波紋エフェクトが発生し、水中らしい没入感を演出しています。
■ こだわったポイント
・魚が作品そのものになっている
・泡や浮遊粒子による空間演出
・水草のアニメーション
・水中展示パネル風のUIデザイン
・マウスに反応する波紋エフェクト
単なる3D表示ではなく、「触って楽しいWebサイト」を意識して制作しました。
■ 今後追加予定
今後はさらに、
・海底遺跡エリア
・魚群演出
・昼夜切り替え
・実際の制作実績との連携
なども実装予定です。
Three.jsやWebGLを活用した印象に残るWebサイト制作に興味がある方は、お気軽にご相談ください。
企業サイト、LP、サービス紹介ページ、インタラクティブコンテンツなど幅広く対応しております。
