POSTED | 2020.02.12

「Three.js」について学ぶ　その２

WWEBのこと

WRITER : Sasayama Sayaka

美術館と美味しいものが大好きなクリエイター

プロフィールを見る

コーダーのさやさんです。

前回からだいぶ間が空いてしまったのですが、
再び『three.js』のお話をしようと思います。
https://apricot-design.com/staffblog/%e3%80%8cthree-js%e3%80%8d%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e5%ad%a6%e3%81%b6/

『three.js』は手軽に3Dコンテンツ制作のできるJavaScriptライブラリです。
前回はサンプルを元に実際に『three.js』でいろいろな3D表現を作り、
「こんな表現を作ることができる」ということを紹介しました。

前回、記述したJavaScriptのソースコードについて説明をしなかったので、
今回は少しソースコードの内容を説明したいと思います。

今回用意したサンプルはこちらです。

See the Pen
NWqGxXw by sasayama (@sasayama)
on CodePen.

前回作成したサンプルからコードをもう少し見やすくし、
アニメーションしていた部分を静止させました。

今回はこちらのjsのコードを順番に説明して、
『three.js』でどのように立体物を表現しているかをお伝えできればと思います。

サンプルの「JS」部分のコードは以下です。



// ページの読み込み後にWebGLの処理を呼び出して実行

window.addEventListener('load', init);
//WebGLの処理

function init(){
  //①レンダラーの準備-------------------------->
  //WebGLのレンダリング

  const renderer = new THREE.WebGLRenderer({

    //HREE.WebGLRendererクラスのコンストラクターには引数として、HTMLに配置したcanvas要素を指定

    canvas: document.querySelector('#myCanvas')

  });
  //レンダラーのサイズ

  const width = window.innerWidth;

  const height = 700;

  renderer.setPixelRatio(window.devicePixelRatio);

  renderer.setSize(width, height);
  //②シーンを作成する-------------------------->

  //(シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場)

  const scene = new THREE.Scene();

  scene.background = new THREE.Color( 0xffffff);//シーンの背景色
  //③カメラを作る（3Dではどの視点から空間を撮影するか）------->

  const camera = new THREE.PerspectiveCamera(45, 960 / 540);

  // カメラの初期座標を設定(x,y)

  camera.position.set(0, 0, +1000);
  //※ライトを作成-------------------------->

  //(※マテリアルの種類によってはライト（光源）が必要になる)

  // 環境光源を作成

  const light1 = new THREE.AmbientLight(0xFFFFFF, 1.0);

  scene.add(light1);  // シーンに追加
   // 平行光源を作成(物体に立体感が出る)

  // new THREE.DirectionalLight(色, 光の強さ)

  const light2 = new THREE.DirectionalLight(0xFFFFFF, 1);

  scene.add(light2);  // シーンに追加
  //④立方体を作る-------------------------->

  //ジオメトリ（物体の形）

  // new THREE.BoxGeometry(幅, 高さ, 奥行き)

  const geometry = new THREE.BoxGeometry(100, 200, 100);

  // マテリアルを作成（物体の見た目）

  const material = new THREE.MeshLambertMaterial({color: 0x6699FF});

  //ジオメトリ+マテリアル＝立方体（メッシュ）の作成

  // new THREE.Mesh(ジオメトリ,マテリアル)

  const box = new THREE.Mesh(geometry, material);
  //立方体の角度を変更

  box.rotation.x = THREE.Math.DEG2RAD * 45;

  box.rotation.y = THREE.Math.DEG2RAD * 45;
  // 立方体をシーンに追加

  scene.add(box);
  //⑤レンダリングする-------------------------->

  // ★★レンダリング（シーンとカメラの情報を追加して描写）

 renderer.render(scene, camera);

}

function init(){～から始まる部分以下が、
3Ｄ描写の主となる部分です。
ここから順番にソースコードを説明していこうと思います。

①レンダラー準備

レンダラーとは作成する3Ｄ物体を描写するためのものです。
テレビの画面とか、モニター的なものと説明すればわかりやすいかなと思います。

レンダラーを用意しなくては3Ｄ物体を画面に表示できません。
なので、以下の部分でまずレンダラーの準備（Canvas要素を描写エリアとして指定、サイズを指定）を行っています。



   //①レンダラーの準備-------------------------->
  //WebGLのレンダリング

  const renderer = new THREE.WebGLRenderer({

    //HREE.WebGLRendererクラスのコンストラクターには引数として、HTMLに配置したcanvas要素を指定

    canvas: document.querySelector('#myCanvas')

  });
  //レンダラーのサイズ

  const width = window.innerWidth;

  const height = 700;

  renderer.setPixelRatio(window.devicePixelRatio);

  renderer.setSize(width, height);

②シーンを作成する

次にシーンを作成します。
シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場です。
レンダラーがテレビやモニターだとしたら、シーンは撮影対象の舞台と表現すれば伝わるでしょうか。

①でレンダラというモニターを準備したら、
②ではシーンという撮影用の舞台を用意しています。



    //②シーンを作成する-------------------------->

  //(シーンとは3D空間のことで、3Dオブジェクトや光源などの置き場)

  const scene = new THREE.Scene();

  scene.background = new THREE.Color( 0xffffff);//シーンの背景色

③カメラを作る

モニター（レンダラー）と舞台（シーン）を用意したら、
舞台を撮影するカメラを用意します。

また、後述する「マテリアル」によっては3Ｄ物体を照らすライトが必要となるので、
ライトの用意もします。
（ライトについては「④3Ｄ物体を作る」の説明と一緒にするのが適切と思うのですが、
「④3Ｄ物体を作る」の説明が長くなってしまうのでここで先に説明させていただきます）



  //③カメラを作る（3Dではどの視点から空間を撮影するか）------->

  const camera = new THREE.PerspectiveCamera(45, 960 / 540);

  // カメラの初期座標を設定(x,y)

  camera.position.set(0, 0, +1000);
  //※ライトを作成-------------------------->

  //(※マテリアルの種類によってはライト（光源）が必要になる)

  // 環境光源を作成

  const light1 = new THREE.AmbientLight(0xFFFFFF, 1.0);

  scene.add(light1);  // シーンに追加

// 平行光源を作成(物体に立体感が出る) // new THREE.DirectionalLight(色, 光の強さ) const light2 = new THREE.DirectionalLight(0xFFFFFF, 1); scene.add(light2); // シーンに追加

ライト（光源）は、シーンに追加するのを忘れないようにしましょう。
シーンに追加しないと、以下のように物体は光に照らされずに黒いままとなります。
（※「マテリアル」の種類によってはライトがなくても見えるものもあります）

See the Pen
wvaKWGV by sasayama (@sasayama)
on CodePen.

④3Ｄ物体を作る

3Ｄ物体は「ジオメトリ」と「マテリアル」によって表現されます。
「ジオメトリ」とは物体の形のことで、四角形や球体などを指定することで形が決定します。
「マテリアル」は物体の見た目のことで、
色を指定したりテクスチャ（画像）を貼ることで見た目を決定できます。

今回「ジオメトリ」は立方体（BoxGeometry）を、「マテリアル」には色（カラーコード0x6699FF）を指定しています。

また、ライトの表現をわかりやすくするために
立方体に角度をつけています。

3Ｄ物体ははライトと同じくシーンに追加する必要があります。
シーンに追加しないと表示されないので注意しましょう。



  //④立方体を作る-------------------------->

  //ジオメトリ（物体の形）

  // new THREE.BoxGeometry(幅, 高さ, 奥行き)

  const geometry = new THREE.BoxGeometry(100, 200, 100);

  // マテリアルを作成（物体の見た目）

  const material = new THREE.MeshLambertMaterial({color: 0x6699FF});

  //ジオメトリ+マテリアル＝立方体（メッシュ）の作成

  // new THREE.Mesh(ジオメトリ,マテリアル)

  const box = new THREE.Mesh(geometry, material);
  //立方体の角度を変更

  box.rotation.x = THREE.Math.DEG2RAD * 45;

  box.rotation.y = THREE.Math.DEG2RAD * 45;

// 立方体をシーンに追加 scene.add(box);

ソースコードの説明は以上です。
まとめると、「three.js」での3Ｄ表現の基本は以下のような仕組みとなっていることがわかったと思います。

①レンダラーを準備
②シーンを作成
③カメラを準備
④ライトと3Ｄ物体を用意

勿論、まだまだここから3Ｄ表現は広がっていきます。
この先については私も学んでいる最中なので、さらに派生した驚きの表現については身に付いた後にご紹介できればと思います！

この記事をシェアする