はじめに
以前、React Three Fiber(R3F)に関する記事を投稿しました。ReactではThree.jsを容易に扱えるとの噂で、触ってみましたが、そもそもThree.jsでできることが何なの分からず、環境構築止まりになってしまいました。そこで、本記事ではThree.jsを基礎から学びつつ、備忘録として記事にまとめてみたいと思います。
- Three.js勉強1: 環境構築
- Three.js勉強1.5: 環境構築(ローカル編)
- Three.js勉強2: シーンの主要要素
- Three.js勉強3: 3Dオブジェクトの描画
- Three.js勉強4: アニメーションと再レンダリング
環境構築
環境を構築する方法としては次の2つがあります。本記事では、1つ目の「CDNからのインポート」について記します。2つ目については、公式リファレンスドキュメントにある『Option 1: Install with NPM and a build tool』をご確認ください。3つ目については、この記事をご覧ください。
- CDNからのインポート
- NPMとビルドツールの利用
- ライブラリをローカルにダウンロード
プロジェクトの構造
最小限のThree.jsプロジェクトは次の構成で成り立ちます。なお、各ファイル名は例であり、特に main.js は index.html でインポートするファイル名に従ってください。
| ファイル | 役割 |
|---|---|
index.html |
Webページを表示する |
main.js |
three.jsを使ったシーンの定義 |
ファイル内容
index.html
Webページを定義する index.html の内容を次に示します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページのタイトル</title>
<style>
body {
margin: 0;
}
</style>
<!-- CDNからThree.jsのインポート -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@バージョン/build/three.module.js",
"three/addons/": "https://unpkg.com/three@バージョン/examples/jsm/"
}
}
</script>
</head>
<body>
<!-- three.jsを使ったシーンのインポート -->
<script type="module" src="./main.js"></script>
</body>
</html>
次の点に注意してください。
-
<head>要素にあるThree.jsのインポートではバージョンにバージョンを指定する必要がある。最新のバージョンはこのページで参照できる。(2023年12月22日時点ではv0.159.0が最新である) -
<body>要素にある描画シーンのインポートではプロジェクトに応じたファイル名を指定する必要がある。
具体例
次にindex.htmlの具体的な例を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webページのタイトル</title>
<style>
body {
margin: 0;
}
</style>
<!-- CDNからThree.jsのインポート -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@v0.159.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@v0.159.0/examples/jsm/"
}
}
</script>
</head>
<body>
<!-- three.jsを使ったシーンのインポート -->
<script type="module" src="./main.js"></script>
</body>
</html>
main.js
main.js の内容を次に示します。
main.js
// Three.jsのインポート
import * as THREE from 'three';
/* ----------- */
/* シーンの描画 */
/* ----------- */
シーンを描画するにあたり、Three.jsのインポートが必要になることを注意してください。
具体例
次にmain.jsの具体的な例を示します。
main.js
import * as THREE from 'three';
// シーンの作成
const scene = new THREE.Scene();
// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 立方体の作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// アニメーションの設定
const animate = function () {
requestAnimationFrame(animate);
// オブジェクトの回転
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
具体例の動作結果
VSCodeの拡張機能Live Servreでindex.htmlをローカル環境で立ち上げると、シーンが描画されます。具体例の描画では、緑色の立方体が回転しているアニメーションが表示されます。
次回の記事
参考
- Three.jsの公式ドキュメント
- NPMにおけるThree.jsのバージョン