パーティクルアニメーションとは、点・小さな図形・画像などを大量に表示し、それぞれに動きを与えることで表現するアニメーションで、背景アニメーションや演出、3D表現として使用されます。
当サイトでは、GUI操作だけでThree.js用のパーティクルアニメーションコードを自動生成できるツールを提供していますので、ぜひ試してみてください。
目次
Three.jsでパーティクルを作る基本構造
Three.jsでのパーティクルは、以下の3要素で構成されます。
- BufferGeometry（パーティクルの位置情報）
- PointsMaterial（点の見た目）
- Points（描画オブジェクト）
これに、カメラ、レンダラー、アニメーションループを組み合わせて実装します。
Three.js パーティクルアニメーションの基本コード
1. HTML（Canvasを自動生成）
<body>
<script type="importmap">
{
"imports":{
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js"
}
}
</script>
<script type="module" src="main.js"></script>
</body>2. Three.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({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
3. パーティクルの生成（BufferGeometry）
const count = 2000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(count * 3);
for (let i = 0; i < count * 3; i++) {
positions[i] = (Math.random() - 0.5) * 10;
}
geometry.setAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
🔹 ポイント
- 3つの値で1点（x, y, z）
- Float32Arrayを使うことでGPU処理が高速化
4. マテリアル設定（PointsMaterial）
const material = new THREE.PointsMaterial({
color: 0x00aaff,
size: 0.05,
transparent: true,
opacity: 0.8
});設定できる主な項目：
size：点の大きさcolor：色transparent / opacity：透過
5. パーティクルをシーンに追加
const particles = new THREE.Points(geometry, material);
scene.add(particles);
6. アニメーションループ
function animate() {
requestAnimationFrame(animate);
particles.rotation.y += 0.001;
particles.rotation.x += 0.0005;
renderer.render(scene, camera);
}
animate();
これで 回転するパーティクルアニメーション が完成します。
まとめ
Three.jsを使用したパーティクルアニメーションは、WebGL（GPU）を活用することで数千〜数万の点を滑らかに描画できる表現手法です。
Canvasでは重くなりがちな表現も、Three.jsなら 3D空間・奥行き・回転・シェーダー演出 まで対応できます。
当サイトでは、GUI操作だけでThree.js用のパーティクルアニメーションコードを自動生成できるツールを提供しています。
数値を調整するだけで、すぐに実装可能なコードを出力できますので、ぜひ試してみてください。