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