INDEX 05 — BNF COLUMNSAI活用ノウハウ

PDF不要。Webで完結する実践的なAI活用ノウハウ集です。
基礎からセキュリティ、業務への応用まで解説します。

01.【EU AI法対応】AI生成テキストの「隠し透かし」の仕組みと検出ツールの作り方Claudeの最新発表やEU AI法(EU AI Act)第50条で義務化されたAIテキスト透かし(Embedded Watermark)の仕組みを解剖。暗号的な単語確率偏重(グリーンリスト)とZ-score統計検定の理論から、自分で作成できるリアルタイム検出ツールのコードまで徹底解説します。02.Gemini Notebook 4大新機能の全貌と実践活用法2026年8月4日、Gemini Notebook(旧NotebookLM)が全Proユーザーへ大型アップデートを完了。コード実行によるデータ分析、Excel/PDFの直接生成、Web検索の統合、URL一括ソース化という4つの新機能が加わり、Gemini 3.5 Flash搭載で基盤モデルも刷新されました。各機能の仕組みと、現場で即使えるプロンプト例を交えて徹底解説します。03.AI一発生成!人間にしか読めない「Ghost Font」の仕組みと作成術画像解析AIにはただの砂嵐ノイズに見え、人間の目だけに文字がくっきり浮かび上がる次世代タイポグラフィ「Ghost Font」。ゲシュタルト心理学の「共通運命の法則」を活用し、HTML/CanvasとAIプロンプトだけで好きな文字を一発生成する方法を解説します。04.AI一発生成!好きなテーマを指定して作る3D WebGLサイト構築術難解なコードを1行も書かずに、AIプロンプトだけで圧倒的な立体Webサイトを作成する方法を解説します。サイバー都市、幻想的な森、宇宙ステーションなど、希望の世界観をテーマとして指定するだけでスクロール連動の3D WebGLサイトが一発完成する実践ガイドです。05.ビジネス資料が一気に伝わる!Gemini Notebook図解術(旧NotebookLM)社内資料や議事録、提案書を、そのまま会議で使える図解に変える方法を解説します。GoogleのAIノート「Gemini Notebook(旧NotebookLM)」のインフォグラフィック機能を使い、資料作成の時間を大きく削減しながら、伝わる資料づくりを実現するビジネス活用術です。06.AIだけで動画講義を量産する方法カメラ不要・マイク不要・編集不要で、自分の声クローンとAIアバターを使った高品質な動画講義を量産する最新ワークフローと、Claude Code等で一撃実行する自動化API連携を解説します。07.AIプロンプト×Three.js入門:知識ゼロから3D Webゲームを作る自走プロンプト術Three.jsと生成AIを組み合わせ、Webブラウザ上で動作するインタラクティブな3Dゲームをプロンプト指示だけで構築するノウハウを徹底解説。実際にその場で遊べる日替わり3Dミニゴルフ『Daily 3D Craft Golf』の動的シード生成や物理演算プロンプトも大公開します。

AIプロンプト×Three.js入門:知識ゼロから3D Webゲームを作る自走プロンプト術

Three.jsと生成AIを組み合わせ、Webブラウザ上で動作するインタラクティブな3Dゲームをプロンプト指示だけで構築するノウハウを徹底解説。実際にその場で遊べる日替わり3Dミニゴルフ『Daily 3D Craft Golf』の動的シード生成や物理演算プロンプトも大公開します。

Three.jsと生成AIが切り拓く3D Webの新時代

Webブラウザ上で滑らかな3Dグラフィックスを描画する標準ライブラリ「Three.js」。従来、3D空間の構築、ライティング、カメラアングル、物理シミュレーションをコードで記述するには、高度な数学的知識とWebグラフィックスの深い理解が必要でした。
しかし、(Claude 3.7 / / / Cursor 等)の登場によって、このハードルは一気に崩れ去りました。今や「どのような3D空間を作りたいか」を自然言語ので指示するだけで、AIがThree.jsの複雑なコードを即座に生成・デバッグ・チューニングしてくれます。
💬1. 自然言語指示AIに作成したい3D空間やオブジェクトのイメージを指示2. Three.jsコード自動生成Scene, Camera, Light, Meshの構成コードをAIが出力🎮3. 即座にWeb描画&対話調整Canvasに即時反映。ライティングや動作を追記指示で調整Three.js × AIプロンプト開発の基本サイクル
この記事では、AIを使ったThree.js開発の基礎から、実際のゲーム構築手順までを解説します。まずは、本記事のプロンプト指示のみで全コードが自動生成された3Dゲーム実機デモを体感してみてください。

【実際に遊べるデモ

Daily 3D Craft Golf】 毎日日付ごとにコースが自動変化する、パステル&クラフト調の3Dミニゴルフゲームです。ボールを後ろに引き込んで放すとパットできます。少ない打数(Par)でカップインを目指してください。
DAY #1PHYSICS ENGINE ENHANCED

putt.day Style Physics Golf

HOLE
1/3
PAR
PUTTS
0
⚡ リアル剛体物理エンジン搭載!スライディング・回転慣性・法線反発を追求!
物理シミュレーションワールド準備中...
⚙️ 物理法則: 線速度・角速度・純粋転がり慣性(v=ωr)・反発力(e=0.75)・重力ポテンシャル井戸シミュレーション
Daily 3D Craft Golf 3Dゲームデモ
PROMPT / ADVICE : 今日のコースに挑戦してみようスマホでもPCでも滑らかに動作します。マウス右ドラッグやShiftドラッグでコースを360度自由に回転・観察できます。

なぜThree.jsはAIと最も相性が良いのか

数あるWeb技術の中でも、Three.jsは生成AIのコード生成と特に相性が良いことで知られています。その理由は3つあります。

1. 宣言的な構造と高い再現性

Three.jsは「シーン(Scene)にメッシュ(Mesh)を追加し、カメラ(Camera)で覗き、レンダラー(Renderer)で描画する」という明確な4大要素のオブジェクト構造を持っています。この構造がAIの学習データと完璧に合致しているため、AIが破綻のないコードを出力しやすいのです。

2. 外部ライブラリ不要で単一Canvasに完結

CSSの複雑なレイアウト崩れと異なり、Three.jsの出力は基本的に1つのHTML5 Canvas要素内にカプセル化されます。そのため「表示が崩れた」「親要素の影響を受けた」というトラブルが少なく、プロンプト指示による修正が極めて的確に反映されます。

3. インタラクティブ要素の命令が直感的

「ボールを引っ張って放したら力(Vector3)を加える」「壁に当たったら反転させる」といった物理ロジックは、自然言語のプロンプトと1対1で対応しやすいため、AIに意図がストレートに伝わります。

AIプロンプトだけで3Dゲームを作る5ステップ

実際の『Daily 3D Craft Golf』開発で使われた、AIへの段階的プロンプトプロセスの全貌を公開します。一度にすべてを頼むのではなく、5つのステップに分けてAIと対話することが成功の秘訣です。
STEP 1ベースシーン構築Scene, Camera, Renderer, Light, 地面コースの配置STEP 23Dオブジェクト&マテリアルボール、カップ、木製壁、サンドバンカーの作成STEP 3スリングショット操作ドラッグ&ドロップのショット判定とガイド矢印STEP 4物理判定・バウンド壁跳ね返り・減速・カップイン判定と演出STEP 5日替わりシード生成YYYY-MM-DDベースの決定論的コースとスコア保存3Dゲーム構築の5ステッププロンプト

ステップ1:ベースシーンの構築プロンプト

最初に最小限の3D空間とカメラ、ライティングだけをAIに生成させます。
ステップ1のAI指示プロンプト例:
AI PROMPT / CONFIG
Three.jsを使って、以下の要件で3Dベースシーンを構築してください。
・背景色:パステル天空スカイドーム(#bae6fd)
・カメラ:斜め上からの見下ろしパースペクティブカメラ(PerspectiveCamera)
・照明:自然な太陽光(DirectionalLight)と環境光(HemisphereLight)
・地面:パステルミントグリーンの芝生コース(8×20サイズ)
・周囲に角丸ウッド枠(テラコッタ色)を配置してください

ステップ2:3Dオブジェクトと質感(マテリアル)の配置

次に、ボールやカップ、障害物などのオブジェクトを粘土・木・パステル調のマテリアルで追加します。
ステップ2のAI指示プロンプト例:
AI PROMPT / CONFIG
ベースシーンに以下の3Dオブジェクトを追加してください。
1. ゴルフボール:純白の光沢球体(SphereGeometry)、柔らかい影を落とす
2. カップ(ホール):黒い円柱、位置(X: 0, Z: -7)、赤い旗のついたフラッグポールと発光リングを設置
3. 障害物:コース上に木製の回転風車とパトロール障害物を配置

ステップ3:パター操作と予測軌道の実装

マウスドラッグまたはタッチで引っ張って打ち出す操作系をプロンプトで追加します。
ステップ3のAI指示プロンプト例:
AI PROMPT / CONFIG
ボールのドラッグ操作と3Dパターを実装してください。
・ボールを引っ張るとボール背後に3Dパタークラブを表示し、引いた距離に応じて手前に下げる
・打ち出し方向と強さを示す3D予測ドット軌跡を表示する
・放した瞬間にパターがボールを打撃し、ベクトル速度(Vector3)を与える
・引き伸ばしが25px未満の場合は誤打防止のためキャンセルの判定を入れる

ステップ4:物理演算とガントレットループによる調整

壁や障害物に当たったときの跳ね返りとカップイン判定を記述させます。
ステップ4のAI指示プロンプト例:
AI PROMPT / CONFIG
以下の物理計算を追加してください。
・ボールの線速度(v)と角速度(ω)を同期させ、純粋転がり(v = ω * r)を再現する
・壁やクッションへの衝突時、反発係数(e = 0.75)と法線反射ベクトルでバウンドさせる
・カップ周辺2.0m以内に入ったら、マグネット引力でスムーズに引き寄せてカップインさせる

ステップ5:日替わり共通コース(Daily Seed)の生成

全プレイヤーが毎日同じコースを楽しめる決定論的シード処理を追加します。
ステップ5のAI指示プロンプト例:
AI PROMPT / CONFIG
毎日全プレイヤーが同じコースを遊べるよう、日替わりシード生成を追加してください。
・当日の日付文字列(YYYY-MM-DD)から決定論的なPRNG乱数を生成する
・ホール位置と障害物の配置をシード乱数に基づいて動的に決定する
・打数(Strokes)のカウントと、ローカルストレージへのベストスコア保存機能を実装する

3D表現でよくあるトラブルとAI修正指示テクニック

AIにThree.jsコードを書かせていると発生する典型的な問題と、それを一発で解消するAI修正プロンプトの例を紹介します。

トラブル1:影(Shadow)が表示されない・切れる

原因:DirectionalLightの shadow.camera 範囲が狭すぎるか、オブジェクトの castShadow = true / receiveShadow = true が抜けている。
影修正のAIプロンプト例:
AI PROMPT / CONFIG
影が表示されていません。DirectionalLightのshadow.camera.left/right/top/bottomのエリアをコース全体(幅8, 奥行き20)をカバーするように広げ、すべてのMeshにcastShadowとreceiveShadowを明示的に付与してください。

トラブル2:画面のリサイズで3Dが歪む・伸びる

原因:Windowのリサイズ時にカメラのアスペクト比(aspect)とレンダラーのサイズが更新されていない。
リサイズ修正のAIプロンプト例:
AI PROMPT / CONFIG
ウィンドウリサイズ時に、camera.aspect = width / height; camera.updateProjectionMatrix(); と renderer.setSize(width, height); を実行するリサイズイベントリスナーを追加してください。
PROMPT / ADVICE : ガントレットループで視覚効果を磨こう「この3Dシーンのライティングと質感を批評し、より温かみのある北欧パステルクレイ風に見えるように修正して」と3回ループ指示を出すと、ライティングのクオリティが劇的に跳ね上がります。

まとめ:3D Web開発はAI時代の新しい表現キャンバス

かつて高度な数学と専門エンジニアの専売特許だったThree.jsによる3D Web開発は、生成AIの登場によって誰でもアイデアを即座に形にできる表現キャンバスへと進化しました。
今回作成した『Daily 3D Craft Golf』のように、ゲーム性の高いインタラクティブコンテンツや3Dデータ可視化、モダンなWebプロダクト表現が、プロンプト対話だけで構築できます。
まずは手元のAIチャットに本記事の「ステップ1:ベースシーン構築プロンプト」をコピペして、ブラウザの中で最初の3Dオブジェクトが立ち上がる感動を体感してみてください!

このトピックについてさらに深く学びたいですか?

「自社のビジネスモデルに合わせたAIロードマップを作りたい」「自社独自のプロンプト集やAI利用規約を作りたい」といったご要望は、BNFのAI顧問が直接支援いたします。

BNF公式サイトでお問い合わせ