Next.jsでのWebサイト制作 #3　では、トップページ紹介とThree.jsによる3Dモデルの実装紹介をしたいと思います。

トップページ紹介

トップページは以下のようになっています。（ぜひアクセスしてご覧ください。）

メイン画像＋メインメッセージ　部分
メッセージ部分
ブログ最新記事部分

メイン画像＋メインメッセージ　部分

この部分では、画像スライドショーとアニメーションによるメッセージの出現を実装しています。
ここで使用している技術は、以下過去記事にて紹介させていただいておりますので、ここでの説明は割愛させていただきます。

ブログ最新記事部分

ブログ最新記事部分では、Blogページ（microCMSからデータを取得）にて掲載している記事のうち、最新のものを表示する仕様となっています。

ここで使用している技術は、Blogページの回で紹介予定ですので、今回は割愛させていただきます。

メッセージ部分

今回の記事は、このメッセージ部分における、3Dモデル「動く地球」の実装方法をメインに紹介します。
3Dモデルは、Three.jsという Javascriptライブラリを用いて実装しています。

Three.jsとは？

Three.jsは、Webブラウザ上で3Dモデルを簡単に表示できるJavaScriptライブラリです。

JavaScriptの基本的な知識があれば、Three.jsを用いてWebブラウザ上に3Dモデルや3Dアニメーションを簡単に表示できるようになります。

もともと、WebGLという3Dモデルを扱う技術があったそうですが、かなり難易度が高いようです。（私は全く学んだことありません。。）

Three.jsを使うことでWebGLを使うよりも圧倒的に簡単に実装できます。

実装方法

3Dモデルのダウンロード

今回は以下サイトから3Dモデルを「GLTF」フォーマットでダウンロードし、public/modelsに格納しました。

インストール

npm install three

TypeScript使用時は型ファイルのインストールも必要

npm install @type/three

実装

以下が実際のコードです。
処理ごとの意味、説明は、コメントに記載してあります。

私自身、初めてThree.jsを扱ったため、わからないことが多く、「ググって。。。うまく動かないところを修正して。。。」の繰り返しでした。
そのため、あまり詳しい説明ができていませんが、ご了承ください。。。。

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

// ３Dモデル

function Earth() {
 // ３Dモデルを表示したい部分のDOM要素をuseRefでもってくる
 const canvasRef = useRef<HTMLCanvasElement | null>(null);

 // useEffect内に３Dモデルの設定を書くことで、レンダリング時に３Dモデルが生成されるようになる。
 // Three.jsで３Dモデルを出力するには、以下に定義する、scene, camera, rendererの３つのオブジェクトが最低限必要となる。
 useEffect(() => {
   const canvas = canvasRef.current as HTMLCanvasElement;

   const sizes = {
     width: 350,
     height: 370,
   };

   // scene（3D空間全体の情報をもつオブジェクト）
   const scene = new THREE.Scene();

   // camera（３Dモデルをどのように画面に映すかを、カメラをのぞいた時のようなイメージで定義できるオブジェクト）
   const camera = new THREE.PerspectiveCamera(
     85, //垂直視野
     sizes.width / sizes.height, //アスペクト比
     0.1, //Near（奥行きの手前側）
     1000 //Far（奥行きの最奥）→NearとFarの間にあるものが画面に映し出される。
   );
   camera.position.set(0, 0, 2); //カメラ自体の位置（x軸, y軸, z軸）

   // renderer（レンダリング設定）
   const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({
     canvas: canvas, //useRefでとってきた要素。ここに３Dモデルがレンダリングされる。
     antialias: true, //3Dモデルの端を滑らかにする。
     alpha: true, //背景の設定（透明にしたい場合はtrue）
   });
   renderer.setSize(sizes.width, sizes.height); //ここの記述はお決まり。
   renderer.setPixelRatio(window.devicePixelRatio); //ここの記述はお決まり。

   // ライトの設定（この設定がないと映らない３Dモデルがある）
   const light = new THREE.PointLight(0xffffff, 1); //特定の方向からのライト（第１引数：光の色、第２引数：光の強さ）
   light.position.set(0, 1, 1); //sceneから見たライトの位置　（第１引数：x軸、第２引数：y軸、第３引数：z軸）
   scene.add(light); //sceneにライトを紐付け
   const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); //全方向からのライト≒モデルそのものの光度（第１引数：光の色、第２引数：光の強さ）
   scene.add(ambientLight); //sceneにライトを紐付け

   // GLTFモデルのインポート
   let model: THREE.Object3D<THREE.Object3DEventMap>; // モデルを格納する変数
   const gltfLoader = new GLTFLoader();
   gltfLoader.load("/models/earth.gltf", (gltf) => {
     model = gltf.scene;
     model.scale.set(0.14, 0.14, 0.14); //modelの大きさ（スケール）を設定
     scene.add(model); //sceneにmodelを紐付け
   });

   // アニメーション
   const tick = () => {
     if (model) {
       // modelを回転させる
       model.rotation.y += 0.0025; // Y軸周りに毎フレーム回転（数字はスピード）
     }
     renderer.render(scene, camera); // 現在のシーンをカメラの視点からレンダリング（描画）（ここの記述はお決まり。）
     requestAnimationFrame(tick); // ブラウザに次の再描画のフレームでtick関数を呼び出すように要求（ここの記述はお決まり。）
   };
   tick(); //初回のアニメーションフレームを開始するためにtick関数を一度呼び出す（ここの記述はお決まり。）
 }, []);

 return (
   <canvas
     id="canvas"
     ref={canvasRef}
     className="  mx-auto  xl:ml-[67%]"
   ></canvas>
 );
}

export default Earth;

上記実装により、３DモデルをWebブラウザに表示することができます。

最後に

今回は、トップページ（特に３Dモデル部分）について紹介させていただきました。
Three.jsはWebGLに比べると簡単にかけるものとは言われていますが、私としては十分難しかったです。。笑

次回は、Garalleyページ、Blogページについて、紹介させていただきたいと思います。

最後までお読みいただきありがとうございました！！

p.s.
Qiitaの記事をより多くの人に読んでもらう方法を教えてください！
タイトルを検索されやすいようなタイトルにする、くらいはやってみようと思っていますが、その他何かありましたらご教授いただければ幸いです！！！