【初学者向け】Three.jsの概要とscene・camera・rendererについて

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はThree.jsの概要とscene・camera・rendererについてを解説します。
Three.jsを触ったことない方に向けて解説しますので、最後まで見ていただけると幸いです！

この記事では、以下の内容について詳しく解説します：

1. Three.jsの初期準備

対象読者

• Three.jsを使用したことのない方
• JavaScriptを用いたアニメーションに興味のある方

この記事で扱う内容、扱わない内容

この記事で扱う内容:

• Three.jsの概要
• 3D空間に物体を表示する原理

この記事で扱わない内容:

• JavaScriptの基本的な仕様方法

Three.jsの概要

WebGLをベースにした3Dグラフィックスを作成するためのJavaScriptライブラリです！
WebGLは直接扱うと複雑ですが、Three.jsを使うことで比較的簡単に3Dコンテンツを作成できるようになります！

WebGLとは？

WebGL（Web Graphics Library）は、Webブラウザ上で2Dおよび3DグラフィックスをレンダリングするためのローレベルなJavaScript APIです！
特徴は下記です

• ブラウザ内で直接3Dグラフィックスを描画できる
• プラグインのインストールが不要
• HTML5の<canvas>要素上で動作する

なぜThree.jsを使用するのか

1. 使いやすさ
   • WebGLを直接扱うよりもはるかに簡単な APIを提供してくれている
   • JavaScriptの知識があれば、3Dグラフィックスの作成が可能
   • 豊富なドキュメントとサンプルコードが利用可能
2. ライブラリがThree.jsしかない

上記の理由で3Dグラフィックを実装しようとすると現状Three.jsを使うことになると思います！

筆者が思うThree.jsの難しさ

簡単とは言ってもWebGLを扱うので少々いつも書いているJavaScriptとは勝手が違います！
理由としては普段僕らが使用しているのはJavaScriptはCPUに命令を出していますが、WebGLはGPUに命令を出します！

CPUの特徴

• 少量データを高速で計算させる

GPUの特徴

• 大量データを一気に計算させる

こんな違いがあります。
WebGLは座標計算など多くの計算を行うためGPUを主に仕様します。
そんなことで今まで触れてこなかった概念等が度々出現します。

また上記の他にZ軸を扱うこともあり2Dのアニメーションとは違い少々複雑な数学的な知識を必要とします。
逆に数学が得意だよって方は自由にアニメーションさせることができるなと感じます。

初期準備

今回はThree.jsを用いて3Dオブジェクトを表示する準備を解説します。
どのThree.jsを用いたプロジェクトでもほぼほぼ同じ記述になると思います。
ここからは3Dオブジェクトを表示させるための重要な概念を解説します。

3Dオブジェクトを表示する仕組み

Three.jsでは3Dオブジェクトを表示するための重要な概念が存在します。

• 【scene】シーン
  • 舞台なようなもの
• 【camera】カメラ
  • シーンを映す
• 【renderer】レンダラー
  • シーンとカメラをつなげる役割

想像し辛いと思うので図を作成しました。

3D空間にあるsceneをcameraが写しrendererで接続し表示するという流れになります。
この3つの重要な概念を必ず抑えるようにしましょう。
ここからはこの3つscene・camera・rendererの準備を行います。

Three.jsでscene・camera・rendererを準備する

では早速コードを記述してみたいと思います。

// シーン、カメラ、レンダラーの作成
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// レンダラーのサイズ設定
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Threeクラスからインスタンスを作成していきます。
1,2,3行目でscene・camera・rendererの作成をしています。
cameraのnew THREE.PerspectiveCameraの引数は下記です。

• 【第一引数】カメラの垂直方向の視野角
  • 75度が一般的です。
• 【第二引数】カメラの視野のアスペクト比（幅/高さ）
  • 通常はcanvas要素のサイズに合わせる
• 【第三引数】カメラが描画を開始する最小距離
  • 一般的に0.1や1など小さい値を使用
• 【第四引数】カメラが描画する最大距離
  • この距離より遠いオブジェクトは描画されない

ここは表示したい3Dモデルによって変わってきます。3Dモデルによって調整しましょう。

イメージし辛い方は下記図を確認してみて下さい。

では最後の7,8行目です。
ここでcanvas要素を生成しています。

• new THREE.WebGLRenderer()は内部で新しい<canvas>要素を作成
• この<canvas>要素はrenderer.domElementとしてアクセス可能
• document.body.appendChild()でその生成された<canvas>をDOMに追加

という記述になってます。

また、canvas要素を生成せず記述し指定することも可能です。下記はその例です。

// HTMLに既存のcanvas要素がある場合
const canvas = document.querySelector('#myCanvas');
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
});

これで準備が完了です。

ここからこのsceneに対して3Dモデルの追加(ジオメトリ・メッシュ・マテリアル)とsceneを明るくすく光源を追加していきます。

最後に

今回はThree.jsの初の解説をしてみました。
Three.jsは知るべき概念が存在しているため、一つずつ抑えておく必要があります！
次回は3Dオブジェクトの追加と表示まで行ってみたいと思います！

スポンサーリンク