three.jsをインストールして、立方体を表示することを目標にします。
アプリケーションフレームワークには、Svelteを使用します！

特徴

WebGL APIをラッピングしているので、簡単な設定で3D体験が可能になります。
プリミティブ図形の表示や、DCCツール(BlenderやMaya)で制作した3DCGを読み込ませて表示できます。

準備するもの

MacOS
Nodeの最新バージョン
VSCode
Svelte(インストール方法はこちらにまとめています)

Nodeの最新バージョン

※以前の記事でNodeのバージョン管理ツールからインストールする方法を記載しています！

three.jsをインストール

# three.jsインストール
npm install three

# TypeScript用の型定義(ts使うなら必須)
npm install -D @types/three

3DCGの構成

大きく分けて、カメラ、シーン、ライト、メッシュ、ジオメトリ、マテリアルで構成されています。
最終的に、キャンバスにレンダリングされて、Webブラウザで見れるようになります。

メッシュにジオメトリ、マテリアルを入れて、ライトで照らす。それをシーンとしてグループ化します。
カメラでシーンを撮影し、キャンバスに描画(レンダリング)する流れとなります。

フォルダ構成

svelteのフォルダ構成になります。lib配下にthree用のクラスを作成し、+page.svelteでimportします。

フォルダ構成

svelte-app
└── src
    ├── app.d.ts
    ├── app.html
    ├── index.test.ts
    ├── lib
    │   ├── index.ts
    │   └── three
    │       └── App.js
    └── routes
        ├── +page.svelte
        └── three
            └── +page.svelte

three/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { App } from '$lib/three/App';

	let threeApp: App;

	// https://svelte.jp/tutorial/onmount
	onMount(async () => {
		threeApp = new App();
	});
</script>

<div>
	<canvas id="canvas" />
</div>

注意としては、サーバーサイド処理では、Windowオブジェクトが参照できないため、画面描画後に３DCGを描画するようonMount内に記述します。

App.js

import * as THREE from 'three';

class App {
	constructor() {
		// 縦横のサイズをウィンドウから取得
		const width = window.innerWidth / 2;
		const height = window.innerHeight / 1.5;
		// キャンバスを指定
		const canvas = document.getElementById('canvas') || undefined;
		const renderer = new THREE.WebGLRenderer({
			canvas,
			antialias: true
		});
		renderer.setSize(width, height);
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setClearColor('#000'); // 背景黒

		// カメラを作成
		const fov = 45; // カメラの垂直視野角
		const aspect = width / height;
		const camera = new THREE.PerspectiveCamera(fov, aspect, 1, 1000);
		camera.position.z = 3;

		// メッシュを作成
		const geometry = new THREE.BoxGeometry(1, 1, 1);
		const material = new THREE.MeshPhongMaterial({
			color: '#fff' // オブジェクト白
		});
		const mesh = new THREE.Mesh(geometry, material);
		mesh.rotation.x = Math.PI * 0.15; // x軸の回転角(ラジアン)
		mesh.rotation.y = Math.PI * 0.25; // y軸の回転角(ラジアン)

		// ライトを作成
		const light = new THREE.PointLight();
		// ライトを手前右上に移動
		light.position.x = 0.5;
		light.position.y = 0.5;
		light.position.z = 3.5;

		// シーンを作成
		const scene = new THREE.Scene();
		// メッシュとライトを追加
		scene.add(mesh);
		scene.add(light);
		// カメラで撮影したシーンをcanvas要素に描画
		renderer.render(scene, camera);
	}
}
export { App };

描画するcanvasを指定し、3DCGの構成通りに設定していきます。

結果

localhost:5173/threeにアクセスして、立方体が表示されたら完成です！