第11話「オブジェクトの解剖学！ GeometryとMaterialの二重奏」 • frontendBaby

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

注

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

登場人物紹介

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

第11話：オブジェクトの解剖学！ GeometryとMaterialの二重奏

カエル君: 「先生！僕が今まで作ってきた new THREE.Mesh() っていう命令…。あれって一体、何者なんだケロ？コンピュータの中に、本当にあの緑色の固い箱が存在しているわけじゃないケロよね…？夜中にこっそり動き出したりしないケロか？」

三郎先生: 「はっはっは！カエル君、心配しなくても大丈夫。夜中に動き出すのは、コードのバグか、君の夢の中だけだ。だが、素晴らしい疑問だ。3Dオブジェクトの本質、その魂に迫る時が来たようだね。」

オブジェクトは『魂』と『肉体』でできている

三郎先生: 「まず結論から言うと、我々が『オブジェクト』と呼んでいるMeshは、単一の存在ではない。それは常に、二つの要素が合わさって初めて成立する、二重の存在なんだ。」

Geometry（ジオメトリ）: オブジェクトの**『魂』であり、その『形』**を定義する情報だ。
Material（マテリアル）: オブジェクトの**『肉体』であり、その『見た目』**を定義する情報だ。

三郎先生: 「new THREE.Mesh(geometry, material) という命令は、まさに『魂』と『肉体』を結びつけ、一つの生命を誕生させる儀式なのさ。魂（Geometry）だけあっても、それは姿の見えない幽霊のようなもの。肉体（Material）だけあっても、形がなければただの絵の具のシミだ。両方があって初めて、我々の目の前にオブジェクトとして現れる。」

カエル君: 「魂と肉体！なんてロマンチックなんだケロ！じゃあ、その『魂』であるジオメトリの中身は、どうなってるんだケロ？」

Geometryの解剖：数値でできたハリボテの魂

三郎先生: 「いいかい、カエル君。ジオメトリは、中身がぎっしり詰まった粘土の塊ではない。それは、無数の三角形のポリゴンでできた、究極のハリボテなんだ。」

カエル君: 「ハリボテ！？」

三郎先生: 「そう。そして、そのハリボテの正体は BufferGeometry という、ただの数値データの巨大な入れ物だ。その中には、attribute（属性） と呼ばれる、頂点一つ一つが持つ情報が、ただの数字のリストとして延々と格納されている。」

position (位置): 『頂点1は座標(1,1,1)に、頂点2は座標(-1,1,1)に…』といった、全ての頂点のXYZ座標のリスト。これがなければ形にならない、最重要属性だ。
normal (法線): 『頂点1の面はこっち向き、頂点2の面はあっち向き…』という、面の向きの情報。これがないと、光の計算ができず、のっぺりした見た目になってしまう。いわば、顔の向きだね。
uv (UV座標): 『この画像のこの部分を、この三角形に貼り付けてくれ』という、テクスチャ（画像）を貼り付けるための2D座標。3Dモデルに服を着せるための、型紙のようなものさ。

カエル君: 「なるほど！オブジェクトの形って、結局は膨大な量の『数字のリスト』だったんだケロね！なんだか、ちょっとだけガッカリだケロ…。」

三郎先生: 「ははは、だがそのおかげで、我々はどんな形でも自由に創造できるんだ。その創造の方法も、一つじゃない。」

オブジェクト実装の多様性：創造の四段階

プリミティブ（お手軽定食）: BoxGeometryやSphereGeometryのように、Three.jsが用意してくれた基本図形を使う。注文すればすぐ出てくる、簡単で便利な方法だ。
手作業（こだわり職人）: 頂点の座標を自分で配列として定義し、BufferGeometryをゼロから作り上げる。完全な手作りなので、どんな奇妙な形でも作れるが、手間もすごいぞ。
外部ツール（プロの厨房）: Blenderのような専門ソフトで複雑なモデルを作り、GLTFLoaderで読み込む。これが最も一般的で強力な方法だ。プロのシェフが作った料理を取り寄せるようなものだね。
プロシージャル（錬金術）: 数式やアルゴリズムで、コードに形を自動生成させる。ボタン一つで毎回違う形のダンジョンを作ったり、複雑な地形を生成したり…。まさに魔法、あるいは錬金術だ！

Three.jsの限界：幻想の境界線

カエル君: 「じゃあ、本当に何でもアリなんだケロ！？限界はないの？」

三郎先生: 「もちろん、あるとも！我々は神ではないからね。Three.js、ひいてはブラウザで3Dを扱う上での限界を知ることは、とても重要だ。」

パフォーマンスの限界（胃袋の限界）: ブラウザが一度に扱える頂点の数には、当然限りがある。映画で使われるような何億ポリゴンもあるモデルをそのまま持ってきたら、ブラウザは満腹で動けなくなってしまう。常に『このモデル、もっとダイエットできないか？』と考えるのが、良い開発者の証だ。
物理シミュレーションの限界（幽霊の限界）: Three.jsのオブジェクトは、デフォルトではお互いをすり抜ける幽霊のような存在だ。衝突したり、坂を転がり落ちたりはしない。そういう『物理法則』をシミュレートするには、Rapier3DやCannon.jsのような、専門の『物理エンジン』という名の用心棒を雇う必要がある。
精度の限界（震える子犬の限界）: コンピュータが扱う数字には、実は限界がある。あまりにも広大な宇宙空間を作ったり、逆に顕微鏡レベルの小さな世界を作ろうとすると、座標の計算がだんだん不正確になってくる。その結果、遠くのオブジェクトがブルブルと震えだしたり、重なった面がチラチラと点滅したり（Z-fighting）する。まるで、カフェインを摂りすぎた子犬のようにね。

カエル君: 「なるほどケロ…。できることと、できないこと（あるいは、専門家を雇わないとできないこと）があるんだケロね。オブジェクトの正体から限界まで、全部スッキリしたんだケロ！」

三郎先生: 「その通り。オブジェクトとは、数値でできた魂に、光の計算式という肉体を与えた、我々が創造する『デジタル生命体』だ。その本質を理解すれば、君の創造の可能性は、それこそ無限大に広がるだろう。」

カエル君: 「デジタル生命体！カッコいいケロ！僕も、僕だけの最強のデジタル生命体を作ってみせるんだケローッ！」

（第12話へつづく）

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

注