JavaScriptの3Dライブラリ「Three.js」の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの3Dライブラリ「Three.js」の使い方について解説しています。これはブラウザ上で3Dグラフィックを表現することができるライブラリです。Three.jsのダウンロード方法と基本の使い方を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの3Dライブラリ「Three.js」の使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

3Dライブラリ「Three.js」の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

Three.jsとは

まずは、公式サイト(https://threejs.org/)を見てみましょう。ここで紹介されているように、”Three.js”を使って様々な表現が可能になっています。ただ、ここまでの表現を行うには、学ぶべき内容は多岐にわたりますので、今回は、本当にさわりの部分で立体の表現のみを扱いたいと思います。

 

Three.jsのダウンロード方法

公式サイト(https://threejs.org/)からダウンロード出来ます。

ダウンロードした「three.js-master.zip」の中にの「three.js-master\build」に「three.js」がありますので、これを利用して下さい。ダウンロードしなくても、CDNでも利用出来ます。

https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Three.jsの使い方

まず、概要を理解しましょう。映画撮影の現場を想像してみて下さい。そこには、撮影する状況があり、そこに役者や背景などが存在ます。

そして、それを撮影するカメラとよりよく見せるための照明が存在しています。これを「Three.js」の用語と照らし合わせると

  • 撮影する状況:シーン(Scene)
  • 役者や背景 :モデル(Model)
  • カメラ   :カメラ(Camera)
  • 照明    :ライト(Light)

となります。

「Three.js」を使いこなすには、これらを自身で操作し撮影していく必要があります。では、具体的に考えていきましょう。まずは、状況を整えましょう。

映画撮影などでは、撮影場所を準備するのにロケを行う必要がありますが、コンピュータの世界では、

const scene = new THREE.Scene();

の一つで、撮影現場を用意できます。続いて、役者を準備しなければいけませんね。役者の姿形を決めて衣装を用意する必要があります。

「Three.js」では、役者(Model)を作成するのに、姿形(ジオメトリ(Geometory))を決めて、衣装(マテリアル(Material))を用意します。

※Modelの事をメッシュ(Mesh)とも言います。

さて、舞台と役者は整いました。次にカメラを用意します。カメラを用意する時は、位置も合わせて知っていしてあげます。最後に、照明を用意して完了です。

ただ、これだけで撮影が終わるわけではありません。撮影後の編集が必要になります。3Dの世界での情報を2D(ブラウザ上)に描写してあげる事が必要になるというわけです。

これをレンダー(Renderer)と言い、下記の様に書きます。

renderer.render(scene, camera);

 

実際に書いてみよう

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="js/controls/OrbitControls.js"></script>
  </head>
  <body>
    // キャンバスをHTML上に指定します
    <canvas id="myCanvas"></canvas>
    <script>
      // ページの読み込みを待つ
      window.addEventListener('load', init);
      function init() {
        // サイズを指定
        const width = 900;
        const height = 500;
        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: document.querySelector('#myCanvas')
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        // シーンを作成
        const scene = new THREE.Scene();
        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        camera.position.set(0, 0, +1000);
        // カメラコントローラーを作成
        const controls = new THREE.OrbitControls(camera);
        // 箱を作成
        const geometry = new THREE.BoxGeometry(300, 300, 300);
        const material = new THREE.MeshNormalMaterial();
        const box = new THREE.Mesh(geometry, material);
        // シーンに追加
        scene.add(box);
        //球体を作成
        const geometry2 = new THREE.SphereGeometry(20);
        const material2 = new THREE.MeshPhongMaterial({color: 0x6699FF});
        const sphere = new THREE.Mesh(geometry2, material2);
        // 位置を設定
        sphere.position.set(250,250,250);
        // シーンに追加
        scene.add(sphere);
        // 平行光源を作成
        const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
        directionalLight.position.set(1, 1, 1);
        // シーンに追加
        scene.add(directionalLight);
        tick();
        // 毎フレーム時に実行されるループイベントです
        function tick() {
          // 箱を少しずつ回転させます
          box.rotation.y += 0.01;
          renderer.render(scene, camera);
          // レンダリングして表示させます
          requestAnimationFrame(tick);
        }
      }
    </script>
  </body>
</html>

 

まとめ

如何だったでしょうか?かなり簡単に3Dの表現が出来たかと思います。今回のサンプルで、基本的な操作として、下記の内容を実現しています。

  • シーンの中にオブジェクトを表示
  • 光源の作成
  • オブジェクトの自動移動
  • カメラワークの操作

実際にはもっと複雑な操作を行いますが、これをベースにしてみて下さい。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。