【Three.js】地球（球体）を回してみよう
目次
はじめに
NNCの中里です。久しぶりに記事を書きたいと思います。
Webサイト上の表現として3Dの動きを取り入れたい時ありますよね。
今回はThree.jsを使って3Dの地球（球体）を回転させてみましょう。
【Three.js】基礎編 から見たい方はこちら
【Three.js】発展編 から見たい方はこちら
今回作るもの
今回作る地球は自動回転・マウス操作可能に加え、好きな素材でオリジナルデザインにできるものになります。
球体に貼り付けるテクスチャのため、このようなイメージ（メルカトル図法をさらに歪ませたようなもの）が必要になります。
サンプルで使用している素材はこちらのサイトからダウンロードした惑星のテクスチャです。
earth texture map
完成見本とサンプルコード
今回の完成見本はこちらになります。
3Dの球体に先ほどのテクスチャが貼られ、地球のモデルが回転しています。
マウスの操作に合わせた回転やズームもできていますね。
CSSは使っていないため、HTML / JavaScriptのコードのみで表現ができます。
※サーバー上でないと動作しないため、プレビューはサーバー上やXammpなど使用して確認しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>地球回転サンプル</title>
<!-- three.jsを読み込む -->
<script src="build/three.min.js"></script>
<!-- 操作用jsを読み込む -->
<script src="js/controls/OrbitControls.js"></script>
<!-- 実行用jsを読み込む -->
<script src="js/script.js"></script>
</head>
<body>
<div id="main_canvas">
</div>
</body>
</html>今回のHTMLは特にシンプルですね。
必要なファイルにリンクを貼り、canvas要素を生成するターゲットとなるdivを作ります。（id名は任意ですが今回はmain_canvasとしています）
必要なファイルはthreejs.org の「download」から一式ダウンロードできます。
three.min.jsはbuildフォルダ内、OrbitControls.jsはexamples/js/controlsフォルダ内にあります。（2022年4月現在）
const W_WIDTH = window.innerWidth; // 幅の指定 現在はブラウザの横サイズ（数値指定も可）
const W_HEIGHT = window.innerHeight;// 幅の指定 現在はブラウザの縦サイズ（数値指定も可）
const W_ASPECT = window.innerWidth / window.innerHeight;// アスペクト比 現在はブラウザの横サイズ ÷ ブラウザの縦サイズ（数値指定も可）
const W_RATIO = window.devicePixelRatio;// ドット比
let camera, scene, renderer, earth;// 変数の定義 カメラ、シーン、レンダラー、地球
window.onload = ()=>{
// カメラを作る 数値は(視野角,アスペクト比,カメラの見える範囲最小値,最大値)
camera = new THREE.PerspectiveCamera(50, W_ASPECT, 1, 10000);
//カメラの位置を指定
camera.position.set(0, 0, 600);
// カメラのマウス操作有効にする
const controls = new THREE.OrbitControls(camera, document.body);
// シーンを作る
scene = new THREE.Scene();
// 背景色を指定
scene.background = new THREE.Color( 0x000000 );
// ライトを作る1 平行光源
let dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5,3,5);// 光の向き
//以下削除でライトなし
scene.add(dirLight);
// ライトを作る2 環境光源
let ambLight = new THREE.AmbientLight(0xffffff);
scene.add(ambLight);
// レンダラーを作る
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(W_RATIO);// ピクセル比
renderer.setSize(W_WIDTH, W_HEIGHT);
// HTMLに配置する div要素のid名で指定
let div = document.getElementById("main_canvas");
div.appendChild(renderer.domElement);
// 地球を配置する
// テクスチャを作成
let txLoader = new THREE.TextureLoader();
// 画像を指定
let normalMap = txLoader.load("./assets/earth_tx.png");
// ジオメトリ（形状）を作成
// サイズ 数値は 半径, 横方向を何面にするか, 縦方向を何面にするか を表す
let geometry = new THREE.SphereBufferGeometry(100, 300, 300);
// マテリアル（素材）を作成
let material = new THREE.MeshLambertMaterial({
//透明設定 オン
transparent: true,
//透明度指定
opacity: 1,
//色（オーバーレイカラー）を変更
color:0xffffff,
map: normalMap
});
// メッシュ ジオメトリ（形状）、マテリアル（素材）を元に、メッシュ (部品）を作成
earth = new THREE.Mesh(geometry, material);
scene.add(earth);
// アニメーションの開始
animate();
}
function animate(){
// 地球を回転させる 数値で速度の指定 手動のみで回転させる場合は以下1行削除
earth.rotation.y += 0.002;
// レンダリング
renderer.render(scene, camera);
// 更新
requestAnimationFrame(animate);
}JavaScriptの解説
JavaScriptの記述は長いですが、コメントで簡易的な説明を入れているのでポイント部分のみ説明していきます。
//カメラのマウス操作有効にする
const controls = new THREE.OrbitControls(camera, document.body);この記述により地球の回転をマウスで操作できるようになります。
マウス操作が不要な場合、この記述は削除してください。OrbitControls.jsファイルへのリンクも不要になります。
// 背景色を指定
scene.background = new THREE.Color( 0x000000 );0x000000部分で背景色を指定します。
0xの後ろの6桁の数値でrrggbbの出力値を設定することになります。
CSSなどで扱うHex値で設定するため、0xffff00と設定すると背景色がイエローになります。
ただし3桁に省略することはできないようなので必ず6桁で指定しましょう。
// ライトを作る1 平行光源
let dirLight = new THREE.DirectionalLight(0xffffff, 1);ここで地球に当てるライトを作成します。
0x000000部分でライトの色を指定します。
ライトが不要な場合scene.add(dirLight);を削除すると以下のようになります。
陰影がなくなるため立体感が無くなります。
// ライトを作る2 環境光源
let ambLight = new THREE.AmbientLight(0xffffff);ここでは環境光を作成します。
0x000000部分で環境光の色を指定します。
環境光が不要な場合scene.add(ambLight);を削除すると以下のようになります。
環境光がなくなるため全体的に暗くなります。
// テクスチャの作成・画像を指定
// テクスチャを作成
let txLoader = new THREE.TextureLoader();
// 画像を指定
let normalMap = txLoader.load("./assets/earth_tx.png");let txLoader部分で作成したテクスチャに、let normalMap部分で画像を読み込んで貼り付けます。
読み込みたいイメージのパスを記述してください。
呼び出す画像をを変更すればオリジナルの球体を作ることができます。
弊社ロゴを呼び出したイメージです。
歪みまで想定して画像の準備ができると尚良いですね。
// ジオメトリ（形状）を作成・サイズの指定
let geometry = new THREE.SphereBufferGeometry(100, 300, 300);球体のジオメトリ（形状）を作成します。
引数の値「 半径, 横方向を何面にするか, 縦方向を何面にするか」を表します。
横方向の面を0にした場合 – THREE.SphereBufferGeometry(100, 0, 300);
縦方向の面を0にした場合 – THREE.SphereBufferGeometry(100, 300, 0);
面の数を変えて球体を変形させることもできます。
//マテリアル（素材）を作成
let material = new THREE.MeshLambertMaterial({
transparent: true,
opacity: 1,
color:0xffffff,
map: normalMap
});この記述でマテリアルを作成します。
transparent: trueとすることで透明の設定を有効にできます。
opacityの値で不透明度を設定します。
不透明度50%の場合 – opacity : 0.5
ただ暗くなったように見えますが透過して薄くなっている状態です。
またcolorでオーバーレイカラーを指定することができます。
オーバーレイカラーを赤くした場合 – color:0xff0000
球体に赤が重なりました。
// 地球を回転させる
earth.rotation.y += 0.002;球体を自動で回転させるための記述です。
数値で速度の指定を行うことができます。
自動で回転をさせずマウス操作のみで回転を扱う場合はこの記述を削除します。
主なポイントは以上です。
各ポイントの調整でデザイン・形状・速度など様々な表現が行えまるので色々と試してみてください。
サンプルファイル一式
今回作成したサンプルファイル一式はこちらからダウンロードできます。
