three.jsではじめての3D図形を描画しよう！
2021.12.20
three.jsの基礎
インタラクティブでリアルな3D図形の描画に使えるフレームワークが「three.js」です。
three.jsでは、図形の描画は、次のように書いていきます。
1 | renderer.render(scene, camera); |
(１) renderer＝「描画エンジン」（THREE.WebGLRendererクラス）
(２) scene＝「画面」（THREE.Sceneクラス）
(３) camera＝「カメラ」（THREE.PerspectiveCameraクラス）
(４) 上記の文の呼び出しの前に、「描きたい3D図形」を準備しておく。
(４)の図形については、「形」と「質感」を設定し、作成していくことになります。
three.jsでは、最低この4つの要素をつくれば、3D空間内に図形を描画することができます。
それでは、早速作っていくことにしましょう！
【three.jsの公式サイト】
https://threejs.org
球体を描いてみよう！
まずは、球体を描くコード全体を示してみたいと思います。
試しに、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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script> <title>three.jsではじめての3D図形を描画しよう！</title> <style> * { margin: 0; padding: 0; } div#canvas-frame { width: 500px; height: 500px; } </style> <script> document.addEventListener('DOMContentLoaded', function(e) { startThree(); }, false) function startThree() { initThree(); //レンダラー、シーン設定 initCamera(); //カメラ作成 initObject(); //3D図形作成 draw(); //描画 } //グローバル変数の宣言 let scene, canvasFrame, renderer, camera, sphere; //レンダラー、シーンを設定 function initThree() { canvasFrame = document.getElementById('canvas-frame'); //生成されるcanvas要素を配置するdiv要素 //レンダラーオブジェクトの作成 renderer = new THREE.WebGLRenderer({ antialias: true }); //レンダラーの背景色 renderer.setClearColor(0x999999, 1.0); //レンダラーのサイズ renderer.setSize(canvasFrame.clientWidth, canvasFrame.clientHeight); //レンダラーの解像度 renderer.setPixelRatio(window.devicePixelRatio); if (!renderer) alert('初期化失敗！'); //レンダラーが生成するcanvasをdiv要素に配置 canvasFrame.appendChild(renderer.domElement); //シーンオブジェクトを生成 scene = new THREE.Scene(); } //カメラを設定 function initCamera() { //カメラの作成 camera = new THREE.PerspectiveCamera(45, canvasFrame.clientWidth / canvasFrame.clientHeight); camera.position.set(10, 50, 1000); //カメラの位置を指定 } //描画する3D図形を作成 function initObject() { //「軸」オブジェクトの作成 const axes = new THREE.AxesHelper(1000); //シーンに追加 scene.add(axes); //「球体」オブジェクトの作成 const geometry = new THREE.SphereGeometry(100, 32, 32); //形状（ジオメトリ）の作成 const material = new THREE.MeshNormalMaterial(); sphere = new THREE.Mesh(geometry, material); //オブジェクトの作成 //シーンに追加 scene.add(sphere); } function draw() { renderer.render(scene, camera); } </script> </head> <body> <div id="canvas-frame"></div> </body> </html> |
表示画面
画面には、以下のような「球体」が表示されるかと思います。
コード解説
それでは、コードについて解説していきたいと思います。
まずは、図形を表示する要素を用意します。
canvas要素を配置
まずは、divを用意します。
1 | canvasFrame = document.getElementById('canvas-frame'); |
そこにレンダラーが生成するcanvas要素を配置します。
1 | canvasFrame.appendChild(renderer.domElement); |
three.jsライブラリを読み込む
cdn経由でthree.jsライブラリを読み込みます。
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script> |
また、ページ読み込み時にコールするstartThree()関数にthree.jsの処理を書いていきます。
1 2 3 4 5 6 7 8 9 10 | document.addEventListener('DOMContentLoaded', function(e) { startThree(); }, false) function startThree() { initThree(); //レンダラー、シーン設定 initCamera(); //カメラ作成 initObject(); //3D図形作成 draw(); //描画 } |
レンダラーを作る
つぎに、WebGLのレンダリング（描画）をするためのレンダラーを作成します。
「サイズ」「背景色」「アンチエイリアス」「解像度」などが設定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | //レンダラーオブジェクトの作成 renderer = new THREE.WebGLRenderer({ antialias: true }); //レンダラーの背景色 renderer.setClearColor(0x999999, 1.0); //レンダラーのサイズ renderer.setSize(canvasFrame.clientWidth, canvasFrame.clientHeight); //レンダラーの解像度 renderer.setPixelRatio(window.devicePixelRatio); if (!renderer) alert('初期化失敗！'); //レンダラーが生成するcanvasをdiv要素に配置 canvasFrame.appendChild(renderer.domElement); |
シーンを作る
1 | scene = new THREE.Scene(); |
上記のように、シーンを作ります。
シーンとは、描画の対象となるスペースです。
1 | scene.add(sphere); |
このように、描く図形を追加していくことで、図形が描画されます。
カメラを作る
また、シーンをどのように見るかという設定がカメラです。
「縦方向の視野角」と「アスペクト比」を指定して作成します。
1 2 3 4 | function initCamera() { camera = new THREE.PerspectiveCamera(45, canvasFrame.clientWidth / canvasFrame.clientHeight); camera.position.set(10, 50, 1000); //カメラの位置を指定 } |
球体を作る
それでは、実際に描く図形を作っていきましょう。
図形は、「形状」と「質感」を合わせたオブジェクトとして作成します。
ここでは、球体を作成したいと思います。
1 2 3 4 5 6 | //「球体」オブジェクトの作成 const geometry = new THREE.SphereGeometry(100, 32, 32); //形状（ジオメトリ）の作成 const material = new THREE.MeshNormalMaterial(); sphere = new THREE.Mesh(geometry, material); //オブジェクトの作成 //シーンに追加 scene.add(sphere); |
描画する
最後に、レンダラーのrender()メソッドの引数にシーンとカメラを渡して、図形を描画します。
1 2 3 | function draw() { renderer.render(scene, camera); } |
以下のような、画像が表示されます。
以上が、three.jsによる3D図形描画の手順となります。
今回は、基礎の基礎ですが、今後は、色々な３D図形を動かしていければと思っています。
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
