Three.jsを使用した地球モデル

サンプルを表示

Three.jsとは何か？Three.jsは、3Dグラフィックスをブラウザ上で簡単に実現するためのJavaScriptライブラリです。WebGLの複雑なAPIを抽象化し、よりシンプルな形で3Dオブジェクト、カメラ、ライティング、レンダリングを操作できるようにします。

今回のプロジェクトでは、Three.jsを使って地球の3Dモデルを作成しました。このモデルは、回転する地球とその影を表示し、マウス操作でカメラ視点を変更できます。

完成した地球モデルのコード


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Three.jsで地球モデル</title>
    <script src="js/three.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        // 必要な変数を宣言
        var camera, scene, renderer, group;
        var windowHalfX = window.innerWidth / 2; // ウィンドウ幅の半分
        var windowHalfY = window.innerHeight / 2; // ウィンドウ高さの半分
        var mouseX = 0, mouseY = 0; // マウスの位置

        // 初期化関数を呼び出し、アニメーションを開始
        init();
        animate();

        // 初期化関数
        function init() {
            // コンテナ要素を取得
            var container = document.getElementById('container');

            // カメラを作成
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.z = 500; // カメラの位置を設定

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

            // 地球モデル用のグループを作成し、シーンに追加
            group = new THREE.Group();
            scene.add(group);

            // 地球のテクスチャをロード
            var loader = new THREE.TextureLoader();
            loader.load('images/earth_2048.jpg', function (texture) {
                // 球体ジオメトリを作成
                var geometry = new THREE.SphereGeometry(200, 20, 20);
                // テクスチャを適用したマテリアルを作成
                var material = new THREE.MeshBasicMaterial({ map: texture });
                // ジオメトリとマテリアルからメッシュを作成
                var mesh = new THREE.Mesh(geometry, material);
                group.add(mesh); // グループに追加
            });

            // レンダラーを作成し、サイズを設定
            renderer = new THREE.CanvasRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement); // コンテナにレンダラーを追加

            // マウスイベントとウィンドウリサイズイベントを登録
            document.addEventListener('mousemove', onDocumentMouseMove, false);
            window.addEventListener('resize', onWindowResize, false);
        }

        // マウス移動時の処理
        function onDocumentMouseMove(event) {
            mouseX = (event.clientX - windowHalfX); // マウスX座標の更新
            mouseY = (event.clientY - windowHalfY); // マウスY座標の更新
        }

        // ウィンドウリサイズ時の処理
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2; // ウィンドウ幅の再計算
            windowHalfY = window.innerHeight / 2; // ウィンドウ高さの再計算

            camera.aspect = window.innerWidth / window.innerHeight; // カメラのアスペクト比を更新
            camera.updateProjectionMatrix(); // カメラの投影行列を更新

            renderer.setSize(window.innerWidth, window.innerHeight); // レンダラーのサイズを更新
        }

        // アニメーションループ
        function animate() {
            requestAnimationFrame(animate); // 再帰的に呼び出し
            render(); // レンダリング関数を呼び出し
        }

        // レンダリング処理
        function render() {
            // マウスの動きに応じてカメラの位置をスムーズに更新
            camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (-mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position); // カメラをシーンの中心に向ける

            // 地球モデルを回転
            group.rotation.y -= 0.005;

            // シーンをレンダリング
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

このコードを使用して、3D地球モデルを簡単に作成できます。ぜひカスタマイズして、自分だけの3Dプロジェクトを作りましょう！

Three.js公式サイトはこちら

#Threejs #WebGL #3Dモデル #地球モデル #JavaScript #プログラミング #Web開発 #インタラクティブデザイン #コード例 #学習用