Threejs—BIM管道流向动态效果

BIM管道流向主要是描述管道内液体流动方向的一个业务场景，

在BIM管道分析展示中一个比较常用的场景，这次基于threejs的纹理流动，实现一版效果，主要如下：

原理很简单就是借助TubeGeometry，配合MeshPhongMaterial材质，在设置texture 的时候，给一个循环函数，让纹理的offset（偏移）每次都递增，就可以达到感觉有一个流动的特效。

// 此部分为了展示为hardcodeconst pathArr = [4624.99, 2329.38, -5843.11,4624.99, 4643.14, -5843.11,1437.47, 4643.14, -5819.36,1413.69, 4643.14, -1854.40,-6983.28, 4643.14, -1854.04,-7078.43, 4643.14, 2149.46]const  radius =  500

核心代码函数createTube如下

// 动态创建一个管道function createTube(pathArr, radius) {let curveArr = []// 三个一组取出curve数据for(let i=0; i < pathArr.length; i+=3) {curveArr.push(new THREE.Vector3(pathArr[i], pathArr[i+1], pathArr[i+2]))}var curve = new THREE.CatmullRomCurve3(curveArr);/*** TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)*/var tubeGeometry = new THREE.TubeGeometry(curve, 100, radius, 50, false);var textureLoader = new THREE.TextureLoader();var texture = textureLoader.load(`${process.env.BASE_URL}imgLib/arrow.png`);// 设置阵列模式 RepeatWrappingtexture.wrapS = THREE.RepeatWrappingtexture.wrapT = THREE.RepeatWrapping// 设置x方向的重复数(沿着管道路径方向)// 设置y方向的重复数(环绕管道方向)texture.repeat.x = 10;texture.repeat.y = 4;// 设置管道纹理偏移数,便于对中texture.offset.y = 0.5;var tubeMaterial = new THREE.MeshPhongMaterial({map: texture,transparent: true,});var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);// 使用加减法可以设置不同的运动方向setInterval(() => {texture.offset.x -= 0.0076})return tube}

具体业务中需要定位组织数据管道路径curve，可以从boundingbox中求出一个外接圆，进而套用这个方法生成流动特效，注意组件销毁时候的setInterval函数的清除避免内存泄漏。

BIM树洞

做一个静谧的树洞君

用建筑的语言描述IT事物；

用IT的思维解决建筑问题；

共建BIM桥梁，聚合团队。

本学习分享资料不得用于商业用途，仅做学习交流！！如有侵权立即删除！！

微信公众号： BIM树洞
知乎专栏：BIM树洞
气氛组博客：http://www.31bim.com
BIM应用及咨询，CAD,Revit, OpenGL，图形开发交流，加Q群1083064224

Threejs—BIM管道流向动态效果相关推荐

你所不知道的ndJSON：序列化与管道流
一直以为对JSON所有的语法都了如指掌,毕竟json的标准用一只手都数的过来,直到我发现了一个叫ndJSON的标准,简单说,以下2种语法都是合法的: 图一:json格式图二:ndjson格式其中图 ...
基于VS2019 C++的跨平台（Linux）开发（1.5）——管道
一.管道概述 1.1.管道概念管道是Unix中最古老的进程间通信的形式.我们把从一个进程连接到另一个进程的一个数据流(文件IO流)称为一个"管道". 1.2.管道特点管道是半双 ...
nodejs-stream部分
参考: https://blog.csdn.net/eeewwwddd/article/details/81042225 http://nodejs.cn/api/stream.html#stream ...
多个线程访问统一对象的不同方法_不会多线程还想进BAT？精选19道多线程面试题，有答案边看边学...
一. Java程序如何停止一个线程? 建议使用"异常法"来终止线程的继续运行.在想要被中断执行的线程中, 调用 interrupted()方法,该方法用来检验当前线程是否已经被中断 ...
带wiringPi库的交叉编译
WiringPi的下载--网盘提取链接:https://pan.baidu.com/s/1cPIt-xZLye1DAQjq2yKzeg 提取码:35vt (这个库不是很好,链接的库的格式不对,是宿主 ...
linux 进程通信 pipe
pipe函数管道函数 man pipe #include <unistd.h> int pipe(int pipefd[2]);参数介绍:pipefd读写文件描述符,0-代表读, 1-代 ...
npm以及gulp相关操作
在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...
Oozie-4.1.0-cdh5.5.2 安装部署使用
文章目录一.Hadoop常见调度框架 1.Work Flow流程图: 2.Oozie有几个主要概念: 二.Oozie安装 1.编译源码,解压压缩包: 2.详细配置: (1)生成mysql数据表(oo ...
新一代三维GIS技术体系再升维
编者按:在2018 GIS 软件技术大会上,超图发布了SuperMap GIS 9D(2019)系列产品,该版本全面拥抱空间大数据技术,并在微服务.容器化.云原生.自动化运维等方面全新升级,进一步优化 ...

Threejs—BIM管道流向动态效果

Threejs—BIM管道流向动态效果

Threejs—BIM管道流向动态效果

Threejs—BIM管道流向动态效果相关推荐

最新文章

热门文章