知乎未登錄時背景的動態效果是如何實現的「Three.js線材質」

這一小文，主要介紹的是Three.js線材質。

聯想到知乎首頁未登錄時的背景動態效果，就會好奇地想，知乎用的也是Three.js嗎？

答案是否定的。經過一番查找，發現知乎用的是一位法國帥哥開發的庫Particles.js。退出登陸，打開知乎首頁，查看頁面代碼：

Console里大大的"HIRE"躍然眼前，嗯，高效的招聘方式～接下來定位一下背景DOM元素，那一定是canvas元素了，搜一下，Duang~，就是這個元素，看看它的ID---Particles：

再搜一下Particles這個關鍵詞，你就能找到這個庫的地址了，Github不愧是全球最大的同性社交平台，如果你有點彎的話，可以Follow一下這位法國帥哥Vincent Garreau，並Star一下Particles.js。在這裡可以調整參數來實現知乎動態背景的效果，至此，本文標題中拋出的問題就已經解決了，但本文已經跑偏很久了，我要講的並不是這個庫，而是介紹Three.js的線材質。

為什麼要介紹Three.js線材質？原因有2點：

1、Three.js可以實現三維空間上的變化

Particles.js實現的是平面化二維的效果，讀者細心一點就可以發現，這些圓的大小是不變的，而Three.js可以讓這些圓有三維空間進深的變化，效果會好那麼一丟丟。但這裡並不打算使用Three.js重新造輪子，而是做一些簡單的實現作為線材質的介紹(如果以後有更多時間，會回來填坑)。

2、本文是Three.js教程。

喝喝，這個原因好牽強。

先來介紹一下Three.js中的線材質，LineBasicMaterial和LineDashedMaterial，實線和虛線兩種，清晰明了。創建一個虛線材質：

var lineMaterial = new THREE.LineDashedMaterial({ color: 0xffffff, linewidth: 1, scale: 1, dashSize: 3, gapSize: 1,});

需要注意的是，虛線材質需要在CanvasRenderer下渲染才會有虛線效果。

var renderer = new THREE.CanvasRenderer();

創建實線材質的話，只需要換一下材質名稱，去掉scale、dashSize、gapSize參數即可。

有了線材質，那我們需要創建一根線，然後將線材質賦予給這這根線。思路是這樣，但是Three.js創建線材質的方式稍微有點獨特，創建線和創建點雲的步驟相同，只是最後賦予的材質不同：

var lineGeometry = new THREE.Geometry();var point1 = new THREE.Vector3(0,0,0);var point2 = new THREE.Vector3(1,1,1);lineGeometry.vertices.push(point1);lineGeometry.vertices.push(point2);var line = new THREE.Line(lineGeometry, lineMaterial);

在Three.js中創建線並賦予線材質，會依次將push到其中的點連接起來。好了，線材質就簡單介紹完了。你可以嘗試用線材質，結合之前的介紹，做一些神奇的效果，看看我做了什麼：

這個Demo還有性能優化的空間，在渲染一段時間之後，有些卡頓。筆者由於技術有限，暫時沒有找到解決方案，如有高手請不吝指出。

最後，分享一個最近看到超贊的WebGL 2.0 Demo，請用Chrome打開：

上一章：《Three.js點材質》

下一章：《Three.js面材質》

推薦閱讀：