WebGL / Showcase
粒子フィールド
マウスに反応する数千点のWebGL粒子。Three.js + GLSL を組み合わせた、ヒーロー演出の定番。
- Three.js
- WebGL
- Canvas
Live Demo マウスを動かしてみてください
概要
WebGL（Three.js）による粒子フィールド。
マウス座標に応じて粒子の流れが変化、訪問者のアクションに「反応する空間」を演出します。
本サイトのトップヒーローセクションに実装中です。
技術要素
- Three.js による Points geometry
- BufferGeometry での効率的描画
- AdditiveBlending によるネオン発光
- IntersectionObserver / visibilitychange でタブ非表示時に停止
- prefers-reduced-motion 配慮（粒子数を1/5に減らす）
実装難易度
★★★（中〜上級）
想定工数・費用感
- 工数：3日（24時間）
- 価格目安：¥150,000〜
サイトのコンセプトに合わせた色設計・モーション調整込み。