精靈模型Sprite模擬下雨效果
本文是Three.js電子書的10.4節
本節課通過一個精靈模擬模擬下雨的場景進一步建立精靈模型和粒子系統的概念。
基本思路就是通過足夠多的精靈模型構成一個粒子系統,然後每一個雨滴按照在一定空間內隨機分佈,每個精靈模型都使用一個背景透明的雨滴rain.png
作爲紋理貼圖。
在空間中隨機生成靜態分佈的雨滴
/**
* 精靈創建下雨效果
*/
// 加載雨滴理貼圖
var textureTree = new THREE.TextureLoader().load("rain.png");
// 批量創建表示雨滴的精靈模型
for (let i = 0; i < 400; i++) {
var spriteMaterial = new THREE.SpriteMaterial({
map:textureTree,//設置精靈紋理貼圖
});
// 創建精靈模型對象
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精靈大小,
sprite.scale.set(8, 10, 1); //// 只需要設置x、y兩個分量就可以
var k1 = Math.random() - 0.5;
var k2 = Math.random() - 0.5;
var k3 = Math.random() - 0.5;
// 設置精靈模型位置,在整個空間上上隨機分佈
sprite.position.set(200 * k1, 200*k3, 200 * k2)
}
雨滴動態運動
把所有創建的精靈模型插入到一個組對象Group中,然後在渲染函數render()
中週期性改變每個表示雨滴精靈模型的y座標,從上到下移動。
// 創建一個組表示所有的雨滴
var group = new THREE.Group();
// 批量創建雨滴精靈模型
for (let i = 0; i < 400; i++) {
...
group.add(sprite);
}
scene.add(group);//雨滴羣組插入場景中
// 渲染函數
function render() {
// 每次渲染遍歷雨滴羣組,刷新頻率30~60FPS,兩幀時間間隔16.67ms~33.33ms
// 每次渲染都會更新雨滴的位置,進而產生動畫效果
group.children.forEach(sprite => {
// 雨滴的y座標每次減1
sprite.position.y -= 1;
if (sprite.position.y < 0) {
// 如果雨滴落到地面,重置y,從新下落
sprite.position.y = 200;
}
});
renderer.render(scene, camera); //執行渲染操作
requestAnimationFrame(render);//請求再次執行渲染函數render,渲染下一幀
}
站在雨中的效果
爲了更好觀察下雨的效果,就像人站在實際的雨中一樣,需要使用透視投影相機PerspectiveCamera,同時把透視投影相機對象的位置設置在雨粒子系統裏面而不是雨粒子系統的外面。
把透視投影相機對象放在雨粒子系統中,可以通過放大雨精靈分佈的空間範圍,也可以直接調整透視投影相機的位置。
你可以看到下面代碼精靈模型的分佈空間範圍是(0,-150,-500)
到(1000,,150,500)
對角線構成的長方體空間中,相機的位置是(292, 109, 268)
。
var k1 = Math.random() - 0.5;
var k2 = Math.random() - 0.5;
// 設置精靈模型位置,在空間中隨機分佈
sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2)
/**透視投影相機對象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(292, 109, 268);//設置相機位置