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

  • 10
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
实现箭头流动效果可以通过three.js中的几何体和材质来完成,具体流程如下: 1. 创建箭头的几何体 箭头可以用CylinderGeometry和ConeGeometry两个几何体组合而成,其中CylinderGeometry用于表示箭头的身体,而ConeGeometry用于表示箭头的头部。在创建几何体时,需要设置几何体的大小和位置。 2. 创建箭头的材质 箭头的材质可以使用MeshBasicMaterial或MeshLambertMaterial,这里使用MeshBasicMaterial。在创建材质时,需要设置材质的颜色和透明度。 3. 将几何体和材质组合成Mesh对象 使用THREE.Mesh()函数将箭头的几何体和材质组合成Mesh对象,并设置其位置和旋转角度。 4. 添加箭头到场景中 使用THREE.Scene.add()函数将箭头添加到场景中。 5. 定义箭头的运动路径 箭头的运动路径可以使用THREE.Curve()函数定义,可以使用贝塞尔曲线或其他曲线来定义。 6. 定义箭头的运动动画 使用THREE.AnimationMixer()函数和THREE.AnimationAction()函数来定义箭头的运动动画,其中AnimationMixer用于管理动画,AnimationAction用于定义动画的播放方式。 7. 播放箭头的运动动画 使用AnimationAction.play()函数来播放箭头的运动动画,可以设置动画的循环次数和播放速度。 8. 渲染场景 使用THREE.WebGLRenderer()函数和THREE.Renderer.render()函数来渲染场景。 完整的代码示例: ``` // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 10); // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建箭头的几何体 var cylinderGeometry = new THREE.CylinderGeometry(0.1, 0.1, 4, 32); var coneGeometry = new THREE.ConeGeometry(0.2, 1, 32); coneGeometry.translate(0, 2, 0); var arrowGeometry = new THREE.Geometry(); arrowGeometry.merge(cylinderGeometry); arrowGeometry.merge(coneGeometry); // 创建箭头的材质 var arrowMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 }); // 将几何体和材质组合成Mesh对象 var arrow = new THREE.Mesh(arrowGeometry, arrowMaterial); arrow.position.set(-5, 0, 0); arrow.rotation.y = Math.PI / 2; // 将箭头添加到场景中 scene.add(arrow); // 定义箭头的运动路径 var path = new THREE.Curve(); path.points = [new THREE.Vector3(-5, 0, 0), new THREE.Vector3(5, 0, 0)]; // 定义箭头的运动动画 var mixer = new THREE.AnimationMixer(arrow); var action = mixer.clipAction(new THREE.AnimationClip("move", -1, [new THREE.VectorKeyframeTrack(".position", [0, 1], [0, 0, 0, 5, 0, 0])])); action.loop = THREE.LoopOnce; action.timeScale = 2; // 播放箭头的运动动画 action.play(); // 渲染场景 function render() { requestAnimationFrame(render); mixer.update(0.01); renderer.render(scene, camera); } render(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值