ThreeJS 粒子系統(tǒng)中，THREE.Points是用來創(chuàng)建點的類，也用來批量管理粒子，基于幾何體的頂點來渲染每個粒子。這個類的構(gòu)造函數(shù)有兩個參數(shù)，geometry(幾何體)和material(材質(zhì))，幾何體參數(shù)用來設(shè)置粒子的位置坐標，而材質(zhì)參數(shù)用來設(shè)置粒子的外觀。下面利用ThreeJS的粒子系統(tǒng)來實現(xiàn)雪花飄落動畫。

1. 尋找素材

1) 背景圖片

選擇一張雪景圖片作為背景圖

snow_bg.jpg

2) 雪花圖片

為了讓動畫效果更好，使用兩種不同形狀的雪花實現(xiàn)雪花飄落效果。

snowflake.png

2. HTML部分

網(wǎng)頁中添加canvas畫布所在的元素

<

3. JS部分

1) 初始化渲染器、場景、攝像機

var

2) 利用平面幾何體添加背景

// 平面幾何體

3) 利用THREE.Points增加雪花粒子

由于使用了兩種雪花形狀，每一個形狀需要創(chuàng)建一個THREE.Points對象

var

4) 利用requestAnimationFrame實現(xiàn)動畫

(

4. 示例

飄雪動效示例

總結(jié)

以上是生活随笔為你收集整理的three.js 几何体-组合网格_ThreeJS 粒子系统实现雪花飘落动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。