thumb_threejs_01

Three.jsとは

Three.jsとは、JavaScriptを介して3次元コンピュータグラフィックス（CG）を描画するJavaScriptライブラリを指します。HTML5の規格に従っており、ウェブブラウザ上で簡単に2次元や3次元のグラフィックスに対応します。

【参考】：three.js

Three.jsのメリット

Three.jsは、ウェブの標準技術の上に実装されているため、主要なウェブブラウザ上でプラグインを追加することなく、そのまま利用することができます。またWebGLという3Dグラフィックス APIをラッピングしており、簡素なコードで手軽に3次元コンピュータグラフィックスを描画することができます。

分かりやすく言うとThree.jsは、これまで複雑な処理や手法が必要であった3次元コンピュータグラフィックスを、専門知識を持たずに直観的に使用できる優れたソフトウェアと言えます。

【参考】：three.js

JavaScriptの概要

JavaScriptは、ウェブアプリの開発に用いるオブジェクト指向スクリプト言語です。HTML（HyperText Markup Language）と連携するため、DOM（Document Object Model）APIを使用してウェブブラウザからバックエンドまでのウェブアプリケーション全般に対応します。

言語仕様は、ECMAScriptとして標準化されており、非常に汎用性が高いプログラミング言語です。

【参考】：ECMA-262 ECMAScript® 2023 language specification

JavaScriptライブラリとは

JavaScriptライブラリとは、JavaScriptを用いたアプリケーション開発をより効率的に行うために、あらかじめ用意されたソフトウェア群を指します。JavaScriptの画面出力などの統一性を持たせるなどの場合に、共通のJavaScriptライブラリを用いると効果的です。

JavaScriptの代表的なライブラリとしては、jQueryやReactがあります。そのほか、Vue.jsやAngular JSなどのJavaScriptフレームワークも公開されており、多くのユーザに利用されています。

【参考】：jQuery
【参考】：React
【参考】：Vue.js
【参考】：Angular

そもそも3次元コンピュータグラフィックスとは

3次元コンピュータグラフィックスとは、3次元の立体的な仮想的な物体を、コンピュータで演算することで平面上に奥行きや質感のある画像を表す手法を表します。用語が長いので、3DCGと呼ぶ場合もあります。

従来は、大型計算機などの演算能力が必要でしたが、プロセッサの性能向上とGPUと呼ばれるグラフィックス専用プロセッサが、一般化されたことで高性能化が可能となり、誰でも3D画像を作成することが可能となりました。このことから、物性シミュレーションや3Dゲームなど多方面で利用されています。

WebGLとは

WebGLとは、Web Graphics Libraryの略で、OpenGL ESベースの低レベル 3Dグラフィックス API を指します。HTML5に実装されるCanvas要素上で、画像処理や画像効果などをGPUアクセラレータを用いてグラフィックス表示できる特徴があります。

WebGLは、多くの主要ブラウザベンダーにより策定されており、Apple SafariやGoogle Chrome、Microsoft Edge、Mozilla Firefoxなどのウェブブラウザで、プラグインなしに3D描画が可能となります。

【参考】：WebGL LOW-LEVEL 3D GRAPHICS API BASED ON OPENGL ES

OpenGL ESとは

OpenGL ESとは、OpenGL for Embedded Systemsの略で、モバイルデバイスなどの組み込み用3次元コンピュータグラフィックス APIを指します。従来よりデスクトップ環境で使用される、OpenGLのサブセットです。

OpenGL ESは、プレイステーション3やニンテンドー3DSの他に、iOSやAndroidでも採用されています。GPUアクセラレータのようなグラフィックスハードウェアをサポートしますので、簡単に3次元コンピュータグラフィックスの高速描画に対応させることができます。

【参考】：OpenGL ES Overview

Three.jsの概要

Three.jsを使用することで、ウェブ上に簡単に3Dコンピュータグラフィックスを表示することができます。

Three.jsは、プラットフォームに依然せずに相互に実行可能なアプリケーション開発を目指して、 Adobe Flashの環境からJavaScriptに移行したことから、現在の利用拡大に繋がっています。ドキュメントの多くは日本語化されており、順に確認すると良いでしょう。

【参考】：Three.jsの基礎知識

Three.jsの主要機能

Three.jsの主要機能としては、メッシュ（網目）やマテリアル（材質）、テクスチャ（質感や模様）、スキン（皮膚）、スケルトン（骨格）、アニメーション（フレーム再生）、ライト（光源）、カメラ（仮想カメラ）などがあります。

この他にも、エフェクト（効果）や、平面・立方体・球体・トーラス・3Dテキストなど、3DCG作成に必要となる機能がカバーされています。

【参考】：Three.jsのプリミティブ

Three.jsのインストール

Three.jsのインストールには、2つの方法があります。

1つ目は、npmの利用です。Three.jsのインストールツールは、npmが推奨されています。npmは、JavaScriptのパッケージ管理システムです。サーバーサイドJavaScript環境であるNode.jsのパッケージ管理システムとしても、用いられています。

npmからThree.jsをインストールするには、”npm install three”を実行します。

2つ目は、CDNや静的ホスティングからインストールする方法です。ここでは、サイトに格納されている”three.module.js”を指定して、”import”時に利用します。

ライブラリの読み込みは、次のように行います。

<script type="module">
    import * as THREE from 'three';
    const scene = new THREE.Scene();
</script>

【参考】：Three.js Installation
【参考】：npm
【参考】：Node.js

Three.jsで最初に何かを表示する

Three.jsで最初に何かを表示するには、シーン（scene）、カメラ（camera）、レンダー（renderer）の3つが必要です。

シーンは、状況が描写されている映像のオブジェクトで、”THREE.Scene()”を使います。カメラは、シーンを描画するときに、何が見えるか決定する仮想のカメラで、”THREE.PerspectiveCamera()”などいくつかの種類があります。

レンダーは、カメラのアングルに基づいて演算処理し描画するもので、”THREE.WebGLRenderer()”を使います。

【参考】：Three.js Creating a scene
【参考】：Three.jsの基礎知識

Three.jsで扱うデータ形式

Three.jsで扱うデータ形式は、FBX、Collada、OBJなどに対応しますが、glTF（GL Transmission Format）が推奨されます。推奨する理由は、データの変換やロードが高速であるためです。「.GLB 」と「 .GLTF」のフォーマットに対応します。

【参考】：Three.js Loading 3D models

Three.jsのサンプルを確認する

Three.jsでは、多くのサンプルをサイトに公開しています。最初は、プログラミングに慣れるためにも、まずは公開サンプルを操作して使い方を学ぶのが良いでしょう。150以上のサンプルコードも掲載されています。

【参考】：Three.js exapmles

以下のサイトでは、Webpackを使ったサンプルや、初心者向けサンプル集もリンクが掲載されています。興味に応じて確認することをおすすめします。

【参考】：Three Seed Online Demo
【参考】：Three Seed Official
【参考】：Three.js Examples

Three.jsの概要が理解できたら実際に使ってみよう

サンプルを見ると、徐々にThree.jsでできることが分かってきます。マウス操作で簡単に3次元の画像を回転させるなど、高速描画には驚かされます。Three.jsのサンプルコードを実際に試してみることをおすすめします。このような3次元処理は、実際に自身の環境で操作させてみるとより理解が深まるでしょう。