Three.jsの3Dが動かないときの確認順

AIに作ってもらった3Dモデルは表示されるのに、動かない。動いているのに角度の数字が変わらない。こうした問題は、部品の表示と状態の計算を分けて確認すると原因を絞りやすくなります。

最初に確認するのは「描画」と「更新」

Three.jsの画面は、シーンに物体を追加しただけでは更新され続けません。`renderer.setAnimationLoop()` に登録した関数などを使い、画面を描き直す必要があります。

画面が真っ白：import、WebGL、カメラ、描画開始の問題を疑う
物体は出るが止まる：アニメーションループと状態更新を疑う
物体は回るが数字は止まる：表示パネルが別の値を参照している可能性を調べる

まずブラウザの開発者ツールでConsoleを開き、最初の赤いエラーを確認してください。エラーがない場合は、次に更新する値をログで追います。

動きを一つの状態から作る

例えば立方体の回転角度を `state.angle` に保持します。毎フレームの経過時間を使って値を更新し、その値を3D部品とラベルに反映する構成にします。

const state = { angle: 0, speed: 0.6 };
function advance(dt) { state.angle += state.speed * dt; }
function applyState() {
  cube.rotation.y = state.angle;
  angleLabel.textContent = `${(state.angle * 180 / Math.PI).toFixed(1)}°`;
}
renderer.setAnimationLoop(() => {
  const dt = Math.min(clock.getDelta(), 0.05);
  advance(dt);
  applyState();
  renderer.render(scene, camera);
});

この例は `cube`、`renderer`、`clock` と、ページ上で取得した `angleLabel` が存在する前提です。ラベルのHTMLを用意していなければ `angleLabel.textContent` でエラーになります。

このように、コードの一部だけをコピーすると前提の要素が欠けることがあります。AIの提案を使うときは、どの変数やDOM要素が必要かも一緒に確認しましょう。

よくある不具合を原因別に切り分ける

回転が速すぎる：フレームごとに固定値を足していないか。経過時間dtとの積で更新する
位置が想定と違う：object.positionは親の座標系に対する値。親子関係を確認する
角度がずれる：rotationはラジアン。度を表示するなら180/Math.PIを掛ける
数値だけ止まる：ラベルを更新する関数が毎フレーム実行されているか調べる
一瞬だけ飛ぶ：時間差dtが極端に大きくなる場面や、複数箇所からの状態更新を確認する

動作しないときにカメラを動かして隠すと、問題の場所が分からなくなります。確認した数値と画面の差をメモし、原因が分かったところだけを修正します。

確認用の最小テストを作る

複雑なモデルの前に、回転角度を固定した状態で3つのケースを確認します。例えば角度0なら正面、π/2なら90度、πなら180度となることを見ます。

const cases = [0, Math.PI / 2, Math.PI];
for (const angle of cases) {
  cube.rotation.y = angle;
  console.log((angle * 180 / Math.PI).toFixed(0) + "度");
  renderer.render(scene, camera);
}

このコードは角度値の切り替えを確認する補助例です。各状態を視覚的に比較するには、コードを一度ずつ実行するか、スライダーなどで切り替えるUIを用意してください。瞬時にループを実行しただけでは、最終フレームしか見えないことがあります。