学ぶ3D表現Three.js入門サイトこのサイトは、WebGLのライブラリ「Three.js」の入門サイトです。初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。Three.js概要Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。2000年代後半のFlashの時代から、ウェブの3D表現が人気を集めてきました。今では標準技術としてのWebGLが、ゲームやビジュアライゼーションなどの多くの場面で採用されています。Three.js入門編まずは少ないコードでThree.jsの基本を学んでいきましょう。入門編マテリアルとライティングジオメトリカメラの制御方法(座標制御)カメラの制御方法(OrbitControls)Three.js基本編Three.jsには多彩な機能が存在します。機能を習得すればするほど、実現できる表現が増えていくでしょう。専門的な方法も覚えていきましょう。2015(略称ES2015、別名ES6)以上では、クラスを利用できます。オブジェクト指向なプログラムを用いて設計することで、規模の大きい開発に役立ちます。Three.jsでクラスを利用する方法を習得しましょう。ES2015のclassを利用する(継承)ES2015のclassを利用する(メソッド)Three.js数値計算3Dでは、三角関数やベクトルの計算をする場面が多いです。実例を通して、これらを学んでいきましょう。数学の記事一覧Three.js演出編Three.jsを使った表現を作例を通して学びましょう。演出の記事一覧WebGLシェーダー編Three.jsだけだと実現できる表現の種類に限界があります。シェーダーをGLSLでカスタマイズすることによって、表現の種類を大きく広げられます。シェーダーの記事一覧WebGL応用編WebGLの最適化や次世代の仕様について理解を深めましょう。次世代WebGLの記事一覧オフスクリーンキャンバスVR表現3Dの知識はバーチャルリアリティーの実装にも役立ちます。効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもオススメです。令和元年6月11日現在最新のリビジョン105を元に執筆しています。作例をみてThree.jsで実現可能な表現のインスピレーションを得ましょう。(英語)Three.jsの情報源わからないことがあれば、フォーラムや勉強会を調べてみましょう。