ViteでTypeScriptを用いたWebGLサイトの構成方法

はじめに

WebGLを使ったインタラクティブな3Dコンテンツを作成するには、効率的でモダンな開発環境が必要です。Viteは、高速なビルドとホットモジュールリプレースメント（HMR）を提供するフロントエンドツールであり、WebGLプロジェクトに最適です。ここでは、ViteとTypeScriptを使用してWebGLサイトを構築する手順をブログ形式で詳しく説明します。

Viteのセットアップ

まず、Viteプロジェクトをセットアップします。以下の手順で進めていきます。

プロジェクトの初期化

# プロジェクトディレクトリの作成
mkdir webgl-vite-project
cd webgl-vite-project

# Viteの初期化
npm init vite@latest

対話形式でプロンプトが表示されるので、以下のオプションを選択します：

Project name: webgl-vite-project
Select a framework: vanilla
Select a variant: vanilla-ts

これでViteとTypeScriptの設定が完了します。

必要なパッケージのインストール

# 依存関係のインストール
npm install

# WebGLのサポートを追加
npm install three

ディレクトリ構成

プロジェクトのディレクトリ構成は次のようになります：

webgl-vite-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── shaders/
│   ├── styles/
│   ├── main.ts
│   └── App.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

TypeScriptでWebGLの初期化

`main.ts`の作成

src/main.tsファイルを作成し、以下のコードを追加します：

import { WebGLRenderer, Scene, PerspectiveCamera, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';

function init() {
    // シーンの作成
    const scene = new Scene();

    // カメラの設定
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // レンダラーの設定
    const renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // ボックスジオメトリの作成
    const geometry = new BoxGeometry();
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new Mesh(geometry, material);

    // シーンに追加
    scene.add(cube);

    // アニメーションループ
    function animate() {
        requestAnimationFrame(animate);

        // オブジェクトの回転
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    }

    animate();
}

init();

このコードは基本的なWebGLシーンを作成し、回転する立方体を表示します。

`App.ts`の作成

src/App.tsファイルを作成し、基本的な設定を行います。

/ ここではmain.tsの初期化関数を呼び出します
import './styles.css';
import { init } from './main';

document.addEventListener('DOMContentLoaded', () => {
    init();
});

CSSの設定

src/styles.cssを作成し、基本的なスタイルを追加します。

body {
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
}

Viteの設定

vite.config.tsファイルにViteの設定を記述します。

import { defineConfig } from 'vite';

export default defineConfig({
    root: 'src',
    build: {
        outDir: '../dist',
    },
    server: {
        port: 3000,
    },
});