うちの猫ちゃんギャラリー

作ったきっかけ

最近 Three.js を勉強中で、これまで学んだことの復習がてら手を動かして作った作品です。
せっかく作るなら好きなものを題材にしたくて、並べたのはわが家の愛猫たち🐈
写真を3D空間にぐるりと配置して、学んだことをひと通り詰め込みました。

見どころ

猫の写真がリング状に並んだ 3D カルーセルです。ゆっくりと自動で回り続けるほか、ドラッグすると自分の好きな角度でくるくる回して眺められます。
Three.js（WebGL）でテクスチャを貼った板を円状に配置し、回転の動きをなめらかに制御しています。
背景は GLSL（シェーダー）で描いたオーロラ風の表現で、ノイズをもとに時間とともに色がゆらゆらと流れるようにしています。

これから

まだまだ Three.js は勉強中なので、シェーダー表現やインタラクションをもっと増やして、スキルアップしていきたいと思っています。