Three.js創(chuàng)意粒子特效開發(fā)：可擴(kuò)展的Sprite粒子動(dòng)畫框架解析
1. 引入 Three.js 和基礎(chǔ)設(shè)置
首先，我們需要引入 Three.js 庫，并進(jìn)行一些基本的設(shè)置，比如創(chuàng)建場景、攝像機(jī)、渲染器以及控制器。
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; // 自動(dòng)旋轉(zhuǎn)控制器
cameraCtrl.autoRotateSpeed = 5; // 自動(dòng)旋轉(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(); // 啟動(dòng)動(dòng)畫
}2. 創(chuàng)建場景與Sprite對象
我們將Sprite圖像用作對象的紋理，這樣可以讓對象看起來像是輕盈漂浮的泡泡。
在這里，使用 THREE.SpriteMaterial 創(chuàng)建Sprite材質(zhì)，并為每個(gè)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è)置攝像機(jī)位置
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對象的封裝，負(fù)責(zé)初始化Sprite、設(shè)置其隨機(jī)位置、縮放以及動(dòng)畫效果。每個(gè)Sprite在創(chuàng)建時(shí)會(huì)有一個(gè)隨機(jī)的初始位置，并且會(huì)在一定的時(shí)間內(nèi)進(jìn)行位置和透明度的動(dòng)畫。
3.1 Truc 構(gòu)造函數(shù)
function Truc() {
this.init(); // 第一步：初始化精靈(Material + Sprite)
this.shuffle(); // 第二步：設(shè)置精靈的隨機(jī)動(dòng)畫(位置、縮放、透明度)
}- 創(chuàng)建 Truc 類的對象時(shí)，構(gòu)造函數(shù)會(huì)自動(dòng)執(zhí)行兩個(gè)核心方法：
this.init()：負(fù)責(zé)材質(zhì)和精靈的基礎(chǔ)設(shè)置。
this.shuffle()：設(shè)置精靈的隨機(jī)動(dòng)畫邏輯，讓對象產(chǎn)生動(dòng)態(tài)的漂浮效果。
3.2 init 方法
Truc.prototype.init = function () {
this.material = new THREE.SpriteMaterial({
color: randomColor({ luminosity: "light" }), // 隨機(jī)顏色
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" }) 用來生成淺色系隨機(jī)顏色，讓每個(gè)精靈看上去顏色不同。
map: spriteMap 即對應(yīng)之前加載的紋理貼圖，例如一個(gè)小的圓形泡泡或其他圖案。
blending: THREE.AdditiveBlending 可以實(shí)現(xiàn)顏色疊加的炫光效果。
- this.sprite：
調(diào)用 new THREE.Sprite(this.material) 創(chuàng)建一個(gè)基于該材質(zhì)的 2D 精靈對象，能夠在 Three.js 場景中使用。
3.3 shuffle 方法
Truc.prototype.shuffle = function () {
this.scale1 = 0.1;
this.scale2 = 2 + rnd(3); // 隨機(jī)的目標(biāo)縮放值
this.sprite.scale.set(this.scale1, this.scale1, 1);
var rndv = getRandomVec3(); // 獲取隨機(jī)位置（方向隨機(jī)、半徑隨機(jī)）
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 的時(shí)長內(nèi)（this.scale2秒），向上漂浮 100
TweenMax.to(this.sprite.position, this.scale2, {
y: this.sprite.position.y + 100,
ease: Power2.easeIn,
});
// 精靈的橫向(x, z)位置隨機(jī)擺動(dòng)
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), // 重復(fù)次數(shù)
yoyo: true, // 來回?cái)[動(dòng)
});
// 最后 1 秒內(nèi)透明度由 1 減至 0
TweenMax.to(this.material, 1, {
opacity: 0,
delay: this.scale2 - 1, // 在動(dòng)畫快結(jié)束時(shí)開始變透明
ease: Power2.easeIn,
onCompleteParams: [this], // 將當(dāng)前對象傳給回調(diào)函數(shù)
onComplete: function (o) {
o.shuffle(); // 動(dòng)畫完成后重新開始，讓精靈循環(huán)出現(xiàn)
},
});
};- this.scale1 和 this.scale2：
scale1 定義初始大小（0.1），scale2 定義最終放大的倍數(shù)（2 ～ 5 之間的隨機(jī)值）。
- 初始化位置：
getRandomVec3() 返回一個(gè)隨機(jī)方向的 x, y, z，通過 multiplyScalar(50) 增大分布范圍。
this.sprite.position.y -= 25 讓精靈從較低的位置開始，以模擬“從下往上升起”的效果。
- TweenMax 動(dòng)畫：
縮放動(dòng)畫：1 秒內(nèi)從縮放值 0.1 變?yōu)?nbsp;scale2。
垂直移動(dòng)動(dòng)畫：在 scale2 秒內(nèi)向上移動(dòng) 100 個(gè)單位。
左右擺動(dòng)動(dòng)畫：同樣在 scale2 秒內(nèi)對精靈的位置進(jìn)行 x, z 方向的來回?cái)[動(dòng) ( repeat + yoyo )。
透明度漸隱：動(dòng)畫臨近結(jié)束時(shí)，開始讓精靈在 1 秒內(nèi)逐漸透明，最終為 0。完成后再次調(diào)用 shuffle() 方法，形成循環(huán)。
4. 動(dòng)畫與隨機(jī)位置
Sprite對象的運(yùn)動(dòng)是通過 TweenMax 來實(shí)現(xiàn)的。每個(gè)Sprite對象的初始位置、縮放大小以及移動(dòng)路徑都是隨機(jī)的，以模擬自然效果。shuffle() 方法通過 TweenMax 來控制Sprite的動(dòng)畫，保證了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. 窗口大小變化處理
當(dāng)窗口大小發(fā)生變化時(shí)，我們需要重新計(jì)算攝像機(jī)的視角和渲染器的大小。這可以通過監(jiān)聽 resize 事件來實(shí)現(xiàn)。
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight; // 更新攝像機(jī)的寬高比
camera.updateProjectionMatrix(); // 更新投影矩陣
renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器大小
}6. 啟動(dòng)動(dòng)畫
最后，使用 requestAnimationFrame 創(chuàng)建一個(gè)循環(huán)動(dòng)畫，不斷渲染場景，并更新攝像機(jī)的控制器。
function animate() {
requestAnimationFrame(animate);
cameraCtrl.update(); // 更新攝像機(jī)控制器
renderer.render(scene, camera); // 渲染場景
}
init(); // 啟動(dòng)初始化函數(shù)
