お客様に「ジュニのコーポレートサイト面白い」「どうやって作ってるの？」と

ありがたく嬉しいお声をいただくことがあります。
そこで、Labではサイトがどんな風に作られたか、少しずつご紹介したいと思います！

コチラでは、「TOPページ」の見どころをお伝えします♪
まずは、チェックポイントをGIFアニメでご確認ください。

バクが…………落ちてきましたねッ！！！

ジュニのコーポレートサイトのイントロ画面では、ジュニのキャラクターである「バク」の３Dオブジェクトを、上から落としています。

PCだけでなく、スマートフォンでもバクが落ちてくるよう制御していますが、動きに負荷がかからないように設計しています。
それでは、それをどうやって作ったかご説明致します♪

アニメーション実装

こちらのアニメーションの実装には
【Three.js】と【Cannon.js】というライブラリを利用しています。

２つは相性がよく、簡単にコンテンツを作成できます。
そのあたりは下記の記事でも取り扱ってますのでぜひ。

＞「Three.jsとCannon.jsを使ってだるま落としをつくってみた」

今回は、実装の細かい部分よりも
演出メインでちょっとお話をしたいと思います。

ユーザーアクションでの３D演出

最近は様々なWebサイトでWebGLが使われており、
ダイナミックで、眺めているだけでも楽しいようなサイトが増えてきました。

なかには3DCGを使ったサイトもあり、平面なサイトが時代遅れと言われる未来はすぐそこまでやってきています。（もう既に…!?)
それでも、まだ3Dでの表現は少なく、特に”物理演算”を使ったサイトはまだまだ少ないのではないでしょうか。

弊社サイトではそんな物理演算を使った演出をしてみました。

なぜ物理演算を使ったか

物理演算は計算処理が非常に多いため、うかつに使用するとサイトが重くなってしまうなどの危険性もあります。
そんなリスクがありながらも、なぜ物理演算を使ったかというと、
「物理演算によって “ストーリー” が生み出される」からです！

ここでいうストーリーとは”物が飛ぶ”だったり”動く”だったり、
実際起こしていることはすごくカンタンなことです。

３Dと物理演算を用いることで、
アクセスすると、ジュニのキャラクターであるバクが吹っ飛んでいく。
そんなコンテンツを通して、
ジュニで何かが起こる、ジュニが何かを起こしてくれる、
そんなストーリーを感じていただくことを目指しました。

まとめ

いかがでしたか？
今回はトップページで物理演算を使った演出についてお話ししました。
これから、端末の処理能力や3DCGのライブラリがより一層進化し、Webでの3DCGの表現はさらに手軽になると思われます。
3Dの新しい表現でWebの世界をさらに盛り上げていきたいと思います！

今後は、弊社のサイトだけではなく制作物の内容もご紹介していけたらと思っておりますのでお楽しみに♪

#theejs
#WebGL