Three.jsの最初の一歩として、回転するカラフルなキューブを作ります。
コードは15行以内。ブラウザだけで動作し、インストールは不要です。
完成デモ
See the Pen Three.js Rotating Cube by Masahiko Sakai (@Masahiko-Sakai-the-decoder) on CodePen.
コード（全15行）
HTML
<!-- 何も書かなくてOK。Three.js が canvas を自動生成します -->
CSS
body {
margin: 0;
background: #000;
}
JavaScript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, 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);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
コードのポイント解説
1. Scene・Camera・Renderer の3点セット
Three.js で何かを表示するには、必ずこの3つを用意する必要があります。それぞれの役割を現実の映像制作に例えると理解しやすいです。
| クラス | 現実での例え | 役割 |
|---|---|---|
Scene |
撮影セット | 3D オブジェクトやライトを配置する空間 |
Camera |
カメラ | どの角度・視野でシーンを見るかを決める |
Renderer |
映写機 | Scene を Camera の視点で計算し、画面に描く |
const scene = new THREE.Scene();
まず 3D 空間（舞台）を作ります。この中にキューブやライトをあとから追加していきます。
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
引数は左から順に以下の意味です。
-
75— 視野角。人間の視野に近い 60〜75 が一般的です。大きくするほど広角になります -
innerWidth / innerHeight— 画面のアスペクト比。横長・縦長に合わせて自動調整されます -
0.1— near。これより近いものは描画しません（カメラにくっつくほど近い物体を除外） -
1000— far。これより遠いものは描画しません（遠すぎて見えない物体を除外）
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
WebGLRenderer が実際の描画を担います。antialias: true にするとエッジのギザギザが滑らかになります。
renderer.domElement は Three.js が自動生成する <canvas> 要素です。appendChild でページに追加することで画面に表示されます。
2. Geometry・Material・Mesh の3点セット
3D オブジェクトを作るにも3つの要素が必要です。
| クラス | 役割 | 例え |
|---|---|---|
Geometry |
形（頂点・面の情報） | 粘土の型 |
Material |
見た目（色・質感・光の反射） | 塗料 |
Mesh |
形 + 見た目を合わせたもの | 完成した粘土細工 |
const geometry = new THREE.BoxGeometry(1, 1, 1);
BoxGeometry は直方体を作るクラスです。引数は (幅, 高さ, 奥行き) です。すべて 1 なので一辺が 1 の正六面体になります。
const material = new THREE.MeshNormalMaterial();
MeshNormalMaterial は各面の法線ベクトルを RGB の色として表示します。ライトの設定が不要でカラフルに見えるため、Three.js をすぐ試したいときに最適です。
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
Mesh で形と見た目を組み合わせ、scene.add() でシーンに追加します。add() を呼ぶまでは画面に表示されません。
camera.position.z = 3;
カメラの Z 軸方向（手前）に 3 だけ移動させます。デフォルトではカメラもキューブも原点（0, 0, 0）にいるため、カメラを引かないとキューブの内側から見ることになってしまいます。
3. アニメーションループ
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
requestAnimationFrame(animate) はブラウザに次のフレームが描画されるタイミングで animate 関数を呼んでくださいと伝えます。通常はモニターのリフレッシュレートに合わせて 1 秒間に 60 回呼ばれます。
毎フレームごとに rotation.x と rotation.y を 0.01 ラジアンずつ増やすことで、キューブが滑らかに回転します。最後に renderer.render(scene, camera) で現在の状態を画面に描画します。
カスタマイズしてみよう
形を変える
// 球
const geometry = new THREE.SphereGeometry(1, 32, 32);
// 第2・3引数は経線・緯線の分割数。多いほど滑らかになる
// ドーナツ（トーラス）
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
// 引数: (外半径, チューブの太さ, チューブの分割数, 円周の分割数)
// 円錐
const geometry = new THREE.ConeGeometry(1, 2, 32);
// 引数: (底面の半径, 高さ, 分割数)
色を固定する
// オレンジ
const material = new THREE.MeshBasicMaterial({ color: 0xff6600 });
// 水色
const material = new THREE.MeshBasicMaterial({ color: 0x00ccff });
// ワイヤーフレーム（骨格だけ表示）
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
回転速度・方向を変える
// 速く回す
cube.rotation.y += 0.05;
// Z 軸でも回す（コマのように）
cube.rotation.z += 0.01;
// 逆方向に回す
cube.rotation.y -= 0.01;
まとめ
Three.js の基本構造は以下の 2 セットで成り立っています。
シーン構築: Scene + Camera + Renderer
オブジェクト: Geometry + Material → Mesh → scene.add()
この構造を覚えておくと、球・ドーナツ・パーティクルなど何を作るときも応用できます。
この記事の内容をさらに深く学びたい方へ
Three.js ではキューブ以外にも、シェーダー・パーティクル・物理演算・WebXRなど多彩な表現が可能です。体系的に学べる講座を公開しています。