Three.jsで3D空間を作成してみた

Three.jsで3D空間を作成してみた

Three.jsとは

最近、Three.jsを少し勉強しています。Three.jsは簡単に言うと、JavaScriptで扱える3DのJavaScriptライブラリです。

WebGLでライブラリを使用せずに、3Dを扱う場合、自力で3D描画のための計算式などを作成しないとならず、膨大な時間がかかります。しかし、Three.jsを使用すれば、すでに3D描画をするための関数などが組み込まれているため、簡単に3D空間を作成して3Dオブジェクトを描画することができます。

Three.jsの公式ドキュメント

公式ドキュメントが大変丁寧でわかりやすいです(日本語版もあります)。

https://threejs.org/docs/index.html#manual/ja/introduction/Creating-a-scene

単純なキューブやスフィアなどの3DオブジェクトはJavaScriptのみで簡単に描画できますが、複雑な色の変化や動きをつけたい場合は、シェーダー言語と呼ばれるC言語に近い言語を使った実装が必要になります。

JavaScriptとは文法が異なり、基本的に計算なので、数学が苦手な人に取っては、ハードルが高いイメージですが、シェーダーを作って公開してくれている方も多いので、利用することも可能です。シェーダーには著作権があるので、利用する際は、ライセンスを確認して使いましょう。

アニメーションライブラリ Tween.jsで動きをつける

Three.jsで3D空間を作って、Tween.jsでアニメーションをつけて、このようなものを作ってみました。

Awwwards academyのCreating a simple portfolio website with WebGL and Barba.jsというコースを参考に作りました。英語ですが、丁寧に解説されているので、なんとかここまではできました。

https://www.awwwards.com/academy/course/creating-a-simple-portfolio-website-with-webgl-and-barba-js

そのうち、Three.jsとTailwindCSSを使って、シンプルなポートフォリオサイトを作ってみたいと思います。

終わりに

難しいけど、とても楽しいThree.jsでいろいろな表現ができるようになれたらいいな、と考えています。とても、ワクワクする技術です!

まい

フロントエンドエンジニア目指して、勉強中です。

Three.jsカテゴリの最新記事