Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイト

Astro + Spline + React + TypeScript で構築する3Dデザインが表示できるポートフォリオサイトを技術的な観点で解説させて頂きます。

目次

1.はじめに

2.Astro+Spline+React+TypeScriptの組み合わせのメリット

3.Splineの基本的な使い方

4.3Dが表示できるWebサイトの構築方法

5.まとめ

6.参考文献とリンク

はじめに

私自身フリーランスとして活動するエンジニアにとって、Webサイトは自身のスキルや作品をアピールする重要なツールです。

特に、3D表現を取り入れたインタラクティブなデザインは、他のサイトとの差別化につながります。

本記事では、Astro + Spline + TypeScript を活用し、型安全かつメンテナブルな3Dウェブサイトを構築する方法を解説します。

Astro + Spline + React + TypeScript の組み合わせのメリット

型安全でメンテナブルなコード

TypeScript を導入することで、型の保証ができるため、コードの品質が向上し、長期的なメンテナンスが容易になります。

私がプログラミングを始めたのが、C言語です。変数の型を宣言する必要があったため、型の保証ができました。

Web系では、型やメモリを気にせずに作成して動作することができます。

型の保証ができないため、バグの原因が特定しにくく、デバッグが難しかったと感じました。

そのため、型の保証ができる TypeScript を導入することで、コードの品質が向上し、長期的なメンテナンスが容易になりました。

Astro によるパフォーマンス最適化

Astro は静的サイト生成(SSG)やサーバーサイドレンダリング(SSR)をサポートし、軽量なWebページを作成できます。これにより、

3D要素を含むサイトでも爆速に動作します。

Spline による直感的な3Dデザイン

Spline は、ノーコードまたはローコードで 3D モデルを作成できるツールです。

Blenderや、Unityなどの3Dツールを使うよりも、直感的に3Dモデルを作成できます。

Astro との統合により、ブラウザで動作する軽量な3Dアニメーションを簡単に組み込めます。

Splineの基本的な使い方

Spline の基本的な使い方

Spline で 3D モデルを作成する

Spline にアクセスし、アカウントを作成。

「New File」をクリックして新しいプロジェクトを作成。

左側のツールを使って 3D モデルを作成。

アニメーションやマテリアル（テクスチャ）を適用。

「Export」>「Code Export」を選択し、公開URLを取得。

Astro に Spline を組み込む

取得した公開URLを Reactでコンポーネントとして埋め込むことで、簡単に3DモデルをWebページに表示できます。

import Spline from "@splinetool/react-spline";

export default function SplineComponent() {
  let objectToHide;

  const onLoad = (spline) => {
    objectToHide = spline.findObjectByName("speaker"); // Spline で設定したオブジェクト名
  };

  const toggleVisibility = () => {
    if (objectToHide) {
      objectToHide.visible = !objectToHide.visible;
    }
  };

  return (
    <>
      <Spline scene="https://prod.spline.design/******/scene.splinecode" onLoad={onLoad} />
      <button onClick={toggleVisibility}>表示/非表示</button>
    </>
  );
}

この方法なら、軽量かつスムーズに 3D モデルを埋め込むことができます。

3Dのオブジェクト名を取得することで、Astro側より表示・非表示の制御を行うことができます。

3Dが表示できるWebサイトの構築方法

Astro の SSR を活用する

通常、3Dコンテンツを含むサイトは JavaScript 依存度が高くなりがちですが、Astro の SSR 機能を活用することで、爆速なサイトを作成できます。

アイランド機能があるため、ページ全体を再読み込みせずに、特定のコンポーネントだけを更新することができます。

// src/pages/index.astro
---
import SplineComponent from "../components/SplineComponent.astro";
---
<html lang="ja">
  <head>
    <title>3D Portfolio</title>
    <meta name="description" content="3Dポートフォリオサイト構築方法" />
  </head>
  <body>
    <SplineComponent client:load />
  </body>
</html>