Three.js創(chuàng)意粒子特效開發(fā)：可擴展的Sprite粒子動畫框架解析
1. 引入 Three.js 和基礎(chǔ)設(shè)置
首先，我們需要引入 Three.js 庫，并進行一些基本的設(shè)置，比如創(chuàng)建場景、攝像機、渲染器以及控制器。
var scene, camera, renderer, cameraCtrl;
var whw, whh;
var nbObjects = 800; // 總共創(chuàng)建的對象數(shù)量
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
cameraCtrl = new THREE.OrbitControls(camera);
cameraCtrl.autoRotate = true; // 自動旋轉(zhuǎn)控制器
cameraCtrl.autoRotateSpeed = 5; // 自動旋轉(zhuǎn)速度
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // 將渲染器的DOM元素添加到頁面中
initScene();
window.addEventListener("resize", onWindowResize, false); // 監(jiān)聽窗口大小變化
animate(); // 啟動動畫
}2. 創(chuàng)建場景與Sprite對象
我們將Sprite圖像用作對象的紋理，這樣可以讓對象看起來像是輕盈漂浮的泡泡。
在這里，使用 THREE.SpriteMaterial 創(chuàng)建Sprite材質(zhì)，并為每個Sprite對象設(shè)置顏色和紋理。
var spriteMap = new THREE.Texture();
var bubble = new Image();
bubble.src = "data:image/png;base64,..."; // 圖片的Base64編碼
bubble.onload = function () {
spriteMap.image = bubble;
spriteMap.needsUpdate = true; // 確保圖片載入完成后更新紋理
};
function initScene() {
scene.background = new THREE.Color(0x000000); // 設(shè)置場景背景為黑色
camera.position.set(0, 20, 30); // 設(shè)置攝像機位置
var objects = [];
for (var i = 0; i < nbObjects; i++) {
var object = new Truc(); // 創(chuàng)建 Truc 對象
objects.push(object);
scene.add(object.sprite); // 將`Sprite`對象添加到場景中
}
}3. 創(chuàng)建 Truc 類與對象的初始化
Truc 類是Sprite對象的封裝，負責初始化Sprite、設(shè)置其隨機位置、縮放以及動畫效果。每個Sprite在創(chuàng)建時會有一個隨機的初始位置，并且會在一定的時間內(nèi)進行位置和透明度的動畫。
3.1 Truc 構(gòu)造函數(shù)
function Truc() {
this.init(); // 第一步：初始化精靈(Material + Sprite)
this.shuffle(); // 第二步：設(shè)置精靈的隨機動畫(位置、縮放、透明度)
}- 創(chuàng)建 Truc 類的對象時，構(gòu)造函數(shù)會自動執(zhí)行兩個核心方法：
this.init()：負責材質(zhì)和精靈的基礎(chǔ)設(shè)置。
this.shuffle()：設(shè)置精靈的隨機動畫邏輯，讓對象產(chǎn)生動態(tài)的漂浮效果。
3.2 init 方法
Truc.prototype.init = function () {
this.material = new THREE.SpriteMaterial({
color: randomColor({ luminosity: "light" }), // 隨機顏色
map: spriteMap, // 精靈紋理貼圖
transparent: true, // 啟用透明
opacity: 1, // 初始透明度
depthTest: false, // 禁用深度測試
depthWrite: false, // 禁用深度寫入
blending: THREE.AdditiveBlending, // 設(shè)置混合模式為疊加
});
this.sprite = new THREE.Sprite(this.material); // 使用材質(zhì)創(chuàng)建精靈對象
};- this.material：
使用 THREE.SpriteMaterial 定義精靈的材質(zhì)，包含顏色、紋理、透明度及混合模式等。
這里的 randomColor({ luminosity: "light" }) 用來生成淺色系隨機顏色，讓每個精靈看上去顏色不同。
map: spriteMap 即對應(yīng)之前加載的紋理貼圖，例如一個小的圓形泡泡或其他圖案。
blending: THREE.AdditiveBlending 可以實現(xiàn)顏色疊加的炫光效果。
- this.sprite：
調(diào)用 new THREE.Sprite(this.material) 創(chuàng)建一個基于該材質(zhì)的 2D 精靈對象，能夠在 Three.js 場景中使用。
3.3 shuffle 方法
Truc.prototype.shuffle = function () {
this.scale1 = 0.1;
this.scale2 = 2 + rnd(3); // 隨機的目標縮放值
this.sprite.scale.set(this.scale1, this.scale1, 1);
var rndv = getRandomVec3(); // 獲取隨機位置（方向隨機、半徑隨機）
this.sprite.position.set(rndv.x, rndv.y, rndv.z).multiplyScalar(50);
this.sprite.position.y -= 25;
// 1秒內(nèi)由 scale1 縮放到 scale2
TweenMax.to(this.sprite.scale, 1, {
x: this.scale2,
y: this.scale2,
ease: Power2.easeIn,
});
// 精靈在 scale2 的時長內(nèi)（this.scale2秒），向上漂浮 100
TweenMax.to(this.sprite.position, this.scale2, {
y: this.sprite.position.y + 100,
ease: Power2.easeIn,
});
// 精靈的橫向(x, z)位置隨機擺動
TweenMax.to(this.sprite.position, this.scale2, {
x: this.sprite.position.x + rnd(10, true),
z: this.sprite.position.z + rnd(10, true),
ease: Linear.ease,
repeat: Math.floor(this.scale2 / 1), // 重復次數(shù)
yoyo: true, // 來回擺動
});
// 最后 1 秒內(nèi)透明度由 1 減至 0
TweenMax.to(this.material, 1, {
opacity: 0,
delay: this.scale2 - 1, // 在動畫快結(jié)束時開始變透明
ease: Power2.easeIn,
onCompleteParams: [this], // 將當前對象傳給回調(diào)函數(shù)
onComplete: function (o) {
o.shuffle(); // 動畫完成后重新開始，讓精靈循環(huán)出現(xiàn)
},
});
};- this.scale1 和 this.scale2：
scale1 定義初始大?。?.1），scale2 定義最終放大的倍數(shù)（2 ～ 5 之間的隨機值）。
- 初始化位置：
getRandomVec3() 返回一個隨機方向的 x, y, z，通過 multiplyScalar(50) 增大分布范圍。
this.sprite.position.y -= 25 讓精靈從較低的位置開始，以模擬“從下往上升起”的效果。
- TweenMax 動畫：
縮放動畫：1 秒內(nèi)從縮放值 0.1 變?yōu)?nbsp;scale2。
垂直移動動畫：在 scale2 秒內(nèi)向上移動 100 個單位。
左右擺動動畫：同樣在 scale2 秒內(nèi)對精靈的位置進行 x, z 方向的來回擺動 ( repeat + yoyo )。
透明度漸隱：動畫臨近結(jié)束時，開始讓精靈在 1 秒內(nèi)逐漸透明，最終為 0。完成后再次調(diào)用 shuffle() 方法，形成循環(huán)。
4. 動畫與隨機位置
Sprite對象的運動是通過 TweenMax 來實現(xiàn)的。每個Sprite對象的初始位置、縮放大小以及移動路徑都是隨機的，以模擬自然效果。shuffle() 方法通過 TweenMax 來控制Sprite的動畫，保證了Sprite在場景中的漂浮效果。
function getRandomVec3() {
const u = Math.random();
const v = Math.random();
const theta = u * 2.0 * Math.PI;
const phi = Math.acos(2.0 * v - 1.0);
const r = Math.cbrt(Math.random());
const x = r * Math.sin(phi) * Math.cos(theta);
const y = r * Math.sin(phi) * Math.sin(theta);
const z = r * Math.cos(phi);
return { x, y, z };
}5. 窗口大小變化處理
當窗口大小發(fā)生變化時，我們需要重新計算攝像機的視角和渲染器的大小。這可以通過監(jiān)聽 resize 事件來實現(xiàn)。
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight; // 更新攝像機的寬高比
camera.updateProjectionMatrix(); // 更新投影矩陣
renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器大小
}6. 啟動動畫
最后，使用 requestAnimationFrame 創(chuàng)建一個循環(huán)動畫，不斷渲染場景，并更新攝像機的控制器。
function animate() {
requestAnimationFrame(animate);
cameraCtrl.update(); // 更新攝像機控制器
renderer.render(scene, camera); // 渲染場景
}
init(); // 啟動初始化函數(shù)
