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

Three.jsとは

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

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

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

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

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

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

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

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

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