3Dモデルで表現する周回軌道アニメーション

note

3D空間に浮かぶ惑星と宇宙船をモチーフにした、周回軌道アニメーションです。ローポリゴンデザインの3DモデルがWebGL技術によって美しい軌道を描きながら回転します。ドラッグやスクロール操作により、3D空間を自由に見回すことができます。

パース効果を持つカメラと環境光・平行光源を組み合わせて宇宙空間を表現し、GLTFローダーで3Dモデルを読み込んで配置します。中心の惑星を軸として、宇宙船が大円軌道を描くように座標をサインカーブに沿って連続的に変化させ、requestAnimationFrameでスムーズなループアニメーションを実現しています。また、進行方向のベクトルを計算して宇宙船の姿勢を傾けることで、リアルな軌道運動を再現しています。
※3Dモデルはフリー素材を使用しています

Webにおける3Dグラフィック表現は、単なる装飾を超えてユーザー体験を豊かにする重要な要素となっています。今回のアニメーションは、宇宙や科学をテーマとするサイト、プロダクト紹介、ブランディングサイトなどで効果的に活用できるでしょう。

【使用ライブラリ】 Three.js