Three.jsで作る、サムネイルをフルスクリーンに展開するアニメーション
デモページ ソースダウンロード アニメーションは、ユーザーのWebサイトに対する印象を大きく左右します。裏を返せば...
- Three.js
- アニメーション
- コードスニペット
Three.jsは、Web上で簡単に3Dコンテンツが制作可能となるJavaScriptライブラリです。
Web上で3Dコンテンツを制作する上で必要となるAPIがWebGLですが、この技術をそのまま利用するとAPIの扱いが非常に冗長的で高度な技術が必要となります。しかし、このThree.jsを利用することで簡単に取り扱うことができます。
2000年代後半、インターネットでは3D表現したコンテンツが人気を集めていました。3Dが世に定着して以降、現在ではあらゆるゲームやビジュアライゼーションでは3D表現が一般的であり、開発の手間も簡略化されています。
その簡略化の第一線となっているのがThree.jsであり、JavaScriptの知識さえあれば簡単に3Dコンテンツが制作できます。Three.js自体の容量も126KB程度と非常に軽量な為、ブラウザ上でWebGL + Three.jsという組み合わせは欠かせない技術となっています。
・WebGL
・ライブラリ
・JavaScript
・HTML
・CSS