どうも、とがみんです。
3次元コンピューターグラフィックス作るの楽しそうだなと思い、勉強することにしました。
この記事では、「Three.js」を利用して立方体を回転させるプログラムを紹介していこうと思います。
Contents
実装する物
今回実装するのは、以下のような立方体が回転している物です。
Three.jsで立方体 pic.twitter.com/tWMGgf9yXj
— 究極の自由を追求するブログFresopiya (@fresopiya) July 7, 2019
「HTMLファイル」と「JSファイル」は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script> <script src="cube/cube.js"></script> </head> <body> <canvas id="cube"></canvas> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | // ページの読み込みを待つ window.addEventListener('load', init); function init() { // サイズを指定 const width = 500; const height = 500; // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#cube') }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height);//描画サイズ renderer.setClearColor(new THREE.Color(0x000000));//背景色 // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera(45, width / height); camera.position.set(0, 0, +1000); //ライト作成 const light = new THREE.DirectionalLight(0xffffff); light.intensity = 1.5; // 光の強さを倍に light.position.set(1, 1, 1); scene.add(light);//シーンに追加 // 箱を作成 const geometry = new THREE.BoxGeometry(300, 300, 300); const material = new THREE.MeshLambertMaterial({color: 0x8dc3ff}) const box = new THREE.Mesh(geometry, material); scene.add(box);//シーンに追加 tick(); // 毎フレーム時に実行されるループイベントです function tick() { box.rotation.x += 0.01; box.rotation.y += 0.01; box.rotation.z += 0.01; renderer.render(scene, camera); // レンダリング requestAnimationFrame(tick); } } |
次に、3Dコンテンツの実装方法と上記コードの説明をしていきます。
3Dコンテンツ実装準備
Three.jsライブラリを読み込む
まず、「Three.js」のライブラリを読み込みます。
CDN(コンテンツ・デリバリー・ネットワーク)で提供されているURLを記述することで、「Three.js」のライブラリを手軽に導入することができます。
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script> |
canvas要素を用意する
「Three.js」では、HTML5のcanvas要素を利用します。作成した3Dコンテンツはcanvasタグの中に描画されます。
1 | <canvas id="cube"></canvas> |
JavaScriptの読み込み
3Dコンテンツは、ページの読み込みが終わってから実行させています。「JavaScript」のファイルに以下のコードを記述し、init()関数の中のコードが、htmlページの読み込み完了時に呼び出されます。
3Dコンテンツを表示する関数を、ページロード後以外でも、ボタンを押した時や、画面をリサイズした時に呼び出すこともできます。
1 2 3 4 5 | // ページの読み込みを待つ window.addEventListener('load', init); function init() { //htmlファイル読み込み後に呼び出す処理。 } |
次に実際に3Dコンテンツの表示に関わる部分について説明していきます。
3Dコンテンツの制作
3Dコンテンツの制作に当たって、以下のステップがあります。
- レンダラーの作成
- シーンの作成
- カメラの作成
- ライトの作成
- 3Dオブジェクトの作成
- アニメーション
それぞれについて説明していきます。
レンダラーを作成する
WebGLのレンダリングをするためのレンダラーを作成します。レンダリングとは、表示用のデータを元に、内容を整形して表示することです。
このコードで、canvas内に、立方体等の描画がされます。
1 2 3 4 5 6 7 8 9 10 | // サイズを指定 const width = window.innerWidth;//ブラウザWindowの幅取得 const height = window.innerHeight;//ブラウザWindowの高さ取得 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#cube') }); renderer.setPixelRatio(window.devicePixelRatio);//CSS解像度と物理解像度の比 renderer.setSize(width, height);//レンダラーのサイズ renderer.setClearColor(new THREE.Color(0x000000));//背景色 |
canvas: document.querySelector(‘#cube’)にて、HTMLファイルに配置したcanvas要素のIDを指定します。
シーンを作成する
次にシーンを作成します。シーンとは3D空間のことで、3Dオブジェクトや光源を置くための空間です。
1 2 | //シーンの作成 const scene = new THREE.Scene(); |
カメラを作成する
3Dのコンテンツを制作するにあたって、それをどの視点から観察するかといったものを決めます。
1 2 3 | // new THREE.PerspectiveCamera(画角, アスペクト比) const camera = new THREE.PerspectiveCamera(45, width / height); camera.position.set(0, 0, +1000); |
画角：カメラで撮影した際、実際に映る範囲を角度で表したもの。
アスペクト比：縦横の画面比率。
ライトを作成する
ライトを用いることによって、物体に光を当てることができます。
光の色、強さ、光源の位置を以下でしています。
1 2 3 4 5 | //ライト作成 const light = new THREE.DirectionalLight(0xffffff); light.intensity = 1.5; // 光の強さを倍に light.position.set(1, 1, 1);//光源の位置 scene.add(light);//シーンに追加 |
立方体を作成する
3Dのオブジェクトは、形の座標情報のジオメトリと、表面の素材のマテリアルの2つの要素からできており、それらを別々に定義してから、メッシュ(部品・3Dオブジェクト)を作成します。
1 2 3 4 | const geometry = new THREE.BoxGeometry(300, 300, 300);// 幅, 高さ, 奥行き const material = new THREE.MeshNormalMaterial();//色や質感 const box = new THREE.Mesh(geometry, material);//メッシュを作成 scene.add(box);//シーンに追加 |
ジオメトリ：表示する物体の形状。
マテリアル：物体の質感。素材。
メッシュ：部品。ジオメトリにマテリアルを適用させたもの。
アニメーション
次にアニメーションについてです。
初回読み込み時に、tick()関数が呼び出され、その後はrequestAnimationFrame(tick);によって、一定間隔で指定したtick()関数を呼び出します。実行間隔は表示するブラウザに依存します。
以下のコードで、立方体が、x軸、y軸、z軸方向に回転するようになっています。
1 2 3 4 5 6 7 8 9 10 | tick();// 初回実行 function tick() { //アニメーション box.rotation.x += 0.01;//x軸方向への回転 box.rotation.y += 0.01;//y軸方向への回転 box.rotation.z += 0.01;//z軸方向への回転 renderer.render(scene, camera); // シーンとカメラをレンダリング requestAnimationFrame(tick); } |
このようにして、回転する立方体が出来上がりました。
Three.jsで立方体 pic.twitter.com/tWMGgf9yXj
— 究極の自由を追求するブログFresopiya (@fresopiya) July 7, 2019
まとめ
「Three.js」を利用して、回転する立方体を作成しました。
今後より複雑な3Dオブジェクトも作っていきたいです。
