第4話 「シーンの舞台裏！ 世界はツリーで出来ていた」

Three.js ってなんだろう？ カエル君と学ぶ、ブラウザ3Dの不思議な世界

注

この物語は、Three.jsを楽しく学ぶことを目的に、生成AIを活用して執筆されています。 技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。 あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。

---

登場人物紹介

• カエル君: 最近プログラミングを学び始めた元気なカエル。まだ知らないことばかりだけど、好奇心は人一倍。「〜ケロ」という口調が特徴。
• 三郎先生: 3DグラフィックスやWeb技術にとても詳しい物知り博士。どんな質問にも優しく答えてくれる。

---

第4話：シーンの舞台裏！ 世界はツリーで出来ていた

カエル君: 「先生、この前はありがとうございましたケロ！ 僕が作った立方体が、今もブラウザの中で元気にクルクル回ってるんだケロ！」

三郎先生: 「それは良かった。自分の書いたコードが動くのは、何よりの喜びだからね。」

カエル君: 「それで、また新しい疑問が湧いてきたんだケロ。前回、オブジェクトを scene.add(cube) っていう命令で『シーン』に追加したケロよね。この『シーン』って、結局ただの大きな『箱』みたいなものなんだケロか？ オブジェクトをポイポイ入れておくだけの…。」

三郎先生: 「ふふふ、カエル君、素晴らしい点に気づいたね。多くの人が最初はそう考える。だが、実はシーンは単なる箱ではない。それは、この3D世界のあらゆるものを管理するための、非常に賢い**『階層構造』**を持っているんだ。」

カエル君: 「かいそうこうぞう…？ なんだか難しそうだケロ。」

三郎先生: 「大丈夫。これを理解すると、もっと複雑で面白いものが作れるようになる。この構造のことを、専門用語でシーングラフ (Scene Graph) と呼ぶんだ。グラフと言っても、棒グラフのことではないよ。繋がりや関係性を表す『樹形図』のようなものだ。」

カエル君: 「樹形図…木の枝みたいに繋がっているイメージだケロ？」

三郎先生: 「その通り！ シーンは、その樹形図の『根っこ』にあたる。そして、scene.add(object) で追加したオブジェクトは、根っこから生えた最初の『枝』になる。さらに、オブジェクトに別のオブジェクトを add することで、枝からさらに細かい枝を生やすように、親子関係を作ることができるんだ。」

三郎先生: 「例えば、太陽の周りを地球が回っていて、さらに地球の周りを月が回っている、というようなモデルを考えてみよう。」

// シーン（根っこ）に太陽（親）を追加
scene.add(sun);

// 太陽（親）に地球（子）を追加
sun.add(earth);

// 地球（子）に月（孫）を追加
earth.add(moon);

カエル君: 「へぇー！ scene だけじゃなくて、オブジェクトにも add できるんだケロね！ これが親子関係…。」

三郎先生: 「うむ。そして、この親子関係が絶大な力を発揮する。もし、sun.position.x = 10 のように太陽を動かせば、どうなると思う？」

カエル君: 「えーっと…太陽だけが動くんだケロ？」

三郎先生: 「違うんだな。親である太陽が動くと、その子である地球、さらに孫である月も、すべて一緒についてくるんだ。まるで、大きな枝を揺らせば、そこに付いている小さな枝や葉っぱも一緒に揺れるようにね。」

カエル君: 「おおーっ！ それは便利だケロ！ 惑星の動きみたいな、複雑なアニメーションを作るのにピッタリだケロ！ ピョンピョン！」

三郎先生: 「その通り。そして、ここからがさらにディープな話だ。カエル君が moon.position.x = 2 と設定したとする。この『2』という座標は、月自身の絶対的な位置ではないんだ。」

カエル君: 「えっ！？ どういうことだケロ？」

三郎先生: 「それは、親である地球から見て『x方向に2』離れた位置、ということになる。これをローカル座標と呼ぶ。そして、シーン全体から見た月の最終的な位置をワールド座標と呼ぶんだ。」

カエル君: 「ろーかる…わーるど…。つまり、僕たちがオブジェクトに設定している位置は、あくまで『親から見た位置』ってことなんだケロか！」

三郎先生: 「その通りだ！ そして、renderer.render(scene, camera) という描画命令が出たとき、Three.jsの内部では、このシーングラフの根っこから全ての枝を順番にたどっていくんだ。そして、それぞれのオブジェクトのローカル座標を元に、親の位置、さらにその親の位置…と計算を重ねて、最終的なワールド座標を割り出している。この複雑な行列計算を、我々の見えないところで一瞬でやってのけているんだよ。」

カエル君: 「な、なるほど…。僕たちが『月を地球の周りで回す』という簡単な命令を書くだけで、Three.jsがその裏で、太陽系の中心から見た月の本当の位置を必死に計算してくれていたんだケロね…。」

三郎先生: 「そういうことだ。このシーングラフという賢い仕組みがあるからこそ、我々は複雑な3D空間を、直感的に、そして効率的に管理することができる。シーンは単なる箱ではなく、3D世界の秩序そのものを司る、骨格であり、神経網なんだよ。」

カエル君: 「シーンさん…ただの箱だなんて思ってごめんなさいなんだケロ…。奥が深すぎるケロ…。感動で、またピョンピョンが止まらないんだケローッ！」

三郎先生: 「はっはっは。その感動を忘れずにいれば、君はもっともっと素晴らしい世界を創造できるようになるだろう。さあ、次はどんな世界の構造を解き明かしてみようか。」

---

（第5話へつづく）