Javascriptで3Dを扱えるThree.jsのはじめ方を解説!【ソースコード付き】

スポンサーリンク
Three.js

悩む人
悩む人

Three.js、どうやって始めればいいんだろう。

こういったお悩みを解決いたします。

Three.js の導入の仕方はもちろん、最も基本的な使い方をソースコード付きで解説いたします。

当記事を読むと、

  • Three.js がどういうものなのか分かる
  • Three.js 開発環境を整えることができる
  • 基本的な使い方をマスターできる
スポンサーリンク

Three.js とは

3次元を扱うためのJavascriptライブラリです。

公式サイト -> https://threejs.org/

ライブラリとは、ざっくりですが特定の機能を持つプログラムを外部に提供するものになるので、Three.jsを導入するだけで3次元を容易に扱うことができるようになるんです。

本来であれば、3次元空間の座標の計算であったり、回転の計算、光の当たり方など、複雑な計算が必要なものばかりです。

その複雑な計算のほとんどすべてをThree.jsのプログラムが担ってくれるというわけなんです。

すばらしいですね。

スポンサーリンク

Three.js を導入してみる

早速導入していきましょう。

まずは公式サイトにアクセスします -> https://threejs.org/

するとこのようなページが表示されると思います。

赤丸で囲った”download”をクリックしてください。

“three.js-master.zip”というzipファイルのダウンロードが始まったと思います。

ダウンロードが完了したら、自分の作業用フォルダに展開しましょう。

すると、作業用フォルダの中にthree.js-masterというフォルダが作成されていると思います。

中身はこんな感じになっておりますでしょうか。

これでThree.jsライブラリのすべてをローカルに保存することができたので、思い切り開発し放題です!

簡単なサンプルを作ってみる

せっかくですから、ついでに簡単なサンプルで動作確認してみましょう。

先ほどの”three.js-master”フォルダと同じ位置にhtmlファイルを作成しましょう。

こういう状態です。

あとは作成したhtmlファイルをいじるだけです。

以下、ソースコードです。

<!DOCTYPE html>
<html>
  <head>
    <title>three.js Sample</title>
    <meta charset="utf-8">
    <script src="./three.js-master/build/three.min.js"></script><!--three.jsライブラリの読み込み-->
  </head>
  <body>
    <script>
      const scene = new THREE.Scene();  //シーンを作成
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);  //カメラを作成
      const renderer = new THREE.WebGLRenderer(); //レンダラーを作成
      const boxGeometry = new THREE.BoxGeometry(100, 100, 100); //boxの形状データ
      const boxMaterial = new THREE.MeshNormalMaterial(); //boxの材質(マテリアル)情報
      const box = new THREE.Mesh(boxGeometry, boxMaterial); //形状と材質から実際の3Dオブジェクトを生成
      init();
      animate();

      function init(){    //初期化用関数
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        document.body.appendChild(renderer.domElement); //canvas要素をbodyタグに追加
        camera.position.set(0, 0, 500);
        scene.add(box);
      }

      function animate(){
        box.rotation.x += 0.001;
        box.rotation.y += 0.001;
        box.rotation.z += 0.001;
        renderer.render(scene, camera);
        requestAnimationFrame(animate); //毎フレーム呼び出すことで描画
      }
    </script>
  </body>
</html>

デモを見たい方はこちらをクリック(ページは遷移しません) ⇒

実際に描画する流れは、ざっくり以下の通りです。

上記のソースコードと見比べて流れを把握してみてください。

  1. シーンを作成する
  2. カメラを作成する
  3. レンダラーを作成する
  4. レンダラーをDOM要素に変換し、HTML要素として加える
  5. 描画したいメッシュやライトを作成する
  6. それらをシーンに追加する
  7. 毎フレームレンダリングする

デモ通りの動きが確認できましたでしょうか。

確認できましたら、問題なくThree.jsは動作しています。

まとめ

いかがでしたでしょうか。

今回は、

  • Three.js の導入
  • 簡単なサンプルの作成

を行いました。

Three.jsは機能が豊富でとても便利ですが、だからこそ使いこなすのが難しい面もあります。

いろいろとがむしゃらに試して、小さな失敗を重ねていくのが結局一番の近道だったりします。

以上です。

Three.jsの学習におすすめの書籍はコレ!

・はじめてのThree.js

この本には、Three.jsを用いてコンテンツを開発する際に、必要な情報がほぼすべて盛り込まれています。

Three.jsをここまで詳しく解説している本はおそらくこれしかないです。

私は大学4年生からの研究活動でThree.jsを用いていますが、初めての学習でこの本を使用しました。

自分が必要な情報をかいつまんでその都度学習することもできますが、私個人としては、一通り目を通してThree.jsでできることをざっと把握することをおすすめします。

なぜなら、できることの全貌を知っている方が、アイデアの幅が広がり設計・コーディングもしやすくなるからです。

ぜひ一度お調べになってみてはいかがでしょうか。

コメント

タイトルとURLをコピーしました