ThreeJs技術交流（2）——箭頭、標語等流動特效

寫在前面

好久沒寫文章了，最近趁休息在家無聊有時間再來寫點東西。前段時間有朋友問我一個效果怎麼做。他也是看了CSDN上一位大神發的3D智能機房的示例，其中有一個演示如下：

圖片來源於https://blog.csdn.net/ALLENJIAO/article/details/77775043。原作中展示的是空調風向的流動效果。
我一開始以爲這只是把一張GIF作爲貼圖貼到了一個長方形平面上，然而我自己試了試發現ThreeJs並不能把GIF作爲一種材質貼到物體表面。那到底該如何實現這樣的功能呢？
後來還是經過這位提問題的朋友的點撥，終於實現了這個功能。（所以說大家一起學習交流確實可以學到很多），今天我就把它分享給大家。

效果演示

我還是基於之前寫的3D智能倉庫，在這個項目的背景上添加之後發現的好玩的東西。
2019.11.26 更新：我最近建立了個人網站，大家可以訪問下面的鏈接查看演示
3D倉庫演示
2019.11.28 更新：代碼和圖片資源等已上傳至GitHub
https://github.com/xiao149/ThreeJsDemo

在倉庫中這個效果可以作爲人員貨物走動的方向，後來我突然靈光一現，想到平常馬路上很多商店都有的走馬燈：（百度上隨便找了張，莫笑~~）

我就想着這個也可以加到我的3D倉庫中的嘛，可以輪播一些通知啊，安全生產標語啊之類的。心動不如行動，效果如下：（感覺最好還是加個邊框，不然看起來怪怪的~）

如何實現

說起來這個功能還蠻簡單的，其原理是在一個平面上貼一張靜態的圖，這些是我自己拿PS做的，大家有興趣看着用就行。


然後在動畫每一幀刷新的時候讓這個貼圖材質平移就可以了。3D倉庫的代碼大家可以翻看我之前一到五章的內容我這裏就不貼了。首先在Modules.js文件中的initMat()初始化材質信息方法中加入：

RollMat = new THREE.MeshLambertMaterial();
RollTexture = new THREE.TextureLoader().load( "./ThreeJs/images/biaoyu.png", function( map ) {
   RollMat.map = map;
    RollMat.needsUpdate = true;
    RollMat.transparent = true;
    RollMat.side = THREE.DoubleSide;
} );
RollTexture.wrapS = THREE.RepeatWrapping;
RollTexture.wrapT=THREE.RepeatWrapping;

同樣在Modules.js文件中加入以下方法：

//region 滾動的物體
function addRollPlane(scene) {
    var geometry = new THREE.PlaneGeometry( 400, 20 );
    var obj = new THREE.Mesh( geometry, RollMat );
    obj.position.set(0,150,-690);
    scene.add( obj );
}
//endregion

最後在HTML中的update()方法中加入，最後的數字代表每一幀移動的距離，可以簡單理解爲滾動的速度，數字越大滾動越快。

RollTexture.offset.x += 0.001;

對的就是這麼簡單，想必大家也能很輕鬆地掌握。大家有想法的話可以把它用到各種需要流動的地方，我這裏舉的兩個例子只是拋磚引玉。

結束語

我跟廣大學習ThreeJs的初學者一樣，仍帶着懵懂的心去探索這片新大陸，CSDN上的許多前輩都給了我很多關鍵的靈感和技術方法，如果大家有興趣，也可以互相交流成長，歡迎大家指導諮詢。PS：大家有興趣可以點進去我的頭像，陸陸續續也寫了十來篇了。
鏈接：使用ThreeJs從零開始構建3D智能倉庫——第一章: 點我跳轉.
鏈接：使用ThreeJs從零開始構建3D智能倉庫——第二章: 點我跳轉.
鏈接：使用ThreeJs從零開始構建3D智能倉庫——第三章: 點我跳轉.
鏈接：使用ThreeJs從零開始構建3D智能倉庫——第四章: 點我跳轉.
鏈接：使用ThreeJs從零開始構建3D智能倉庫——第五章: 點我跳轉.