🛰️ GPT先生と学ぶ！「国際母語デー」の宇宙アニメーション制作

2025年2月21日

🚀 はじめに

AIにコードを書いてもらって、サクッと動かしたいけど、細かいことは正直面倒くさい……そんなあなたにピッタリの学習記事です！
今回は「国際母語デー」をテーマに、宇宙空間を背景にした 3D回転地球＋多言語アニメーションを Three.js・GSAP・Anime.js で作ります。
そして、その過程を GPT先生（ツンデレだけど親切な先生）と生徒（面倒くさがりだけどAIでコードを作るのは好き）のチャット形式でお届けします！

🎨 1. テーマ決め：国際母語デーって何？

👨‍🎓「GPT先生！アニメーション作って！テーマは国際母語デーで！」
👩‍🏫「なっ…！いきなり！？まぁ、いいわ。国際母語デーっていうのは、言語の多様性を祝う日よ。だからいろんな言語の「こんにちは」を表示するのがテーマになるわね！」
👨‍🎓「おお、カッコいい感じで頼む！」
👩‍🏫「ま、まぁ、あなたのために特別に考えてあげるわ！ 3Dの地球が回転して、宇宙を背景に多言語がフワフワ動くアニメーションよ！」

🌍 2. Three.jsで宇宙空間と回転する地球を作る

👩‍🏫「まずは Three.js を使って、宇宙空間と回転する地球を作るわよ！」
👨‍🎓「Three.js？なんか難しそう……」
👩‍🏫「あんた、ちょっとは興味持ちなさいよ！でも初心者向けにちゃんと説明してあげるわ。ほら、これが地球と宇宙のコード！」

<!– Three.jsの基本セットアップ –>
<div id=”canvas-container”></div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>
<script>
const container = document.getElementById(‘canvas-container’);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// 地球を作成
const earthGeometry = new THREE.SphereGeometry(2, 32, 32);
const earthTexture = new THREE.TextureLoader().load(‘地球の画像URL’);
const earthMaterial = new THREE.MeshBasicMaterial({ map: earthTexture });
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);

// 宇宙の背景
const starGeometry = new THREE.SphereGeometry(50, 64, 64);
const starTexture = new THREE.TextureLoader().load(‘星空の画像URL’);
const starMaterial = new THREE.MeshBasicMaterial({ map: starTexture, side: THREE.BackSide });
const stars = new THREE.Mesh(starGeometry, starMaterial);
scene.add(stars);

camera.position.z = 5;

function animate() {
requestAnimationFrame(animate);
earth.rotation.y += 0.002; // 地球の回転
stars.rotation.y += 0.0005; // 宇宙の回転
renderer.render(scene, camera);
}
animate();
</script>

👨‍🎓「おお、コードが短い！これなら理解できるかも！」
👩‍🏫「そ、そうでしょ？まぁ、わかりやすくしてるんだからね！」

📝 3. 言語を追加してアニメーションをつける

👨‍🎓「次は？」
👩‍🏫「言語を増やして、フェードイン・アウトしながら動かすわよ！GSAPとAnime.js の出番よ！」

<!– 言語テキスト –>

<div class=”greeting” style=”top: 20%; left: 30%;”>こんにちは (Japanese)</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js”></script>
<script>
const greetings = document.querySelectorAll(‘.greeting’);
gsap.to(greetings, { opacity: 1, duration: 1.5, yoyo: true, repeat: -1 });

anime({
targets: ‘.greeting’,
translateY: [-10, 10],
duration: 2000,
direction: ‘alternate’,
easing: ‘easeInOutQuad’,
loop: true
});

</script>

👨‍🎓「うおお、言葉がフワフワ動く！」
👩‍🏫「当たり前でしょ！GSAPでフェード、Anime.jsで動きを加えたのよ！」

✨ 4. クリックでランダムに移動

👨‍🎓「もっとインタラクティブにしたい！」
👩‍🏫「あんた、欲張りね！でも、いいわ。クリックしたら言語の位置をランダムに変えるよ！」

<script>
function moveTexts() {
greetings.forEach(greet => {
const newX = Math.random() * window.innerWidth;
const newY = Math.random() * window.innerHeight;
gsap.to(greet, { left: `${newX}px`, top: `${newY}px`, duration: 2.5, ease: “power1.inOut” });
});
}
document.body.addEventListener(“click”, moveTexts);
document.body.addEventListener(“touchstart”, moveTexts);
</script>

👨‍🎓「やったー！これでクリックすると言葉が飛び回る！」
👩‍🏫「ふんっ！少しは満足した？」

❓ FAQ（よくある質問）

Q1. このコードはどのブラウザでも動作しますか？
A. はい！最新のChrome、Firefox、Edge、Safariで動作します。

Q2. クリックの代わりに、スクロールで言語が動くようにできますか？
A. 可能です！window.addEventListener(“scroll”, moveTexts); を追加してください。

Q3. 言語の種類を増やしたいのですが、どうすればいいですか？
A. <div class=”greeting”>新しい言語</div> を追加すればOKです。

🎉 まとめ

👨‍🎓「いやー、楽しかった！」
👩‍🏫「ふ、ふんっ！ちょっとは理解できた？」
👨‍🎓「めちゃくちゃ分かりやすかった！先生、ありがとう！」
👩‍🏫「べ、別に、あんたのために頑張ったわけじゃないんだからね……///」

これで「国際母語デー」を祝う、かっこいい宇宙アニメーションが完成しました！
あとは応用して、もっと面白い動きを追加してみてね！

webアプリはこちらクリック！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国際母語デー - 宇宙背景アニメーション</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; background: black; }
        #canvas-container { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; }
        .greeting {
            position: absolute;
            font-size: 2.2rem;
            font-weight: bold;
            color: #FFD700; /* ゴールドカラー */
            opacity: 0;
            text-shadow: 3px 3px 10px rgba(255, 255, 255, 0.8);
            pointer-events: none; /* クリックを無効化 */
        }
    </style>
</head>
<body>

    <!-- Three.jsの宇宙背景と地球 -->
    <div id="canvas-container"></div>

    <!-- 多言語の「こんにちは」 -->
    <div class="greeting" style="top: 15%; left: 25%;">こんにちは (Japanese)</div>
    <div class="greeting" style="top: 35%; left: 45%;">Hello (English)</div>
    <div class="greeting" style="top: 55%; left: 30%;">Hola (Spanish)</div>
    <div class="greeting" style="top: 75%; left: 70%;">Bonjour (French)</div>
    <div class="greeting" style="top: 85%; left: 40%;">你好 (Chinese)</div>
    <div class="greeting" style="top: 25%; left: 60%;">안녕하세요 (Korean)</div>
    <div class="greeting" style="top: 65%; left: 20%;">Привет (Russian)</div>
    <div class="greeting" style="top: 20%; left: 50%;">नमस्ते (Hindi)</div>
    <div class="greeting" style="top: 50%; left: 75%;">مرحبًا (Arabic)</div>
    <div class="greeting" style="top: 30%; left: 20%;">Hallo (German)</div>
    <div class="greeting" style="top: 70%; left: 55%;">Ciao (Italian)</div>
    <div class="greeting" style="top: 40%; left: 10%;">Sawubona (Zulu)</div>
    <div class="greeting" style="top: 90%; left: 50%;">Mingalaba (Burmese)</div>
    <div class="greeting" style="top: 60%; left: 80%;">Selamat (Malay)</div>

    <script>
        // -------------------------------
        // Three.jsで宇宙背景 & 回転する地球を作成
        // -------------------------------
        const container = document.getElementById('canvas-container');
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        // 地球を作成
        const earthGeometry = new THREE.SphereGeometry(2, 32, 32);
        const earthTexture = new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg');
        const earthMaterial = new THREE.MeshBasicMaterial({ map: earthTexture });
        const earth = new THREE.Mesh(earthGeometry, earthMaterial);
        scene.add(earth);

        // 宇宙の背景（星空のテクスチャを適用）
        const starGeometry = new THREE.SphereGeometry(50, 64, 64);
        const starTexture = new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/ESO_-_Milky_Way.jpg/1920px-ESO_-_Milky_Way.jpg');
        const starMaterial = new THREE.MeshBasicMaterial({ map: starTexture, side: THREE.BackSide });
        const stars = new THREE.Mesh(starGeometry, starMaterial);
        scene.add(stars);

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            earth.rotation.y += 0.002; // 地球の回転
            stars.rotation.y += 0.0005; // 背景の星もゆっくり回転
            renderer.render(scene, camera);
        }
        animate();

        // -------------------------------
        // GSAPで言語のフェードイン・アウト
        // -------------------------------
        const greetings = document.querySelectorAll('.greeting');
        let delay = 0;

        greetings.forEach((greet, index) => {
            gsap.to(greet, {
                opacity: 1,
                duration: 1.5,
                delay: delay,
                ease: "power1.inOut",
                yoyo: true,
                repeat: -1
            });
            delay += 1.2; // 次の言語の表示を時間差でずらす
        });

        // -------------------------------
        // Anime.jsで文字を微妙に浮遊させる
        // -------------------------------
        anime({
            targets: '.greeting',
            translateY: [-10, 10],
            translateX: [-5, 5],
            duration: 3000,
            direction: 'alternate',
            easing: 'easeInOutQuad',
            loop: true
        });

        // -------------------------------
        // クリック/タッチでランダムに移動する
        // -------------------------------
        function moveTexts() {
            greetings.forEach(greet => {
                const newX = Math.random() * (window.innerWidth - 100); // 画面幅内でランダム
                const newY = Math.random() * (window.innerHeight - 50); // 画面高さ内でランダム
                gsap.to(greet, {
                    left: `${newX}px`,
                    top: `${newY}px`,
                    duration: 2.5, // ゆっくり移動
                    ease: "power1.inOut"
                });
            });
        }

        // クリック/タッチイベントで動作
        document.body.addEventListener("click", moveTexts);
        document.body.addEventListener("touchstart", moveTexts);

    </script>

</body>
</html>

よかったらシェアしてね！