A-Frameは、ウェブブラウザ上でVR（Virtual Reality、仮想現実）体験を可能にするためのJavaScriptフレームワークです。このフレームワークは、Mozillaによって開発されました。

今回は、ChatGPTを使って、A-Frameの言語に沿ったコードを作成してもらいます。

流れとしては、ChatGPTで作成したい物体をA-Frameに沿って書いてもらいます。その書かれたコードをブラウザで表示する仕組みとなっております。

今回は、以下のサイトを参考にしております。

今回は、01-Simpleフォルダにあるindex.htmlを利用します。

事前準備として、Visual Studio Codeの拡張機能のLive Serverを追加します。

Visual Studio Codeで拡張機能のLive Serverをインストールしたら、次に、index.htmlファイルを開きます。index.htmlの105行目あたりにChatGPTのモデル指定がありますので、gpt-3.5-turboがデフォルトとなっておりますが、gpt-4に変更したい人は変えましょう。

次に、index.htmlを保存します。Visual Studio Codeの右下に、Go Liveと書かれている部分がありますので、クリックします。

Enter Your API Keyには、OpenAIのAPIキーを入力します。次に、Enter a promptには、今回は、「カメラに収まるように立方体を9個描いて」と記載します。そして、Submitをクリックします。

上記のブラウザで、オブジェクトの左側に行ったり、右側に行ったりすることがマウスを左クリックして動かすことにより出来ます。

他にも同じ要領で、ChatGPTにA-Frameのコードを書いてもらいます。指示を左上の枠に書いたら、Submitをクリックします。

今回、ブラウザ上でChatGPTにコードを書いてもらい、そのコードを反映する仕組みでVRオブジェクトを作成しましたが、この仕組みは、うまく言語化できませんが、凄い気がします。