Webサイトで3D表現をやってみたい。
でも WebGL は難しそう。
そんなときにまず名前が挙がるのが Three.js です。
Three.js は、ブラウザ上で3D表現を扱うための JavaScript ライブラリです。
本来 WebGL を直接扱うには、描画の仕組みや行列計算、カメラ、ライト、マテリアルなど多くの知識が必要になります。
Three.js を使うと、それらをかなりシンプルに書けるようになり、3Dの世界にぐっと入りやすくなります。
この記事では、Three.js とは何か、何ができるのか、なぜ人気なのかを初心者向けにわかりやすくまとめます。
Three.jsとは
Three.js は、JavaScript で 3D グラフィックスを描画するためのライブラリです。
ブラウザ上で動作し、PCでもスマホでも比較的リッチな3D表現を実現できます。
イメージとしては、WebGL を扱いやすくしてくれる便利なラッパーです。
WebGL を素のまま書く場合は、かなり低レイヤーな処理が必要です。
一方で Three.js では、次のような3D開発に必要な要素を整理された形で扱えます。
- シーン
- カメラ
- ライト
- オブジェクト
- マテリアル
- アニメーション
- モデル読み込み
- 影やポストエフェクト
つまり、3Dに必要な基本セットが最初から使いやすくまとまっているのが Three.js の大きな魅力です。
Three.jsで何ができるのか
Three.js を使うと、かなり幅広い表現ができます。
たとえば次のようなものです。
- くるくる回る3Dオブジェクト
- 製品紹介ページの3Dモデル表示
- Webサイトのヒーローセクションに動く背景演出
- マウス操作で動かせる3D空間
- ゲーム風のインタラクティブ表現
- 建築やインテリアの簡易ビジュアライズ
- データの3D可視化
- ARやVRにつながる表現の入り口
最近では、企業サイトやLP、ポートフォリオでも Three.js を使った演出を見かけることがかなり増えました。
単なる装飾だけでなく、商品理解やブランド体験を高める表現として使われるケースも多いです。
なぜThree.jsが人気なのか
Three.js が人気な理由は、単に3Dができるからではありません。
学びやすさと表現力のバランスがかなり良いからです。
1. WebGLを直接書くより圧倒的に始めやすい
Three.js の最大の魅力はここです。
WebGL を直接触ると、かなり早い段階で難しさにぶつかります。
Three.js なら、立方体を表示するだけなら比較的短いコードで実現できます。
3D初心者にとって、この最初の成功体験はかなり大きいです。
2. 情報が多い
Three.js は利用者が多く、解説記事やサンプル、教材も豊富です。
詰まったときに検索しやすいのは、学習コストを下げるうえでかなり重要です。
3. 表現の幅が広い
簡単な図形表示だけでなく、ライティング、影、アニメーション、パーティクル、モデル読み込み、ポストエフェクトなど、かなり本格的なことまでできます。
入門しやすいのに、奥まで深く使えるのが Three.js の強みです。
4. フロントエンドと相性が良い
JavaScript ベースなので、HTML / CSS / React / Vue など普段のフロントエンド開発とつなげやすいです。
特に React を使っている人なら、React Three Fiber という選択肢もあり、Three.js の世界に入りやすいです。
Three.jsの基本構成
Three.js を理解するうえで、まず押さえたいのが次の3つです。
シーン
3D空間そのものです。
オブジェクトやライトなどを置く場所だと思えばOKです。
カメラ
どこから3D空間を見るかを決めるものです。
現実世界でいうカメラと同じような役割です。
レンダラー
シーンとカメラの情報をもとに、実際にブラウザへ描画する仕組みです。
この3つをベースに、オブジェクトを追加し、ライトを置き、アニメーションをつけていくのが基本の流れです。
最小構成のサンプル
Three.js では、最初の一歩として立方体を表示するサンプルがよく使われます。
雰囲気だけでも見てみると、何をしているのかイメージしやすくなります。
import * as THREE from 'three'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
camera.position.z = 5
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
renderer.render(scene, camera)
}
animate()
このコードでは次のことをしています。
- シーンを作る
- カメラを作る
- レンダラーを作る
- 立方体を追加する
- 毎フレーム回転させて描画する
これだけでも、3D空間にオブジェクトを置いて動かすという Three.js の基本が詰まっています。
Three.jsを学ぶと何が嬉しいのか
Three.js を学ぶメリットは、単に3Dが作れることだけではありません。
表現の幅が一気に広がる
普段のHTML / CSS / JavaScriptだけでは作れない表現ができるようになります。
動きのあるサイトや、印象に残るポートフォリオ、プロダクトの魅力を伝えるページなど、制作の幅が一気に広がります。
差別化しやすい
Web制作では、ある程度テンプレート化された表現になりやすい部分があります。
その中で3D表現を扱えると、見た目のインパクトでも体験設計でも差別化しやすいです。
3Dの考え方が身につく
Three.js を通じて、座標、カメラ、ライト、マテリアル、アニメーションといった3Dの基本概念を学べます。
これらは Three.js 以外の3D技術に進むときにも役立ちます。
逆にThree.jsの難しいところ
もちろん、Three.js は魔法のライブラリではありません。
学びやすいとはいえ、3D特有の難しさはあります。
たとえば次のようなポイントです。
- x, y, z の3軸を意識する必要がある
- カメラの位置関係で見え方が大きく変わる
- ライトがないと意図した見た目にならない
- 数学的な考え方に少し触れる場面がある
- パフォーマンスを意識する必要がある
- モデルデータやテクスチャの扱いでつまずきやすい
ただし、これは3D全般に共通する難しさです。
むしろ Three.js は、その難しさをかなりやさしくしてくれている側です。
どんな人に向いているか
Three.js は次のような人に特におすすめです。
- フロントエンドの表現力を上げたい人
- ポートフォリオをより印象的にしたい人
- WebGL に興味はあるけど難しそうで止まっていた人
- 3Dサイトやインタラクティブ表現を作りたい人
- 将来的にゲームやXRにも興味がある人
逆に、まずは JavaScript 自体がまだかなり不安という人は、先に JavaScript の基本を軽く押さえてから入ると学びやすいです。
Three.jsの学習ロードマップ
これから始めるなら、次の順番がかなりおすすめです。
1. 基本構成を理解する
まずは次のキーワードを理解します。
- Scene
- Camera
- Renderer
- Geometry
- Material
- Mesh
ここが土台です。
2. オブジェクトを動かす
回転、移動、拡大縮小などのアニメーションを試します。
この段階でかなり楽しくなってきます。
3. ライトとマテリアルを学ぶ
見た目のクオリティが一気に変わるポイントです。
3Dらしさが増します。
4. 操作できるようにする
マウスやスクロールと連動させると、Web表現として一気に実践的になります。
5. モデル読み込みに進む
glTF などの3Dモデルを読み込めるようになると、実務や作品制作でできることが大幅に増えます。
Three.jsはこんな場面で活躍する
Three.js は趣味の作品だけでなく、実務でも活躍します。
企業サイトの演出
ブランドの世界観を伝えるために、背景演出やメインビジュアルで使われます。
商品紹介
製品を360度見せたり、分解表示したり、色を切り替えたりといった体験に向いています。
ポートフォリオ
動きのある印象的なサイトを作りたい人にはかなり相性が良いです。
教育や可視化
概念を3Dで見せることで、理解しやすくなるケースがあります。
図や静止画では伝わりにくいものに向いています。
まとめ
Three.js は、ブラウザで3D表現を実現するための JavaScript ライブラリです。
WebGL を直接扱うよりもずっと入りやすく、それでいて本格的な表現まで広く対応できます。
3Dというと難しそうに感じるかもしれませんが、Three.js を使うことで最初のハードルはかなり下がります。
まずは立方体を表示して回してみるだけでも、3D開発の面白さは十分に味わえます。
フロントエンドの表現力を広げたい人、他のサイトと差をつけたい人、インタラクティブな体験を作りたい人にとって、Three.js はかなり面白い選択肢です。
少しでも興味があるなら、ぜひ触ってみてください。
最初の一歩を踏み出すだけで、作れるものの景色がかなり変わります。
Three.jsをしっかり学びたい方へ
Three.js を基礎から実践までまとめて学びたい方向けに、Udemyで講座を公開しています。
以下のリンクは、30日間使える半額クーポン付きです。