第14話「スプライトとcanvasで文字を描こう！」 • frontendBaby

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

注

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

登場人物紹介

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

第14話：スプライトとcanvasで文字を描こう！

カエル君: 「先生、先生！スプライトって面白いケロ！キラキラしたパーティクルをたくさん飛ばせるようになったよ！」

カエル君は、前回三郎先生に教えてもらったスプライトを使いこなし、たくさんのパーティクルを画面上で動かして遊んでいました。

三郎先生: 「ほう、それは良かった。スプライトは軽くてたくさん配置できるから、パーティクル表現にはもってこいだからな。」

カエル君: 「うん！でも、ただキラキラ光っているだけじゃなくて、このパーティクルに何かメッセージを表示できたら、もっと面白いと思うんだケロ。例えば、『こんにちは！』とか、『やったね！』とか。」

三郎先生: 「なるほど、それは素晴らしいアイデアだ。もちろん可能だよ。スプライトに文字を表示するには、canvas を使ったテクニックがあるんだ。」

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

三郎先生: 「ふふふ、大丈夫だよ。canvasは、いわば『お絵かきボード』のようなものさ。」

カエル君: 「お絵かきボード？」

三郎先生: 「そう。まず、画面には直接表示しない、透明なお絵かきボードをプログラムの中に用意して、そこに好きな文字を描くんだ。」

カエル君: 「なるほど！透明な紙に好きな色のペンで文字を書いて、それを切り抜いてスプライトに貼り付けるような感じケロ！」

三郎先生: 「その通り！理解が早いな。そして、その文字が描かれたお絵かきボードを、画像（テクスチャ）としてスプライトに貼り付ければ完成だ。」

カエル君: 「へぇー！面白そうケロ！」

三郎先生: 「ここで少し、コンピュータの内部で何が起こっているか、覗いてみようか？」

カエル君: 「うん、知りたいケロ！」

三郎先生: 「まず、canvasに文字を描くのは、CPU、つまりコンピュータの頭脳が担当する。これは、文字の形や色を計算する、少し頭を使う作業なんだ。」

カエル君: 「ふむふむ。CPUが文字をデザインしてくれるんだね。」

三郎先生: 「そして、出来上がった文字の画像を、今度はGPU、つまりグラフィックス専門の装置に送るんだ。GPUは、たくさんのスプライトを高速に描画するのが得意だからね。」

カエル君: 「なるほど！ CPUがデザインした文字を、GPUがスプライトに貼り付けて、画面に表示してくれるんだね！役割分担してるんだ、賢いケロ！」

三郎先生: 「そういうことだ。では、実際のコードを見てみよう。」

// canvas要素の作成
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// canvasに文字を描画（CPUが担当）
context.font = 'bold 40px Arial';
context.fillStyle = 'white';
context.textAlign = 'center';
context.fillText('Hello, Sprite!', canvas.width / 2, canvas.height / 2);

// canvasからテクスチャを生成してGPUへ
const texture = new THREE.CanvasTexture(canvas);

// スプライトマテリアルの作成
const spriteMaterial = new THREE.SpriteMaterial({
  map: texture,
  transparent: true, // 背景を透過させる
});

// スプライトの作成（GPUが描画）
const sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);

カエル君: 「わー、本当にできたケロ！これなら、キャラクターの頭の上に名前を表示したり、アイテムの近くに説明文を表示したり、ゲームのスコアを表示したり、いろんなことができそうだケロ！」

三郎先生: 「その通りだ。しかも、この方法なら、プログラムで文字を動的に変更することもできる。例えば、キャラクターのセリフを状況に応じて変えたり、スコアをリアルタイムで更新したりすることも可能だよ。」

カエル君: 「すごい！スプライトって、本当に魔法みたいだケロ！これで、もっともっと面白いものが作れそうだケロ！ぴょんぴょん！」

カエル君は、新しい表現の可能性に胸を躍らせ、ぴょんぴょんと跳ね回るのでした。

（第15話へつづく）

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

注

登場人物紹介

第14話：スプライトとcanvasで文字を描こう！

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