案件相談
その他

ChatGPTへの質問とコピペだけでThree.jsによるアニメーションプログラミングをしてみる

May 10, 2023

はじめに

JavaScriptで3DといえばThree.jsが有名だと思いますが、今日はChatGPTへ質問して得た回答でThree.jsを使ったアニメーションプログラミングをしてみたいと思います。

まずは全部お任せでアニメーション

質問

HTMLとJSでThree.jsを使って3D画像を動かすコードを教えてください。

すると手順及びコードで分かりやすく教えてくれました。

回答

Three.jsを使って3D画像を動かす基本的なコードを以下に示します。このコードは、HTMLとJavaScriptで構成されており、Three.jsのCDNリンクを含めています。

まず、HTMLファイルを作成してください。以下のコードをindex.htmlという名前で保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Three.jsで3D画像を動かす</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

次に、JavaScriptファイルを作成します。以下のコードをmain.jsという名前で保存してください。

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 幾何体を作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// アニメーションを実行する関数
function animate() {
    requestAnimationFrame(animate);

    // オブジェクトを回転させる
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

// アニメーションを実行
animate();

このコードは、緑色の立方体を作成し、それを回転させるアニメーションを実行します。index.htmlをブラウザで開くと、3D画像が表示され、アニメーションが実行されるはずです。

提示されたコードをコピペして表示させてみると見事に動く3DCGが表示されました。

ゲームキャラクタを動かしてみる

次もほぼ全部お任せではあるのですが、ドット絵を動かしてみたいと思います。

質問

ありがとうございます。今度は立方体じゃなくドット絵のような勇者キャラを動かしてみたいのですができますか？

回答

ドット絵の勇者キャラを動かすには、画像をテクスチャとして読み込んで、それを平面にマッピングします。以下の手順で進めてみましょう。

まず、ドット絵の勇者キャラ画像を用意してください。例えば、yusha.pngという名前で画像ファイルを保存します。

次に、先ほどのmain.jsのコードを以下のように変更します。

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// テクスチャをロードする
const textureLoader = new THREE.TextureLoader();
textureLoader.load('yusha.png', function (texture) {
    // 幾何体を作成
    const geometry = new THREE.PlaneGeometry(1, 1);
    const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });

    const yusha = new THREE.Mesh(geometry, material);
    scene.add(yusha);

    // アニメーションを実行する関数
    function animate() {
        requestAnimationFrame(animate);

        // オブジェクトを回転させる
        yusha.rotation.z += 0.01;

        renderer.render(scene, camera);
    }

    // アニメーションを実行
    animate();
});

このコードでは、THREE.TextureLoaderを使って画像をテクスチャとして読み込み、THREE.PlaneGeometryを使って平面を作成し、その平面にテクスチャをマッピングしています。また、テクスチャが透過可能な場合、transparent: trueを指定して透過を有効にしています。

勇者キャラクターの画像が表示され、アニメーションが実行されるはずです。アニメーションの内容は、先ほどの立方体の例と同じく回転させることにしていますが、必要に応じて変更してください。

画像はこちらにあるものを使用させてもらいました。

そしてコードのコピペです。

歩くような感じにしたいので追加で質問してみました。

質問

素晴らしい。回転ではなく左右に動く動きに変更したいです。

回答

回転ではなく左右に動くアニメーションに変更するには、オブジェクトの位置を更新することで実現できます。以下のようにmain.jsを変更してください。

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// テクスチャをロードする
const textureLoader = new THREE.TextureLoader();
textureLoader.load('yusha.png', function (texture) {
    // 幾何体を作成
    const geometry = new THREE.PlaneGeometry(1, 1);
    const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });

    const yusha = new THREE.Mesh(geometry, material);
    scene.add(yusha);

    let moveDirection = 0.01; // 移動方向を表す変数

    // アニメーションを実行する関数
    function animate() {
        requestAnimationFrame(animate);

        // オブジェクトを左右に動かす
        yusha.position.x += moveDirection;

        // 画面端で反転
        if (yusha.position.x >= 2 || yusha.position.x <= -2) {
            moveDirection = -moveDirection;
        }

        renderer.render(scene, camera);
    }

    // アニメーションを実行
    animate();
});

このコードでは、moveDirectionという変数を使ってオブジェクトの移動方向を制御しています。animate関数内でオブジェクトのposition.xを更新することで、左右に動くアニメーションを実現しています。また、画面端で反転するために、オブジェクトの位置が一定の値を超えた場合に、moveDirectionの符号を反転させています。

このコードを使えば、勇者キャラクターが左右に動くアニメーションが実行されるはずです。画面端での反転位置や移動速度を調整する場合は、適宜数値を変更してください。

画像を1枚だけ使っており、方向転換もしていないのでちょっと歩いているという感じではありませんが左右に動いていました。

いかがでしょうか？

ChatGPTへの質問とコピペだけでアニメーションプログラミングを体験してみました。

プログラミングはやはり目に見えるものがあると楽しいですね。自分では1行もコーディングしていませんが使ったことがないライブラリもChatGPTに教えてもらうことで試行錯誤して使えるようになると思います。

GPT-4を採用したGitHub Copilot Xが使えるようになるとコードエディター上でさらに生産性が上がると思います。随分前にWaitlistに登録しているのですがなかなか連絡が来ないですね。GitHub Copilot Xが使える日が待ち遠しい今日この頃です。

おわりに

TC3は「Gig Innovated.」のスローガンを掲げ、ギグ・エコノミーとの共創を通してソフトウェア開発やAI開発を支援する会社です。ギグ・エコノミーとの共創による開発には、ツール、プロセスなどの観点で様々な課題も存在しています。このような世界を一緒に作っていく仲間をTC3では募集していますので、カジュアル面談などお気軽にお問い合わせください！（参考：リクルートサイト）

Related Posts