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

はじめに

この記事の概要

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

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

• 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を主に使用します。
そんなことで今まで触れてこなかった概念等が度々出現します。

CPUとGPUについて

簡単に言うと、CPUは「スーパーカー」。少人数しか乗れないけどすごく速い。
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クラスからインスタンスを作成していきます。
2行目でscene、3行目でcamera、4行目で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要素を自動生成せず、既存のcanvas要素を指定することも可能です。下記はその例です。

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

これで準備が完了です。

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

さいごに

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