簡単なThree.jsのサンプルを試そう目次Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。サンプルを再生するサンプルのソースコードを確認するまずはHTMLファイルを用意して、次のコードを貼り付けて試してください。id="myCanvas"></canvas></body></html>ブラウザの画面上に単色の直方体が回転します。ちなみに前提としてThree.jsはWebGL対応のブラウザが必須となりますので、動作確認はFirefoxやChrome、Safari、Edgeなどを使うといいでしょう。WebGLはローカルファイルのセキュリティーの制限があるため、ローカルサーバー上で実行することをオススメします。Server」を利用しましょう。マウス操作で簡単にローカルサーバーを起動できるので簡単です。ここからは、上記のコードを解説していくので、少しずつ理解していきましょう。canvas要素を用意するThree.jsはHTML5のcanvas要素を利用します。canvas要素はコンテンツを表示する描画エリアとなります。canvas要素には属性としてid(ID値)を最低限設定しておきましょう。id="myCanvas"></canvas></body>canvas要素の大きさはJavaScriptを使って設定します。JSライブラリを読み込むThree.jsはJavaScriptのライブラリですが、このファイルを読み込むことによってはじめてThree.jsが利用できるようになります。CDN(コンテンツ・デリバリー・ネットワーク)で提供されているURLを使うのが導入にお手軽です。src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>WebGLの処理はページの読み込みが終わってから実行させます。addEventListener()関数を使ってloadイベントが発生するのを監視させ、ページが読み込み終わったときに実行させたい関数を指定します。この関数init()の中にThree.jsのコードを書いていきます。処理}</script>3D表示用のJavaScriptを用意WebGLのレンダリングをするためのレンダラーを作成します。THREE.WebGLRendererクラスのコンストラクターには引数として、HTMLに配置したcanvas要素を指定し、連携させます。document.querySelector('#myCanvas')});デフォルトではレンダラーのサイズが小さいため、setSize()メソッドでサイズを設定します。今回のデモでは幅960px、高さ540pxを設定しています。540);シーンを作成するシーンを作成します。シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場となります。THREE.Scene();カメラを作る3Dではどの視点から空間を撮影するか、という実装をします。この機能は「視点」や「カメラ」と呼ばれます。4つの情報を引数として渡しカメラを作成します。540);立方体を作る立方体はメッシュという表示オブジェクトを使用して作成します。メッシュを作るには、ジオメトリ(形状)とマテリアル(素材)の二種類を用意する必要があります。ジオメトリとは頂点情報や面情報を持っています。Three.jsにはさまざまなジオメトリが用意されていますが、今回は立方体や直方体のような箱状の形状を生成するためのBoxGeometryを使用します。500);マテリアルは色や質感の情報を持っています。今回はとりあえず箱を表示させたいので、THREE.MeshNormalMaterialという適当なカラーを割り振るマテリアルを生成します。THREE.MeshNormalMaterial();作成したジオメトリとマテリアルを使って、メッシュを作ります。作成したメッシュをシーンに追加しましょう。シーンに追加scene.add(box);アニメーションJavaScriptでアニメーションをさせるには、時間経過で関数を呼び続ける必要があります。そのためには、requestAnimationFrame()というグローバルメソッドを使用します。requestAnimationFrame()は引数として渡された関数を、毎フレーム実行します。アニメーション処理をここに書く}次に、Three.jsの表示結果を更新する命令を書きます。Three.jsでは自動的に画面が最新に切り替わらないので、明示的に画面が更新されるように命令を書く必要があります。renderer.render()という命令で更新を指示できます。レンダリング}アニメーションの処理として、立方体が回転するようにしてみましょう。時間経過で回転するようにrotation.yプロパティの数値を加算しています。レンダリング}以上がサンプルの解説となります。上記のコードで出現したThree.jsの基本機能について紹介します。(HTMLのcanvasタグ)が実際に表示される画面となります。THREE.Sceneクラス3Dの空間を表すクラス。3Dのオブジェクトはシーンにadd()メソッドを利用して追加することで表示できます。THREE.PerspectiveCameraクラス3D空間を撮影するカメラ。視点を制御するために使用します。3D空間のどの視点で撮影しているのかの情報が必要となります。THREE.WebGLRendererクラス3D空間のレンダリングを行います。レンダリングとは、Three.jsで計算した3Dのオブジェクトを画面に表示することです。内部的にはThree.jsがWebGLのAPIを使って、GPUで座標を計算させ画面に表示させています。Three.jsではrequestAnimationFrameのタイミングにあわせて、レンダリングを行うように設定しましょう。まとめ3Dと聞くと難しそうと思われがちですが、あっけなく動作したので驚かれた方も多いのではないでしょうか?次回の記事では、マテリアルやライティングの設定方法を説明します。令和元年6月11日現在最新のリビジョン105を元に執筆しています。作例をみてThree.jsで実現可能な表現のインスピレーションを得ましょう。(英語)Three.jsの情報源わからないことがあれば、フォーラムや勉強会を調べてみましょう。