第3話「カエル君、初めての3Dオブジェクト！」 • frontendBaby

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

注

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

登場人物紹介

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

第3話：カエル君、初めての3Dオブジェクト！

カエル君: 「先生！前回の話を聞いてから、もうウズウズしてるんだケロ！早く僕も『魔法の翻訳機』、Three.jsを使ってみたいんだケロ！」

三郎先生: 「おぉ、カエル君。すごい熱意だね。よろしい、では今日は実際に簡単な3Dの世界を創造してみよう。まずは、真っ白なキャンバスを用意するところからだ。」

三郎先生: 「まず、こんな簡単なHTMLファイルを用意するんだ。」

<!DOCTYPE html>
<html>
<head>
    <title>カエル君の初めてのThree.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://unpkg.com/three@0.165.0/build/three.min.js"></script>
    <script>
        // ここに魔法の呪文を書いていくよ！
    </script>
</body>
</html>

カエル君: 「ふむふむ。Three.jsのライブラリを読み込んで、準備は万端だケロ！」

三郎先生: 「その通り。さて、Three.jsで3D空間を作るには、基本的に３つのものが必要になる。それが『シーン』『カメラ』『レンダラー』だ。」

シーン (Scene): 3Dオブジェクトや光源を配置する、いわば仮想世界の『舞台』だね。
カメラ (Camera): その舞台をどこから、どのように見るかを決める『視点』だ。
レンダラー (Renderer): シーンとカメラの情報をもとに、実際にブラウザに絵を描き出す『画家』の役割をする。

カエル君: 「舞台と、視点と、画家さん…なるほど、分かりやすいケロ！」

三郎先生: 「では、実際にコードを書いてみよう。」

// 1. シーン（舞台）の作成
const scene = new THREE.Scene();

// 2. カメラ（視点）の作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 3. レンダラー（画家）の作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. オブジェクト（役者）の作成
const geometry = new THREE.BoxGeometry(1, 1, 1); // 形：立方体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 素材：緑色
const cube = new THREE.Mesh(geometry, material); // 形と素材を組み合わせてメッシュを作成

// 5. シーンにオブジェクトを追加
scene.add(cube);

// 6. レンダリング（描画）
renderer.render(scene, camera);

カエル君: 「うわーっ！本当に緑色の四角い箱が画面に出てきたんだケロ！すごい、すごいケロ！ピョンピョン！」

三郎先生: 「おめでとう、カエル君！これが君が創造した最初の3Dオブジェクトだ。」

カエル君: 「でも先生、不思議なんだケロ。僕はただ new THREE.BoxGeometry() って書いただけなのに、どうしてブラウザはこんなに綺麗な立方体を描けるんだケロ？このコードが、どうやって先生が前に話していたGPUに届いているんだケロ？」

三郎先生: 「素晴らしい疑問だ、カエル君！その好奇心こそが、理解を深める鍵だよ。よし、少しだけ『舞台裏』を覗いてみようか。」

舞台裏をのぞいてみよう：Three.jsからGPUへの道のり

三郎先生: 「まず、カエル君が書いた new THREE.BoxGeometry() というコード。Three.jsはこれを受け取ると、内部で立方体を構成するための頂点座標のリストを生成するんだ。立方体には8つの頂点があるだろう？その一つ一つのXYZ座標のデータを作り出すわけだ。」

カエル君: 「なるほど、設計図を作っている感じだケロか。」

三郎先生: 「その通りだ。そして、new THREE.MeshBasicMaterial({ color: 0x00ff00 }) で『この設計図は緑色で塗ってね』という情報を与える。そして、最後の仕上げが renderer.render(scene, camera) だ。」

カエル君: 「この『描画しろ！』っていう命令が一番大事なんだケロね！」

三郎先生: 「うむ。この命令が実行されると、Three.js（翻訳機）は、今まで集めた情報――つまり『この頂点座標で構成された形』を『このカメラ視点』から見て『この色で』描画してくれ、という依頼書を、ブラウザが理解できる言葉、すなわち WebGLの命令 に翻訳するんだ。」

カエル君: 「ここで翻訳されるんだケロ！」

三郎先生: 「そうだ。そして、ブラウザはそのWebGLの命令を受け取ると、今度はコンピュータのグラフィックスドライバという専門家にそれを伝える。このドライバが、GPUと直接対話できる唯一の存在なんだ。」

カエル君: 「伝言ゲームみたいだケロ。」

三郎先生: 「ははは、まさにそうだね。そして最終的に、命令を受け取ったGPUが、その驚異的な計算能力を使って、頂点のリストから面のリストを作り、どの面が手前にあって、どのピクセルを緑色に塗るべきかを一瞬で計算し、最終的な2Dのイメージを生成して、我々が見ている画面（canvas）に描き出している、というわけさ。」

カエル君: 「へぇ〜〜！僕が書いたったった数行のコードの裏側で、そんなに壮大な伝言ゲームと計算が行われていたんだケロね！なんだか感動しちゃったケロ…。」

三郎先生: 「Three.jsの偉大さは、この複雑なプロセスを開発者が意識しなくてもいいように、美しく隠蔽してくれている点にあるんだ。だからこそ、カエル君もこうしてすぐに3Dの世界に足を踏み入れることができたんだよ。さあ、最後にこの立方体を動かしてみよう。アニメーションの魔法だ。」

// ...（今までのコード）...

function animate() {
    requestAnimationFrame(animate); // 次のフレームでこの関数を再度呼び出す

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate(); // アニメーションループを開始

カエル君: 「うわあああ！立方体が回ってるケロ！生きてるみたいだケロ！ピョンピョンピョーン！」

三郎先生: 「ふふふ、どうだい？自分で作ったものが、自分の手で命を吹き込まれて動く。これがプログラミングの、そしてThree.jsの醍醐味だよ。」

カエル君: 「先生、ありがとうケロ！今日は僕にとって、忘れられない一日になったんだケロ！もっともっと知りたくなったんだケロ！」

三郎先生: 「その気持ちを忘れずにね。3Dの世界は、まだまだ奥が深い。これからも一緒に学んでいこう。」

（第4話へつづく）

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

注

登場人物紹介

第3話：カエル君、初めての3Dオブジェクト！

舞台裏をのぞいてみよう：Three.jsからGPUへの道のり

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