Codexで作ろうWeb3Dコンテンツ

今回の記事では、AIコーディングエージェント「Codex」を使ったWeb3Dコンテンツの制作方法をご紹介します。
CodexのようなAIコーディングエージェントは、実装だけでなく、確認、修正、ドキュメント作成まで含めた業務の進め方を大きく変える可能性があります。
このコンテンツにより、その実力を実感してみましょう。

1. はじめに

データ統合・開発部の吉永です。
最近、AIエージェントによるタスク自動化が話題になることが増えてきました。環境の構築、コードを書く、修正する、レビューする、実装方針を相談する。こうした作業を、チャットの延長でAIに任せられる環境が少しずつ実用的になってきています。

一方で、各社のAIツールの進歩が速く、正直なところすべてを追い切れていませんでした。しかし、普段の趣味開発などではGitHub Copilotをメインで使っているのですが、2026年6月から料金体系が変わることもあり、この機会にほかのAIコーディング環境も試してみようと思いました。

そこで今回は、2026年4月にGPT-5.5の登場とあわせて話題になっているOpenAIのCodexを使い、Three.jsでブラウザやVRゴーグル(Meta Quest)上で動く3Dコンテンツを作ってみます。ポイントは、自分ではコードを一行も書かず、実装そのものはAIに任せることです。

お題は太陽系にしました。太陽系は、天体が自分自身の軸で回転する「自転」と、ある点を中心に回る「公転」の両方を扱うため、3Dプログラミングの題材としてちょうどよい複雑さがあります。私自身も、学生さんなどに3Dプログラミングを教えるときの題材やAIツールの性能評価ネタとしてよく使っています。

完成するとWebブラウザ上で以下のような太陽系デモを表示できます。

PCやスマホでもお試しできます [Link]

2. Codexとは

CodexはAIコーディングエージェントです。たとえば「この仕様をどう実装するか相談する」「既存のプロジェクトを読ませて修正してもらう」「コマンドやテストを実行しながら作業を進めてもらう」といった使い方ができます。Codexはアプリ、CLI、クラウドなどから利用できますが、今回はPC上でGUIから操作するCodexアプリを使用します。

基本的な使い方はシンプルです。Codexを開き、プロンプト入力欄にやりたいことを書きます。すでに開発プロジェクトなどの作業フォルダがある場合は、ここでそのフォルダを指定して、Codexに作業対象を伝えられます。

Codexの起動画面

また、Codexを使うときに見ておきたいのが権限モードです。作業の自由度に応じて、次のような考え方で選びます。

デフォルト権限：
通常の作業はある程度Codexに任せる標準的な設定です。作業フォルダの中でファイルを読んだり編集したり、コマンドを実行したりできますが、作業フォルダの外を触る場合やネットワークを使う場合などは確認が入ります。
自動レビュー：
人間の確認待ちを減らすため、本来なら確認が必要になる操作を自動レビューモデルが先に判定する設定です。低リスクと判断された操作は通し、危険度が高い操作は拒否したり、必要に応じて確認で止めたりします。結果として、デフォルト権限より途中で止まる回数を減らしやすくなります。
フルアクセス：
かなり広い範囲をCodexに任せる設定です。作業フォルダの外やネットワークアクセスも含めてできることが増える分、作業前の指示や、最後の実行内容・変更差分の確認がより大切になります。

今回は、まずは標準的な設定としてデフォルト権限を選択し、必要な場面では都度許可を確認しながら進めることにしました。
また、モデルはGPT-5.5、推論の強さは今回はそれほど高度な内容ではないので中程度の設定で進めます。

3. 今回作るもの

今回作成するのは冒頭に述べたとおり、Webブラウザで動作するThree.js製の太陽系デモです。簡易デモ寄りのコンテンツなので、天文学的な縮尺の正確さよりも、構造が分かりやすいことを優先します。

主な要素は以下です。

太陽と主要な惑星
地球の周りを回る月
各惑星の自転と公転
公転周期は地球を基準にした相対値
軌道線、星背景、太陽の発光表現
惑星名ラベル
マウスドラッグ、ホイール、WASDによるカメラ操作
WebXR対応環境でARモードに入るボタン

4. 動作環境

PCでの動作確認は、Codexが提供するWebブラウザを使って行います。今回の実験では、手元で細かく環境を作り込むより、Codexに実装と確認を任せ、その様子を確認することを優先しました。

一方、Meta QuestでWebXRとして試す場合はHTTPSでの接続が必要なため、できあがったファイル一式を自分のWebサーバーにアップロードして表示しました。

5. 実装前にPlanモードで太陽系デモの設計を相談

いきなり実装を依頼する前に、Planモード相当で方針を整理しました。

相談した内容は、実装方針、ファイル構成、太陽系データ設計、カメラ操作、WebXR対応、動作確認の進め方、想定リスクです。
このとき、開発仕様として渡した内容は以下の通りです。

1. 実装する太陽系デモ

Webブラウザで動作するThree.js製の太陽系デモを作成する。
簡易デモ的なコンテンツにする。
惑星サイズや距離は正確でなくてよい。
公転周期は地球を基準として、相対的に実際の周期に近づける。
太陽と主要な惑星を表示する。
地球の周りには月も表示する。
自転と公転の両方を表現する。
惑星データは配列やオブジェクトで管理する。
軌道線、星背景、太陽の発光表現を入れる。
惑星名ラベルを表示する。
外部画像テクスチャに依存しなくても見栄えするようにする。
処理が重くなりすぎないようにする。
太陽に近い惑星が白飛びしないように工夫する。
Three.jsの学習にも使いたいため、ビルドツールは使わず、HTML、CSS、純粋なJavaScriptのみで実装する。
npm環境がなくても、ローカルサーバーで開けば動く構成にする。

2. 操作要件

マウスドラッグ,Questのコントローラで視点を回転する。
ホイールまたはピンチでズームする。
WASDでカメラ移動する。
画面上に簡単な操作説明を表示する。

3. WebXR / Meta Quest対応

Meta Questのブラウザで接続した場合、ボタンクリックでWebXRモード、特にARに切り替えられるようにする。
ARモードでは、太陽の初期位置をユーザーの約1m手前に配置する。
ARモードの初期スケールは通常表示より小さくする。
右コントローラのジョイスティック上下でAR表示中の太陽系スケールを変更できるようにする。
WebXRが利用できない環境では通常表示として動作し、エラーで止めずに案内文を表示する。

これらをPlanモードで入力するとCodexが実装の方針を提示してくれます。これを確認し問題がなければ「はい、このプランを実施します」と書かれたボタンをクリックし実装を開始します。

Planモードで相談している画面2

6. Codexに実装してもらう

実装が始まると、index.html, style.css, main.js の作成、Three.jsを用いたコードの記述、エラー確認、ブラウザでの動作確認まで、ほぼ自動で進んでいきます。人間側の主な役割は、Codexが何をしようとしているかを確認し、必要な場面で許可を出すことです。

たとえばローカルサーバーを起動する、ブラウザ確認を行う、といった作業では、以下のように権限確認が出ます。

Codexが許可を求めてきた画面

実装では、先ほどの相談内容をもとに、惑星データを一つの配列にまとめて管理し、そこから惑星メッシュ、軌道線、ラベルを生成する構成にしてもらいました。Three.jsの学習用資料としても使いやすい構造になっています。コードの詳細に興味のある方は、GitHubリポジトリをご覧ください。

月は地球オブジェクトの子要素として配置してもらいました。これにより、地球が太陽の周りを公転すると、月も地球について移動します。そのうえで、月自身は地球の周りを回るため、「太陽の周りを回る地球」と「地球の周りを回る月」という入れ子の動きを表現できます。

7. 実装された太陽系デモを確認する

実装後はローカルサーバーを起動し、Codex内のブラウザで表示確認しました。

実装された太陽系をブラウザで表示した画面

OrbitControlsで視点を回転した画面

確認したポイントは以下のとおりです。

太陽、惑星、月が表示されている
惑星が太陽の周りを公転している
月が地球の周りを回っている
軌道線と星背景が見える
ラベルが惑星に追従する
ドラッグ回転とズームができる
WASDでカメラと注視点が一緒に移動する
WebXR非対応なPCの環境でもエラーで止まらず、案内が表示される

初回の実装では、太陽として表示されている球体の位置と、実際に光を出す点光源の位置がずれていました。しかしCodex自身がブラウザで動作確認を行い、その結果をもとに問題を把握して、こちらから細かく修正依頼を出す前に、太陽の見た目と光源の位置がそろうように直してくれました。

また、後日あらためて見直すと、木星の縞模様が少し不自然に見えました。最初は球体の周囲にリング状のメッシュを重ねて縞模様らしく見せていましたが、角度によっては木星の表面に貼り付いている模様というより、別の輪が重なっているように見えてしまいます。そこで「木星の模様がおかしかったので綺麗にしてほしい」とCodexに追加で指示しました。

Codexは、リング状のメッシュを重ねる方式ではなく、JavaScript上でcanvasに横縞模様を描き、それをTHREE.CanvasTextureとして球体のマテリアルに貼る方式に変更しました。外部画像ファイルを用意するのではなく、実行時に簡単なテクスチャを生成して使う方法です。今回の開発要件に入れていた「外部画像テクスチャに依存しなくても見栄えするようにする」という方針にも合っています。

生成した木星用のCanvasTextureは、以下のような横縞の画像です。

木星用に生成したCanvasTexture

このテクスチャを木星の球体に貼ることで、縞模様が球面の陰影と一緒に見えるようになり、以前より自然な木星らしい表現になりました。

CanvasTextureで木星の縞模様を改善した結果

8. Meta Questでの確認

Meta Questのブラウザでは画面右下の「ARで見る」ボタンからARセッションを開始します。ARモードに入ったときは、太陽がユーザーの約1m手前に来るように太陽系全体を配置し、通常表示より小さなスケールで表示されるようにしました。

私が手作業で実機で表示してみると、最初のAR出力では惑星が白く飛び、反対側は黒く潰れ気味でした。ここでは実験として、問題点を細かく文章で説明せず、AR表示の写真だけをCodexに渡して修正を依頼しました。

ARで惑星が白飛びしていた状態

ARの明るさを調整の依頼

するとCodex側で、AR空間では現実のカメラ映像がすでに明るいこと、点光源が強すぎること、影側が黒く潰れていることを読み取り、通常表示とAR表示でライト設定を分ける修正を提案してくれました。具体的には、AR中だけ太陽の点光源を弱め、環境光を上げ、露出を少し下げる方向です。

修正後は、惑星の色と陰影が残りやすくなりました。こういう「実機のスクリーンショットを渡して、見た目の問題を読み取ってもらう」使い方は、3DやARの調整ではかなり相性がよさそうです。

実際にMeta Questで動かした様子は、以下の動画でご覧いただけます。

9. 今回の実験から分かったこと

Codexを使うと、実装だけでなく、作業の分解や確認観点の整理まで一つの流れで進めやすくなります。

特に良かった点は、Planモード相当で事前に方針を整理できることです。太陽系デモのように、描画、操作、WebXR対応が混ざる作業では、最初に分解しておくと迷いが減ります。実装前に一度立ち止まって設計を言語化するだけで、その後の実装と確認がかなりスムーズになりました。

また、許可確認は流れを止めるものではなく、安全に作業するための節目です。何に対する許可なのかを確認して進めることで、AIエージェントに任せる範囲を自分でコントロールできます。今回はデフォルト権限で進めましたが、慣れてくれば、自動レビューやフルアクセスを使って任せる範囲を広げ、より効率よく進められる場面もありそうです。

もう一つ印象的だったのは、Codexが単にファイル生成やコード生成をするだけではなかったことです。自律的にブラウザで動作確認し、スクリーンショットを撮って結果を確認し、必要な修正まで進めてくれました。さらにQuest実機で見つかった表示の問題も、こちらが細かく説明するのではなく、スクリーンショットを渡すだけで原因を読み取り、ライトや露出の調整案まで出してくれました。

10. まとめ

今回は、Three.jsで太陽系デモを作りながら、Codexを使った開発の流れを試しました。

HTML、CSS、純粋なJavaScriptだけでも、太陽、惑星、公転、自転、星背景、ラベル、WebXRボタンまで含めた3Dコンテンツを作れました。成果物はThree.jsの学習用としても利用できそうです。

Codexは、コードを書くだけでなく事前の設計相談、実装、確認、修正までまとめて進める相手としてとてもスムーズに使えました。今後も開発の頼もしい相棒として活用できそうです。

11. 実はこの記事、Codexが書きました

と、ここまでThree.jsで太陽系デモを作る記事として読めるように書いてきました。
ですが実は今回、太陽系デモの開発をすると同時に、ブログの執筆も行うようにCodexに指示しました。

指示内容の概要は以下のとおりです。

Three.jsで太陽系デモを作りたいこと
その制作過程をブログ記事としてまとめたいこと
開発しながら、同時にブログ原稿も書いてほしいこと
途中で筆者が不具合の指摘や修正依頼をした場合、その内容と結果も記事に反映してほしいこと
記事の前半では通常の制作記事として進め、最後に「実はこの記事もCodexで作成した」と明かす構成にしたいこと

つまり今回は、Codexにコーディングだけを頼んだのではなく、開発作業と記事執筆をひとつの流れで進めてもらう実験でもありました。

ただし、すべての工程がAIだけで完結したわけではありません。以下の内容については、私が手動で行いました。

はじめにの加筆
Codexを試そうと思った理由や、太陽系を題材に選んだ理由を追記しました。
スクリーンショットの作成
Codexが自動で取得していなかった、Codexの画面や実行結果のスクリーンショットは手動で用意しました。(おそらくここも上手に指示すれば自動化可能)
Meta Questでの動作確認
実機でWebXR表示を確認し、表示結果をCodexに共有しました。
YouTubeやWebコンテンツ、GitHubへのリンクの挿入
全体のチェックと表現調整
読みやすさや事実関係を確認し、必要に応じて加筆・削除・修正しました。

要するに、大部分はCodexに任せつつ、細かい部分は人力で補う進め方でした。とはいえ実際、作業中に私が手を動かした回数は多くありません。Codexが実装や記事作成を進めている間、私は我が家の愛猫と休日の時間を過ごしつつ、必要なタイミングで確認や指示を入れるだけでした。

たとえば第7章で触れた木星の見た目の修正では、Codexがブログに貼るための木星のテクスチャを生成し、そのあと、デモの起動や動作結果のスクリーンショット撮影まで行い、そのままブログ本文に反映してくれました。こちらがやったことは、木星の模様がおかしいと伝え、最終的な表示結果を確認することくらいです。

ここで面白かったのは、Codexが単にスクリーンショットを撮るだけでなく、そのキャプチャが記事に使える状態かどうかまで自分で評価していたことです。最初に撮れたキャプチャでは、Three.jsの描画がまだ始まっておらず、本来写したい太陽系モデルが表示される前の状態でした。Codexはその画像を結果として採用せず、キャプチャが不適切であることを自分で判断したうえで、うまく撮り直すための方針を私に相談してきました。

ARの明るさを調整の依頼

このように、CodexをはじめとするAIエージェントは、開発に限らず、文書作成などさまざまな用途において我々をサポートしてくれることがわかりました。
私自身もまだ使い方を学びはじめたばかりで、不慣れなところはあります。それでも、うまく使いこなせるようになれば、日常のさまざまな作業を便利に、効率よく進められそうだと感じました。