はじめに

以前、React Three Fiber(R3F)に関する記事を投稿しました。ReactではThree.jsを容易に扱えるとの噂で、触ってみましたが、そもそもThree.jsでできることが何なの分からず、環境構築止まりになってしまいました。そこで、本記事ではThree.jsを基礎から学びつつ、備忘録として記事にまとめてみたいと思います。

• Three.js勉強1: 環境構築
• Three.js勉強1.5: 環境構築(ローカル編)
• Three.js勉強2: シーンの主要要素
• Three.js勉強3: 3Dオブジェクトの描画
• Three.js勉強4: アニメーションと再レンダリング

前回の記事

主要な構成要素

Three.jsでオブジェクトを描画するにあたり次の3つが必要です。

• シーン
• カメラ
• レンダラー

シーン

シーングラフという木構造で3Dシーンを構成します。Sceneオブジェクトの他にシーングラフの構成要素は、Object3DオブジェクトやLightオブジェクト、Meshオブジェクトや、Groupオブジェクトなどがあります。

カメラ

シーングラフとは独立したオブジェクトです。カメラには、複数の種類があります。

• PerspectiveCamera
• OrthographicCamera
• CubeCamera
• ArrayCamera

レンダラー

Three.jsの主要なオブジェクトとなります。レンダラーにシーンとカメラを渡すことで、3Dシーンを2D画像としてキャンバスにレンダリングします。

実装

主要な構成要素であるレンダラーとシーン、カメラをそれぞれ実装していきます。

シーン

次のコードでシーンオブジェクトのインスタンスを生成します。

const シーン = new THREE.Scene();

カメラ

次のコードでPerspectiveCameraという種類のカメラを生成します。

const カメラ = new THREE.PerspectiveCamera( 視野範囲, アスペクト比, 近面, 遠面 );

補足: 近面と遠面

近面と遠面の間にある描画オブジェクトがレンダリングの対象となります。例えば、カメラに対して、近面より近い座標、あるいは遠面より遠い座標にある描画オブジェクトは画面上に表示されません。基本的には表上にある値で問題がないようですが、描画処理が重く感じた時に調整します。

レンダラー

レンダラーを実装するには次の流れとなります。

1. レンダラーの作成
2. レンダリングするサイズの設定
3. レンダラーをHTMLへ反映

レンダラーの作成

次のコードでレンダラーオブジェクトのインスタンスを生成します。

const レンダラー = new THREE.WebGLRenderer();

レンダリングするサイズの設定

次のコードで描画する領域の大きさを設定します。

レンダラー.setSize( 横幅, 高さ, 更新スタイル );

補足: 更新スタイルについて

第三引数「更新スタイル」はデフォルト引数であり、省略が可能です。その場合はTrueが渡され、高解像度の設定となります。

レンダラーをHTMLへ反映

次のコードでレンダラーをHTMLへ反映します。

document.body.appendChild( レンダラー.domElement );

ソースコード

次に今回の内容をまとめたソースコードを示します。

import * as THREE from 'three';

/* シーンの実装 */
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);           // HTMLへの追加

動作結果

現在は、描画するオブジェクトを実装していないので何も映っていません。白いページが表示されているだけです。

次回の記事

参考

• シーンの作成

• シーングラフ