ChatGPTでVR体験をしてみた

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

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

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

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

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

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

拡張機能のLive Serverをインストールしておきます。

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

私はgpt-4にしました。

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

Go Liveをクリックすると、index.htmlがブラウザで開きます。

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

カメラに収まるように立方体を9個描いて

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

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

カメラに収まるように球体を1個描いて

カメラに収まるように立方体を3個、球体を3個描いて。

16個指定してたけれど、16個ではないようです。

小さい球体は、楕円形に見えますね。

10個の立方体です。

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