Threejs实现模拟管道液体流动

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：模拟管道液体流动。效果图如下：

2，主要说明

模拟管道液体流动实现步骤：创建管道，添加纹理，位移纹理实现流动效果。

如下函数：定义管道位置坐标，创建管道并赋予材质，并添加到场景中

function initTubeModel() {var pointsArr = [[42, 0, 10],[21, 0, 10],[21, 0, 1],[-3, 0, 1],[-3, 0, -18],[-10, 0, -18],[-10, 0, 5],[1, 0, 5],[1, 0, 24],[-27, 0, 24],[-27, 0, 18],[-46, 0, 19],[-46, 0, -4],[-25, 0, -6],[-25, 0, -19],[-35, 0, -20],[-35, 0, -26],[-30, 0, -30],[3, 0, -30]];var curve = createPath(pointsArr)var tubeGeometry = new THREE.TubeGeometry(curve, 1000, 0.5, 100, false);var textureLoader = new THREE.TextureLoader();texture = textureLoader.load('assets/textures/arrow1.jpg'); //./ZS箭头.svg  ./arrow.jpg// 设置阵列模式为 RepeatWrappingtexture.wrapS = THREE.RepeatWrappingtexture.wrapT = THREE.RepeatWrappingtexture.repeat.x = 50;texture.repeat.y = 2;texture.offset.y = 0.5;var tubeMaterial = new THREE.MeshPhongMaterial({map: texture,transparent: true,color: 0x47d8fa,side: THREE.DoubleSide,//opacity: 0.4,});// 设置数组材质对象作为网格模型材质参数var mesh = new THREE.Mesh(tubeGeometry, tubeMaterial); //网格模型对象Meshmesh.position.y = 2;mesh.rotateZ(3.14);mesh.scale.set(2, 2, 2);scene.add(mesh); //网格模型添加到场景中
}

function createPath(pointsArr) {pointsArr = pointsArr.map((point) => new THREE.Vector3(...point)); // 将参数数组转换成点数组的形式// 方法一：自定义三维路径 curvePathconst path = new THREE.CurvePath();for (let i = 0; i < pointsArr.length - 1; i++) {const lineCurve = new THREE.LineCurve3(pointsArr[i], pointsArr[i + 1]); // 每两个点之间形成一条三维直线path.curves.push(lineCurve); // curvePath有一个curves属性，里面存放组成该三维路径的各个子路径}return path;
}

流动效果关键一步，动态刷新调用，位移材质

function renderScene() {TWEEN.update();orbit.update();// 使用requestAnimationFrame函数进行渲染requestAnimationFrame(renderScene);renderer.render(scene, camera);texture.offset.x -= 0.04
}

Threejs实现模拟管道液体流动相关推荐

android 控件随手指移动_液体流动控件，隔壁产品都馋哭了
作者:彭也链接: https://www.jianshu.com/p/4f0844c72e8a 模拟液体流动的展开特效,适合一些需要侧边展开进行辅助说明的页面,如用户在填写某个表单,需要操作很多步骤 ...
WPF随笔（九）--使用路径动画模拟管道流体流向
WPF的一大特性就的动画系统,使用动画能够实现很多在WinForm很难实现的效果.最近在网上偶然看到大神用WPF动画实现对象沿特定路径正向或反向移动的效果,就想参考着自己试一试. 1.简单路径动画先 ...
【江西省研究生数学建模竞赛】第一题蒸汽发生器倒U型管内液体流动详细的数学模型及参考文献
[江西省研究生数学建模竞赛]题目之一蒸汽发生器倒U型管内液体流动相关链接 [江西省研究生数学建模竞赛]第一题蒸汽发生器倒U型管内液体流动 70页论文及MATLAB代码 [江西省研究生数学建模竞赛 ...
wincc做皮带动画_WINCC中制作管道流体流动动画的一种方法
WINCC 中制作管道流体流动动画的一种方法采用自定义对象的方法制作,不需要使用全局变量及外部量. 以制作横向向右流动流动块为例: 1 .画两个高度相等的矩形,分为是 rec1 和 rec2 , r ...
threejs进阶，管道几何体高级应用，geometry几何体应用，可拖拽改变形状的管道
threejs进阶,管道几何体高级应用,geometry几何体应用,可拖拽改变形状的管道一.threejs是什么? 二.geometry几何体使用步骤 1.引入库 2.如果使用谷歌浏览器打不开报错, ...
基于精灵（Sprite）管道烟雾流动效果
效果概念首先要明白threejs中精灵的概念,官网中对精灵的描述是: A sprite is a plane that always faces towards the camera, gener ...
网页ui设计模板素材|液体流动效果！
如今拟物化设计的热潮褪去,但是在设计UI和网页的时候依然更加深层的表现物理规则.运动特征和质感. 潮流渐变时尚背景抽象化底纹液态AI矢量潮流渐变时尚背景抽象化底纹液态物理是一门相当古老的学科,但是 ...
Threejs实现模拟河流，水面水流，水管水流，海面
1,介绍使用Three.js引入Water.js,实现模拟河流水面,水管流水. 效果图如下: 参考案例:three.js webgl - shaders - ocean (threejs.org)h ...
Shader Graph学习各种特效案例（持续更新）
文章目录前言案例 unity 2019.4.10 外发光进阶带方向的外发光裁剪进阶带边缘色的裁剪溶解进阶带边缘色溶解卡通阴影水波纹积雪效果不锈钢效果 UV抖动水波纹红旗 ...

Threejs实现模拟管道液体流动

1，介绍

2，主要说明

Threejs实现模拟管道液体流动相关推荐

最新文章

热门文章