3D猫サムネイル
はじめに
AIのClaudeと会話しながら、猫の3Dモデルと、それを使ったブラウザゲームを4本作ってみました。この記事の中で実際に遊べます。
Redditでthree.jsという名前を見かけて、何ができるのか気になったことがきっかけです。最初は「three.jsって何?」と質問しただけでしたが、話の流れで「AIは3Dモデルを作れるの?」「ブログに埋め込める?」と聞いていくうちに、気がついたらゲームが4本できていました。
この記事では作った猫の3Dモデルと小ゲームを紹介します。
three.jsとglTFってなに?
three.jsは、Webブラウザで3Dグラフィックスを手軽に扱うためのJavaScriptライブラリです。本来は難しいWebGLという技術を、「シーン」「カメラ」「ライト」といった分かりやすい部品で扱えるようにしてくれます。無料のオープンソース(MITライセンス)で、商用サイトでも使えます。
glTFは、3Dモデルを保存・配信するためのファイル形式で、「3DのJPEG」とも呼ばれます。形や色、質感、アニメーションを1つのファイルにまとめられ、Webで軽く表示できるのが特徴です。今回の猫のモデルも、glTFのバイナリ版である「.glb」形式で作ってもらいました。
猫の3Dモデルを作ってもらう
最初に作ってもらったのは、カラフルなビーチボールでした。次に「もっと奇抜なもの、猫の顔とか」とお願いしたところ、茶トラ猫の顔のモデルが出てきました。
面白いのは作り方です。Claudeは画像生成AIのように絵を描くのではなく、球や円錐といった単純な形を、位置・大きさ・色の数値で指定して組み合わせています。頭は少しつぶした球、耳は円錐、目は黒い球に白いハイライト、ひげは細い円柱、という具合です。
ビーチボールと猫の顔モデル
このモデルを表示するビューアも作ってもらいました。マウスやタッチで回転・拡大でき、自動で回ったり、ふわふわ浮いたりする動きも付けられます。
作った4つの小ゲーム
猫のモデルを使って、ゲームを4本作ってもらいました。どれもスマホでもパソコンでも遊べます。
1. ねこの魚キャッチ
猫を左右に動かして、空から降ってくる魚をキャッチします。金の魚は5点、長靴を取ったり魚を落としたりするとライフが減ります。
2. ひょっこりねこ
穴から顔を出す猫をタッチする、もぐら叩き風のゲームです。猫を叩くのはかわいそうなので「タッチするとハートが出る」仕様にしてもらいました。ハリネズミにさわると減点です。
3. ねこジャンプ
タップでジャンプして、段ボールやきゅうりを飛び越えていくゲームです。空中でもう一度タップすると2段ジャンプになります。
4. ねこさがし迷路
ここまでの3本は、3Dモデルを使っていても動きは平面的で、昔の2Dゲームに近い感じでした。そこで最後は、一人称視点で生け垣の迷路を歩き回るゲームにしてもらいました。迷路は毎回自動で作られます。
やってみた感想
一番驚いたのは、会話だけでここまでできたことです。私がしたのは、やりたいことを伝え、エラーが出たらスクリーンショットを見せることだけでした。
動きのなめらかさにも驚きました。2Dアニメは1秒あたり8〜12枚程度の絵で動いているそうですが、three.jsは画面の書き換えごと(一般的なモニターで1秒60回)に描き直しています。ただ、なめらかなほど良いとは限らず、アニメのカクッとした動きは表現として磨かれてきたもの、という話も興味深かったです。
一方で、万能ではないことも分かりました。
• 猫のモデルは単純な形の組み合わせなので、リアルな造形は苦手です。
• 背景も絵を描いたのではなく、球体の丘や雲をコードで配置したものです。
自分でも試したい方へ
同じようにブログに3Dゲームを置きたい方向けに、気をつけたい点をまとめます。
- 3Dモデルのビューワー・ゲームのスクリプトは別ファイルにする。: 記事本文に直接書くと、WordPressやプラグインに書き換えられることがあります。
- 高速化プラグインの除外設定: Autoptimizeなどを使っている場合は、ゲームのJSファイルを最適化の対象から外した方がいいかもしれません。
- .glbファイルの置き場所: WordPressのメディアは初期状態で.glbをアップロードできません。サーバーのファイルマネージャやFTPで直接置くと簡単です。
- 広告との距離: ゲームは画面をタップし続けるので、近くに広告があると誤クリックが起きやすくなります。AdSenseを使っている場合は特に、十分に離して配置してください。
- 権利について: Claudeの利用規約では、出力物に関する権利は利用者に譲渡されることになっています。three.jsもMITライセンスで商用利用できます。ただし、AI生成物に著作権がどこまで認められるかは、まだはっきりしていない部分もあります。
まとめ
「three.jsって何?」という質問から始まって、最終的には猫の3Dモデルと4本のゲームをブログに置くことができました。コードを一行も自分で書かずにここまでできたのは、正直なところ驚きです。
つまずいたのは、AIの作ったコードそのものより、WordPressのプラグインやキャッシュといった「自分のサイトの環境」の部分でした。エラーをそのまま見せて一緒に原因を探す、という進め方が一番の近道だったと思います。
ぜひ上のゲームで遊んでみてください。