簡單幾步打造酷炫粒子動畫

摘要： 之前看到一個外國小哥哥的網站效果，學習了利用three.js的一個粒子效果，相對簡單但是效果槓槓的，快快學起來~ 效果預覽 點選預覽效果 幾個比較重要的點 獲取圖片點資料 點的資料是通過getImageData()方法獲取的，得到的結果是一串Uint...

之前看到一個外國小哥哥的網站效果，學習了利用three.js的一個粒子效果，相對簡單但是效果槓槓的，快快學起來~

效果預覽

點選預覽效果

幾個比較重要的點

獲取圖片點資料

點的資料是通過getImageData()方法獲取的，得到的結果是一串Uint8ClampedArray資料和圖片寬高。

imageData.data中的資料每四個數代表一個點。

通過拿到的imageData，獲取R通道>0的點，設定該點的(x,y,z)座標和rgb顏色。

移動相機位置形成動畫

初始動畫和拖拽動畫的效果都是由相機的位置決定的，在初始狀態下把相機放在(0, -40, 4)的位置，也就是會以一個仰視的角度去看影象的點，這時點就是分散的。

渲染時，讓相機逐漸回到(0,0,4)的位置，面向z軸負方向，這時影象看起來就是平面且完整的。拖拽也是同理。

圖片素材

我們把小哥哥的照片拉到PS中看一看。通過這張照片，可以看到在影象上的選擇上適合有顏色的點少一些，這樣效果會比較自然。（PS上可以看到紅色通道的點基本與影象的點吻合，所以上面選擇R通道>0的思路是OK的）

隨便找一張大佬的照片試試效果，因為衣服顏色原因總體的色點還是比較多，效果就不如原例子自然，但效果還是依舊帥氣。點選預覽效果