Javascript 在Three.js中模拟流经管道的空气

我试着让气流和气流的方向像这个例子：

正如我所见，只有纹理在移动

我不知道如何使空气在管道和表面上流向正确的方向

任何想法都非常感谢

---

（我想他们可能会使用一些uv展开技术，并结合设置纹理uv偏移的动画）

看起来你可以调整纹理的uv偏移

texture.offset.x = someAnimatedValue;
texture.offset.y = someAnimatedValue;

至于制作管道本身，几乎任何3d建模软件包（blender、maya、3d studio max等）都可以让您使用。因此，要制作管道，请制作一个圆，然后沿路径拉伸它。类似地，通过沿同一曲线挤出一条线，可以沿管道中心放置墙/栅栏。默认UV坐标对于滚动来说是正确的

const scene=new THREE.scene（）；
常数照相机=新的三透视照相机（75,1,0.11000）；
const renderer=new THREE.WebGLRenderer（）；
document.body.appendChild（renderer.doElement）；
//使用箭头创建纹理
const ctx=document.createElement（“画布”）.getContext（“2d”）；
ctx.canvas.width=64；
ctx.canvas.height=64；
ctx.fillStyle=“rgba（0,0255,0.5）”；
ctx.fillRect（0,0,64,64）；
ctx.translate（32,32）；
ctx.旋转（Math.PI*.5）；
ctx.fillStyle=“rgb（0255255）”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.font=“48px无衬线”；
ctx.fillText（“➡︎", 0, 0);
const texture=new THREE.CanvasTexture（ctx.canvas）；
texture.wrapps=3.repeat wrapping；
texture.wrapT=3.0；
纹理。重复。x=4；
纹理。重复。y=9；
常数radiusTop=1；
常数半径底部=1；
常数高度=5；
常数半径段=20；
常数高度段=2；
const openEnded=true；
常量几何体=新的三个。圆柱体缓冲几何体（
半径顶部、半径底部、高度、半径分段、高度分段、开口）；
常量材质=新的三网格基本材质({
贴图：纹理，
三面，双面，
depthWrite:false，
深度测试：假，
透明：是的，
});
常量网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
mesh.rotation.z=Math.PI*.5；
函数渲染（时间）{
时间*=0.001；
调整大小（）；
恒定摄像速度=时间*0.3；
常数cameraRadius=5；
camera.position.x=Math.cos（cameraSpeed）*cameraRadius；
摄像机位置y=1；
camera.position.z=Math.sin（cameraSpeed）*cameraRadius；
摄像机。注视（网格。位置）；
texture.offset.y=（时间*3%1）；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
函数resize（）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
if（canvas.width！==宽度| | canvas.height！==高度）{
渲染器.setSize（宽度、高度、false）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
}
}

body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；}

---

看起来您可以调整纹理的UV偏移

texture.offset.x = someAnimatedValue;
texture.offset.y = someAnimatedValue;

至于制作管道本身，几乎所有3d建模软件包（blender、maya、3d studio max等）可以。因此，要制作管道，请制作一个圆，然后沿路径拉伸。类似地，您可以通过沿同一曲线拉伸一条线，将墙/栅栏沿管道中心向下放置。默认UV坐标对于滚动来说是正确的

const scene=new THREE.scene（）；
常数照相机=新的三透视照相机（75,1,0.11000）；
const renderer=new THREE.WebGLRenderer（）；
document.body.appendChild（renderer.doElement）；
//使用箭头创建纹理
const ctx=document.createElement（“画布”）.getContext（“2d”）；
ctx.canvas.width=64；
ctx.canvas.height=64；
ctx.fillStyle=“rgba（0,0255,0.5）”；
ctx.fillRect（0,0,64,64）；
ctx.translate（32,32）；
ctx.旋转（Math.PI*.5）；
ctx.fillStyle=“rgb（0255255）”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.font=“48px无衬线”；
ctx.fillText（“➡︎", 0, 0);
const texture=new THREE.CanvasTexture（ctx.canvas）；
texture.wrapps=3.repeat wrapping；
texture.wrapT=3.0；
纹理。重复。x=4；
纹理。重复。y=9；
常数radiusTop=1；
常数半径底部=1；
常数高度=5；
常数半径段=20；
常数高度段=2；
const openEnded=true；
常量几何体=新的三个。圆柱体缓冲几何体（
半径顶部、半径底部、高度、半径分段、高度分段、开口）；
常量材质=新的三网格基本材质({
贴图：纹理，
三面，双面，
depthWrite:false，
深度测试：假，
透明：是的，
});
常量网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
mesh.rotation.z=Math.PI*.5；
函数渲染（时间）{
时间*=0.001；
调整大小（）；
恒定摄像速度=时间*0.3；
常数cameraRadius=5；
camera.position.x=Math.cos（cameraSpeed）*cameraRadius；
摄像机位置y=1；
camera.position.z=Math.sin（cameraSpeed）*cameraRadius；
摄像机。注视（网格。位置）；
texture.offset.y=（时间*3%1）；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
函数resize（）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
if（canvas.width！==宽度| | canvas.height！==高度）{
设置大小（宽度、高度、假）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
}
}

body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；}