Three.jsについての超初歩的な基本を備忘録として書いてみます。
Three.jsとは？
Three.jsは、Webブラウザ上で3Dコンテンツを制作できるJavaScriptライブラリです。通常、GLSL（シェーダー言語）を使って3Dを実装するのは大変ですが、Three.jsを利用することで、より簡単に3D空間を構築できます。
ざっくりのイメージ
3D空間を作るにはシーンと、カメラと、レンダラーが必須。
- シーン（Scene）: 3D空間そのもの。
- カメラ（Camera）: シーンを撮影するための視点。
- レンダラー（Renderer）: カメラで撮影したシーンをブラウザに表示する。
シーン（空間）上に、カメラを配置して、レンダラーが出力する。
図にするとこんなイメージ。
これらの要素を組み合わせて3D空間を作ります。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 500); // カメラの位置を設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // レンダラーのサイズを設定
document.body.appendChild(renderer.domElement); // レンダラーをDOMに追加
できました！
See the Pen Untitled by e2saeki (@e2saeki) on CodePen.
…空間の準備が整いますが、まだ何も配置されていないので「空の3D空間」が映し出されただけの状態です。
オブジェクトを配置する
ここになにかを配置していきます。
ひとまず基本の箱でも置いてみます。
基本のオブジェクト構造
オブジェクトを配置するには、以下の3つが必要です：
- ジオメトリ（Geometry）: オブジェクトの形状
- マテリアル（Material）: オブジェクトの見た目（色や質感など）
- メッシュ（Mesh）: ジオメトリとマテリアルを組み合わせたもの
const geometry = new THREE.BoxGeometry(100, 100, 100); // 箱のサイズ
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 緑色のマテリアル
const box = new THREE.Mesh(geometry, material); // メッシュに形状と素材を指定
scene.add(box); // シーンに追加
照明を追加する
現実世界と同じように、3D空間にも光源が必要です。光を追加しないと、真っ暗な空間にオブジェクトが配置されているだけになります。
const light = new THREE.DirectionalLight(0xffffff); // 白色の平行光源
light.position.set(1, 1, 1); // ライトの位置を設定
scene.add(light); // シーンに追加
これで箱が照らされるようになります。
シーンの描画
最後に、作成したシーンをブラウザに描画します。
renderer.render(scene, camera);
3Dの空間に箱が置かれたものを作ることができました！
See the Pen Untitled by e2saeki (@e2saeki) on CodePen.
アニメーションを追加
ここでひとつ重大な事実…ここのカメラってビデオではないのです。
つまり一枚の静止画しか映し出されません。
でもせっかく３Dだし？色々動かしたいですよね。
基本的なアニメーション
Three.jsではrequestAnimationFrameを使用して、フレームごとにシーンを更新します。
function animate() {
requestAnimationFrame(animate); // 毎フレーム自身を呼び出す
box.rotation.x += 0.01; // 箱を回転
box.rotation.y += 0.01;
renderer.render(scene, camera); // シーンを描画
}
animate();
GSAPでアニメーション
より高度なアニメーションには、GSAPライブラリを使用するのがおすすめです。たとえば、以下のコードで箱を回転させ続けることができます。
gsap.to(box.rotation, { duration: 10, y: Math.PI * 2, x: Math.PI * 2, repeat: -1 });
See the Pen sample02 by e2saeki (@e2saeki) on CodePen.
おまけ:スクロール連動のアニメーション
GSAPを使えば、スクロールトリガーを設定して、スクロールに連動した3Dアニメーションも実現できます。
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
trigger: box,
start: 'top center',
end: 'bottom center',
onUpdate: (self) => {
box.rotation.y = self.progress * Math.PI * 2; // スクロール量に応じて回転
},
});
See the Pen sample03 by e2saeki (@e2saeki) on CodePen.
まとめ
Three.jsを使うことで、意外と簡単に3D空間を作ることができます。基本的な流れとしては：
- シーン、カメラ、レンダラーを作成する
- オブジェクトやライトを追加する
- アニメーションやインタラクションを実装する
初歩的なまとめですがなにかの参考になれば