ThreeJs技术交流(2)——箭头、标语等流动特效

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

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页