• トップ
  • ブログ一覧
  • three.jsではじめての3D図形を描画しよう!
  • three.jsではじめての3D図形を描画しよう!

    広告メディア事業部広告メディア事業部
    2019.06.04

    IT技術

    three.jsの基礎

    インタラクティブでリアルな3D図形の描画に使えるフレームワークが「three.js」です。

    three.jsでは、図形の描画は、次のように書いていきます。

    1renderer.render(scene, camera);

    (1) renderer=「描画エンジン」(THREE.WebGLRendererクラス)
    (2) scene=「画面」(THREE.Sceneクラス)
    (3) camera=「カメラ」(THREE.PerspectiveCameraクラス)
    (4) 上記の文の呼び出しの前に、「描きたい3D図形」を準備しておく。

    (4)の図形については、「形」と「質感」を設定し、作成していくことになります。

    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図形描画の手順となります。

    今回は、基礎の基礎ですが、今後は、色々な3D図形を動かしていければと思っています。

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

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

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事