Three.jsで動く3Dを作る最初の一歩

ブラウザで3Dの機械が動く映像を見て、「自分でも作れるのかな」と思ったことはありませんか。複雑なエンジンを最初から再現する必要はありません。まずは立方体を回転させ、その動きを一つの数値から制御してみましょう。

3Dシミュレーターを作る前に知っておきたいこと

Three.jsはJavaScriptからブラウザの3D表示を扱うためのライブラリです。3Dの物体を置く「シーン」、見る位置を決める「カメラ」、画面に描く「レンダラー」が基本です。これらはThree.js公式の入門例でも使われています。

本格的な機械シミュレーターでは、部品を動かす数値と3D表示を一致させます。例えば歯車の角度を一つの値として保持し、画面上の回転と角度表示の両方をその値から計算する、という考え方です。

HTML：ブラウザに表示するページの土台
JavaScript：入力を受け取り、角度などの状態を計算する
Three.js：計算結果を3Dの部品として描く

準備：まずはローカルの開発環境を用意する

Node.jsとエディターを用意し、空のフォルダーでnpmを使ってThree.jsとViteを導入します。Viteは開発中にページを表示するためのツールです。導入手順や現行の推奨構成はThree.js公式のInstallationを基準にしてください。

npm install three
npm install --save-dev vite

HTMLに `<script type="module">import './main.js';</script>` を読み込ませ、`main.js` に次のコードを置きます。開発サーバーは `npx vite` で起動できます。`file://` で直接HTMLを開く方法は、モジュール読み込みの制約で失敗することがあります。

実践：立方体を回転させる

import * as THREE from 'three';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf5f7fa);
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
camera.position.set(2, 2, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
);
scene.add(cube);
let speed = 0.6; // radians per second
let phase = 0;
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  const dt = Math.min(clock.getDelta(), 0.05);
  phase += speed * dt;
  cube.rotation.y = phase;
  renderer.render(scene, camera);
});
window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

コードを開くと色の付いた立方体が回転する構成です。動きは `speed` と `phase` という値から決まり、毎フレームの経過時間 `dt` を足して角度を更新します。`speed = 0` に変更すると停止し、負の値にすれば回転方向が逆になります。

ここで確かめたいのは「見た目を直接動かす」のではなく、数値を更新してその結果を表示していることです。JavaScriptコンソールでエラーが出るときはファイル名、起動方法、importの設定を確認してください。

機械らしいシミュレーターに近づける設計

次の段階では、速度スライダーと角度表示を加えます。角度と表示値を別々に計算すると食い違いが起きるので、同じ `state` から導きます。

// 更新する値は一つ。見た目と表示は同じ状態から求める
const state = { angle: 0, speed: 0.6 };
function advance(dt) { state.angle += state.speed * dt; }
function syncView() {
  cube.rotation.y = state.angle;
  document.querySelector('#angle').textContent =
    `${(state.angle * 180 / Math.PI).toFixed(1)}°`;
}
// animation loop 内で advance(dt) -> syncView() -> render() を順に呼ぶ

これは「単一の状態を正とする」設計の小さな例です。ただし、現実の機械の力や摩擦まで忠実に再現できるわけではありません。物理的に正確なシミュレーションには、別途数式・測定値・検証が必要です。