INNOVATED.当サイトは、ブラウザのJavaScript設定を有効にしてご覧ください。2023目次はじめにまずは全部お任せでアニメーションゲームキャラクタを動かしてみるおわりにはじめにJavaScriptで3DといえばThree.jsが有名だと思いますが、今日はChatGPTへ質問して得た回答でThree.jsを使ったアニメーションプログラミングをしてみたいと思います。全部お任せでアニメーション質問HTMLとJSでThree.jsを使って3D画像を動かすコードを教えてください。すると手順及びコードで分かりやすく教えてくれました。回答Three.jsを使って3D画像を動かす基本的なコードを以下に示します。このコードは、HTMLとJavaScriptで構成されており、Three.jsのCDNリンクを含めています。HTMLファイルを作成してください。以下のコードをindex.htmlという名前で保存してください。src="main.js"></script></body></html>次に、JavaScriptファイルを作成します。以下のコードをmain.jsという名前で保存してください。アニメーションを実行animate();このコードは、緑色の立方体を作成し、それを回転させるアニメーションを実行します。index.htmlをブラウザで開くと、3D画像が表示され、アニメーションが実行されるはずです。提示されたコードをコピペして表示させてみると見事に動く3DCGが表示されました。ゲームキャラクタを動かしてみる次もほぼ全部お任せではあるのですが、ドット絵を動かしてみたいと思います。質問ありがとうございます。今度は立方体じゃなくドット絵のような勇者キャラを動かしてみたいのですができますか?回答ドット絵の勇者キャラを動かすには、画像をテクスチャとして読み込んで、それを平面にマッピングします。以下の手順で進めてみましょう。ドット絵の勇者キャラ画像を用意してください。yusha.pngという名前で画像ファイルを保存します。次に、先ほどのmain.jsのコードを以下のように変更します。animate();});このコードでは、THREE.TextureLoaderを使って画像をテクスチャとして読み込み、THREE.PlaneGeometryを使って平面を作成し、その平面にテクスチャをマッピングしています。trueを指定して透過を有効にしています。勇者キャラクターの画像が表示され、アニメーションが実行されるはずです。アニメーションの内容は、先ほどの立方体の例と同じく回転させることにしていますが、必要に応じて変更してください。画像はこちらにあるものを使用させてもらいました。歩くような感じにしたいので追加で質問してみました。回転ではなく左右に動く動きに変更したいです。回転ではなく左右に動くアニメーションに変更するには、オブジェクトの位置を更新することで実現できます。以下のようにmain.jsを変更してください。animate();});このコードでは、moveDirectionという変数を使ってオブジェクトの移動方向を制御しています。animate関数内でオブジェクトのposition.xを更新することで、左右に動くアニメーションを実現しています。画面端で反転するために、オブジェクトの位置が一定の値を超えた場合に、moveDirectionの符号を反転させています。このコードを使えば、勇者キャラクターが左右に動くアニメーションが実行されるはずです。画面端での反転位置や移動速度を調整する場合は、適宜数値を変更してください。画像を1枚だけ使っており、方向転換もしていないのでちょっと歩いているという感じではありませんが左右に動いていました。いかがでしょうか?ChatGPTへの質問とコピペだけでアニメーションプログラミングを体験してみました。プログラミングはやはり目に見えるものがあると楽しいですね。自分では1行もコーディングしていませんが使ったことがないライブラリもChatGPTに教えてもらうことで試行錯誤して使えるようになると思います。Xが使えるようになるとコードエディター上でさらに生産性が上がると思います。前にWaitlistに登録しているのですがなかなか連絡が来ないですね。Xが使える日が待ち遠しい今日この頃です。Innovated.」のスローガンを掲げ、ギグ・エコノミーとの共創を通してソフトウェア開発やAI開発を支援する会社です。ギグ・エコノミーとの共創による開発には、ツール、プロセスなどの観点で様々な課題も存在しています。