three.jsではじめての3D図形を描画しよう！

メディアチーム

three.jsではじめての3D図形を描画しよう！

メディアチーム

2019.06.04

IT技術

JavaScript

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図形を動かしていければと思っています。

こちらの記事もオススメ！

2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...

ITフリーランスのエンジニア専門エージェント

技術力で世の中をもっと面白くエンジニア積極採用中！

ライトコードでは、エンジニアを積極採用中！

ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

採用情報へ

メディアチーム

「好きを仕事にするエンジニア集団」の（株）ライトコードです！ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。システム開発依頼・お見積もり大歓迎！また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！インターンや新卒採用も行っております。以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit