three.js的wave特效(ivew官網首頁波浪特效實現)


查看效果請訪問:https://521lbx.github.io/Web3D/index.html
公司的好幾個vue項目都是用ivew作為UI框架,所以ivew官網時不時就得逛一圈。每一次進首頁都會被首頁的波浪特效驚艷到,一時手癢,就有個這篇隨筆!
猜了猜應該是使用three.js寫的,就上three.js官網上逛盪逛盪,果不其然,官網有個wave的特效,但要做成ivew官網的樣子,還是需要做些功夫的。

首先是點點的顏色(官網例子是白色的),然后是特效的區域(官網是滿屏),最后是設置特效只在波浪上層有效(官網的特效波浪是可以翻過來的,好尷尬!!!)
點點的顏色可以在初始化中設置,如下圖:

特效區域直接設置容器的寬度、高度即可。

設置特效只在波浪上層有效,其實只要設置鼠標左右滑動時將mouseY設置在合適的位置,並在鼠標移動時保持不變。

代碼詳見:https://github.com/521lbx/Web3D

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM