Vue項目使用particles.js粒子效果以及銷毀

最近在使用Vue+Element開發(fā)一個后臺管理系統(tǒng)，想找一個好看點的素材當(dāng)背景，突然找到 particles.js (傳送門： )，也就是傳說的粒子效果。于是想使用它當(dāng)作登陸背景。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、伍家崗網(wǎng)站維護(hù)、網(wǎng)站推廣。

先上效果圖如下

如圖可以看得到粒子效果在上面，而登錄框則被擠到下面，因此需要通過css定位來調(diào)整位置，使其達(dá)到想要的效果。

粒子效果在登陸后默認(rèn)會繼續(xù)運行，會導(dǎo)致瀏覽器占用資源過高，查看其源碼后發(fā)現(xiàn)作者為其寫了一個銷毀粒子函數(shù)，因此可以在登陸后經(jīng)行手動銷毀粒子效果，釋放資源。

后記：粒子銷毀后如果用戶退出登陸返回到登陸頁面，粒子效果將不再渲染，這個問題目前還沒有解決，到時候要是解決了再來補(bǔ)充吧。

前端 | 利用particles.js實現(xiàn)粒子動效

最近做了一個PC站首頁demo，為了讓頁面不至于太死板，在背景上給一些模塊加入了這種粒子效果，

移動端demo：

PC端demo：

線上test：

如果需要看源碼實現(xiàn)可以在github上看看：

具體實現(xiàn)：

配置可參考：

當(dāng)然也可直接看

通過不同的配置可以實現(xiàn)很多不一樣的效果哦。動手去試試吧。

沒做這個之前，都不知道這叫什么，只知道有時候會在一些網(wǎng)站上看到，也沒太注意，真正想要用的時候，不知道去搜什么，所在在找的過程中也花了一點時間，如果你也需要這種效果，那么這篇文章適合你看看哦。

不是每一次努力都有收獲，但是，每一次收獲都必須努力。加油。

three.js Hightopo Babylon.js 各有什么優(yōu)缺點

Hightopo具有一套豐富的 JavaScript 界面類庫，提供完整的基于 HTML5 圖形界面組件庫。使用 Hightopo您可以輕松構(gòu)建現(xiàn)代化的，跨桌面和移動終端的企業(yè)應(yīng)用，無需擔(dān)憂跨平臺兼容性，及觸屏手勢交互等棘手問題。

一套監(jiān)控可視化解決方案，可用于快速創(chuàng)建和部署，高度可定制化，并具有強(qiáng)大交互功能的拓?fù)鋱D形及表盤圖表等應(yīng)用。Hightopo 非常適用于實時監(jiān)控系統(tǒng)的界面呈現(xiàn)，廣泛應(yīng)用于電信網(wǎng)絡(luò)拓?fù)浜驮O(shè)備管理，以及電力、燃?xì)獾裙I(yè)自動化 (HMI/SCADA) 領(lǐng)域。

一套強(qiáng)大的基于 WebGL 技術(shù)的 3D 圖形引擎。Hightopo?提供了一套獨特的 WebGL 層抽象，將 Model–View–Presenter (MVP) 的設(shè)計模型延伸應(yīng)用到了 3D 圖形領(lǐng)域。使用 Hightopo 您可更關(guān)注于業(yè)務(wù)邏輯功能，不必將精力投入復(fù)雜 3D 渲染和數(shù)學(xué)等非業(yè)務(wù)核心的技術(shù)細(xì)節(jié)。

ThreeJS簡介

近年來web得到了快速的發(fā)展。隨著HTML5的普及，網(wǎng)頁的表現(xiàn)能力越來越強(qiáng)大。網(wǎng)頁上已經(jīng)可以做出很多復(fù)雜的動畫，精美的效果。 但是，人總是貪的。那么，在此之上還能做什么呢？其中一種就是通過WebGL在網(wǎng)頁中繪制高性能的3D圖形。

OpenGL 它是最常用的跨平臺圖形庫。

WebGL 是基于 OpenGL 設(shè)計的面向web的圖形標(biāo)準(zhǔn)，提供了一系列JavaScript API，通過這些API進(jìn)行圖形渲染將得以利用圖形硬件從而獲得較高性能。

而 Three.js 是通過對 WebGL 接口的封裝與簡化而形成的一個易用的圖形庫。

簡單點的說法 threejs=three + js ，three表示3D的意思，js表示javascript的意思。那么合起來，three.js就是使用javascript 來寫3D程序的意思。而javascript的計算能力因為google的V8引 擎得到了迅猛的增強(qiáng)，做3D程序，做服務(wù)器都沒有問題。

WebGL 門檻相對較高，需要相對較多的數(shù)學(xué)知識（線性代數(shù)、解析幾何）。因此，想要短時間上手 WebGL 還是挺有難度的。 Three.js 對 WebGL 提供的接口進(jìn)行了非常好的封裝，簡化了很多細(xì)節(jié)，大大降低了學(xué)習(xí)成本。并且，幾乎沒有損失 WebGL 的靈活性。

因此，從 Three.js入 手是值得推薦的，這可以讓你在較短的學(xué)習(xí)后就能面對大部分需求場景。

Three.js 的入門是相對簡單的，但是當(dāng)我們真的去學(xué)的時候，會發(fā)現(xiàn)一個很尷尬的問題：相關(guān)的學(xué)習(xí)資料很少。

通常這種流行的庫都有很完善的文檔，很多時候跟著官方的文檔或官方的入門教程學(xué)習(xí)就是最好的路線。但Three不是的，它的文檔對初學(xué)者來說太過簡明扼要。

不過官方提供了非常豐富的examples，幾乎所有你需要的用法都在某個example中有所體現(xiàn)。但這些example不太適合用來入門，倒是適合入門之后的進(jìn)一步學(xué)習(xí)。

這里推薦一些相對較好的教程：

當(dāng)然，實際的學(xué)習(xí)過程中這些資料肯定是不太夠的，遇到問題還是要自己去查資料。不過這里要提醒一下，Three.js的更新是相當(dāng)頻繁的，現(xiàn)在是r80版本，自2010年4月發(fā)布r1以來，這已經(jīng)是第72個版本了(中間有的版本號跳過了)。因此，在網(wǎng)上找到的資料有些可能是不適合當(dāng)前版本的，需要注意甄別(前面推薦的資料也都或多或少存在這樣的問題)。

要在屏幕上展示3D圖形，思路大體上都是這樣的：

1、構(gòu)建一個三維空間

Three中稱之為場景(Scene)

2、選擇一個觀察點，并確定觀察方向/角度等

Three中稱之為相機(jī)(Camera)

3、在場景中添加供觀察的物體

Three中的物體有很多種，包括Mesh,Line,Points等，它們都繼承自O(shè)bject3D類

4、將觀察到的場景渲染到屏幕上的指定區(qū)域

Three中使用Renderer完成這一工作

場景是所有物體的容器，也對應(yīng)著我們創(chuàng)建的三維世界。

Camera是三維世界中的觀察者，為了觀察這個世界，首先我們要描述空間中的位置。 Three中使用采用常見的右手坐標(biāo)系定位。

Three中的相機(jī)有兩種，分別是正投影相機(jī)THREE.OrthographicCamera和透視投影相機(jī)THREE.PerspectiveCamera。

這里補(bǔ)充一個視景體的概念：視景體是一個幾何體，只有視景體內(nèi)的物體才會被我們看到，視景體之外的物體將被裁剪掉。這是為了去除不必要的運算。

正交投影相機(jī)的視景體是一個長方體，OrthographicCamera的構(gòu)造函數(shù)是這樣的：

Camera本身可以看作是一個點，left則表示左平面在左右方向上與Camera的距離。另外幾個參數(shù)同理。于是六個參數(shù)分別定義了視景體六個面的位置。

可以近似地認(rèn)為，視景體里的物體平行投影到近平面上，然后近平面上的圖像被渲染到屏幕上。

2）透視投影相機(jī)

fov對應(yīng)著圖中的視角，是上下兩面的夾角。aspect是近平面的寬高比。在加上近平面距離near，遠(yuǎn)平面距離far，就可以唯一確定這個視景體了。

透視投影相機(jī)很符合我們通常的看東西的感覺，因此大多數(shù)情況下我們都是用透視投影相機(jī)展示3D效果。

有了相機(jī)，總要看點什么吧？在場景中添加一些物體吧。

Three中供顯示的物體有很多，它們都繼承自O(shè)bject3D類，這里我們主要看一下Mesh和Points兩種。

1）Mesh

我們都知道，計算機(jī)的世界里，一條弧線是由有限個點構(gòu)成的有限條線段連接得到的。線段很多時，看起來就是一條平滑的弧線了。

計算機(jī)中的三維模型也是類似的，普遍的做法是用三角形組成的網(wǎng)格來描述，我們把這種模型稱之為Mesh模型。

geometry是它的形狀，material是它的材質(zhì)。

不止是Mesh，創(chuàng)建很多物體都要用到這兩個屬性。下面我們來看看這兩個重要的屬性。

2）Geometry

Geometry，形狀，相當(dāng)直觀。Geometry通過存儲模型用到的點集和點間關(guān)系(哪些點構(gòu)成一個三角形)來達(dá)到描述物體形狀的目的。

Three提供了立方體(其實是長方體)、平面(其實是長方形)、球體、圓形、圓柱、圓臺等許多基本形狀；

你也可以通過自己定義每個點的位置來構(gòu)造形狀；

對于比較復(fù)雜的形狀，我們還可以通過外部的模型文件導(dǎo)入。

3）Material

Material，材質(zhì)，這就沒有形狀那么直觀了。

材質(zhì)其實是物體表面除了形狀以為所有可視屬性的集合，例如色彩、紋理、光滑度、透明度、反射率、折射率、發(fā)光度。

這里講一下材質(zhì)(Material)、貼圖(Map)和紋理(Texture)的關(guān)系。

材質(zhì)上面已經(jīng)提到了，它包括了貼圖以及其它。

貼圖其實是‘貼’和‘圖’，它包括了圖片和圖片應(yīng)當(dāng)貼到什么位置。

紋理嘛，其實就是‘圖’了。

Three提供了多種材質(zhì)可供選擇，能夠自由地選擇漫反射/鏡面反射等材質(zhì)。

4）Points

講完了Mesh，我們來看看另一種Object——Points。

Points其實就是一堆點的集合，它在之前很長時間都被稱為ParticleSystem(粒子系統(tǒng))，r68版本時更名為PointCloud,r72版本時才更名為Points。更名主要是因為，Mr.doob認(rèn)為，粒子系統(tǒng)應(yīng)當(dāng)是包括粒子和相關(guān)的物理特性的處理的一套完整體系，而Three中的Points簡單得多。因此最終這個類被命名為Points。

5）Light

神說：要有光！

光影效果是讓畫面豐富的重要因素。

Three提供了包括環(huán)境光AmbientLight、點光源PointLight、 聚光燈SpotLight、方向光DirectionalLight、半球光HemisphereLight等多種光源。

只要在場景中添加需要的光源就好了。

6）Renderer

在場景中建立了各種物體，也有了光，還有觀察物體的相機(jī)，是時候把看到的東西渲染到屏幕上了。這就是Render做的事情了。

Renderer綁定一個canvas對象，并可以設(shè)置大小，默認(rèn)背景顏色等屬性。

調(diào)用Renderer的render函數(shù)，傳入scene和camera，就可以把圖像渲染到canvas中了。

現(xiàn)在，一個靜態(tài)的畫面已經(jīng)可以得到了，怎么才能讓它動起來？

很簡單的想法，改變場景中object的位置啊角度啊各種屬性，然后重新調(diào)用render函數(shù)渲染就好了。

那么重新渲染的時機(jī)怎么確定？

HTML5為我們提供了requestAnimFrame，它會自動在每次頁面重繪前調(diào)用傳入的函數(shù)。

如果我們一開始這樣渲染：

只需要改成這樣：

object就可以動起來了！

下面我們用一個簡單的例子來梳理一下這個過程。

首先寫一個有Canvas元素的頁面吧。

下面來做Javascript的部分

首先初始化Renderer

初始化場景:

初始化相機(jī)：

要唯一確定一個相機(jī)的位置與方向，position、up、lookAt三個屬性是缺一不可的。

這里我們創(chuàng)建了一個正交投影相機(jī)，這里我將視景體大小與屏幕分辨率保持一致只是為了方便，這樣坐標(biāo)系中的一個單位長度就對應(yīng)屏幕的一個像素了。

我們將相機(jī)放在Z軸上，面向坐標(biāo)原點，相機(jī)的上方向為Y軸方向，注意up的方向和lookAt的方向必然是垂直的（類比自己的頭就知道了）。

下面添加一個立方體到場景中：

注意我們使用了法向材質(zhì) MeshNormalMaterial ，這樣立方體每個面的顏色與這個面對著的方向是相關(guān)的，更便于觀察/調(diào)試。

在這個簡單的demo里我不打算添加光影效果，而法向材質(zhì)對光也是沒有反應(yīng)的。 最后來創(chuàng)建一個動畫循環(huán)吧

每次重繪都讓這個立方體轉(zhuǎn)動一點點。 當(dāng)頁面加載好時，調(diào)用前面這些函數(shù)就好了。

WebGL中文網(wǎng) 強(qiáng)烈推薦!!

WebGL中文教程網(wǎng)

怎么給html5背景加上js粒子特效

使用了particles.js

particles.js可以從github網(wǎng)站下載到最新的源碼，網(wǎng)址是

使用方法非常簡單

第一步，在html中引入腳本文件 particles.min.js，這個文件在下載的壓縮包里可以找到

script?src="particles.min.js"/script

第二步，在html中放入一個div容器，設(shè)置id為particles-js。這個一般放在所有網(wǎng)頁元素的最后面就可以。

div?id="particles-js"/div

style?type="text/css"

#particles-js?{

position:?absolute;

top:0;

width:100%;

}

/style

第三步，設(shè)置窗口樣式

style?type="text/css"

#particles-js?{

z-index:?-1;

position:?absolute;

top:?0;

width:?100%;

background:?#aaa;

}/style

第四步，腳本生成粒子效果，可以單獨放在一個js文件里，也可以放在script標(biāo)簽里。無論如何，這段腳本要出現(xiàn)在div容器之后。

particlesJS("particles-js",?{??"particles":?{????"number":?{??????"value":?380,??????"density":?{????????"enable":?true,????????"value_area":?800

}

},????"color":?{??????"value":?"#ffffff"

},????"shape":?{??????"type":?"circle",??????"stroke":?{????????"width":?0,????????"color":?"#000000"

},??????"polygon":?{????????"nb_sides":?5

},??????"image":?{????????"src":?"img/github.svg",????????"width":?100,????????"height":?100

}

},????"opacity":?{??????"value":?0.5,??????"random":?false,??????"anim":?{????????"enable":?false,????????"speed":?1,????????"opacity_min":?0.1,????????"sync":?false

}

},????"size":?{??????"value":?3,??????"random":?true,??????"anim":?{????????"enable":?false,????????"speed":?40,????????"size_min":?0.1,????????"sync":?false

}

},????"line_linked":?{??????"enable":?true,??????"distance":?150,??????"color":?"#ffffff",??????"opacity":?0.4,??????"width":?1

},????"move":?{??????"enable":?true,??????"speed":?6,??????"direction":?"none",??????"random":?false,??????"straight":?false,??????"out_mode":?"out",??????"bounce":?false,??????"attract":?{????????"enable":?false,????????"rotateX":?600,????????"rotateY":?1200

}

}

},??"interactivity":?{????"detect_on":?"canvas",????"events":?{??????"onhover":?{????????"enable":?true,????????"mode":?"grab"

},??????"onclick":?{????????"enable":?true,????????"mode":?"push"

},??????"resize":?true

},????"modes":?{??????"grab":?{????????"distance":?140,????????"line_linked":?{??????????"opacity":?1

}

},??????"bubble":?{????????"distance":?400,????????"size":?40,????????"duration":?2,????????"opacity":?8,????????"speed":?3

},??????"repulse":?{????????"distance":?200,????????"duration":?0.4

},??????"push":?{????????"particles_nb":?4

},??????"remove":?{????????"particles_nb":?2

}

}

},??"retina_detect":?true});

網(wǎng)站題目：javascript粒子,javascript粒子特效
標(biāo)題網(wǎng)址：http://chinadenli.net/article24/dsipdce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站排名、定制網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)