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智能仓库——第五章: 点我跳转.