ThreeJS：管道纹理流动

马黑黑

马黑黑

代码

1. <div id="papa" style="width: 100%;height: 600px; position: relative;"></div>
   
2. 
   
3. <script type="module">
   
4.         import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
   
5.         basic3(papa);
   
6. 
   
7.         // 加载纹理
   
8.         const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/2025/aa.jpeg');
   
9.         texture.colorSpace = THREE.SRGBColorSpace;
   
10.         texture.wrapS = THREE.RepeatWrapping;
    
11.         texture.wrapT = THREE.RepeatWrapping;
    
12.         texture.repeat.x = 10;
    
13.         texture.repeat.y = 5;      
    
14.         //绘制直管道
    
15.         const path = new THREE.LineCurve3(new THREE.Vector3(-2, 1, 0), new THREE.Vector3(2, -1, 0));
    
16.         const geometry = new THREE.TubeGeometry(path, 32, 0.2, 8, false);
    
17.         const material = new THREE.MeshBasicMaterial({ color: 0xefefee, map: texture });
    
18.         const mesh = new THREE.Mesh(geometry, material);
    
19.         scene.add(mesh);
    
20.         // 纹理动画
    
21.         const animate = () => {
    
22.                 requestAnimationFrame(animate);
    
23.                 const delta = clock.getDelta();
    
24.                 texture.offset.x -= delta;
    
25.                 renderer.render(scene, camera);
    
26.         };
    
27. 
    
28.         animate();
    
29. </script>

复制代码

马黑黑

10和11行，设置纹理的重复方式；

12和13行，设置纹理在X、Y轴上的重复次数；

17行，管道使用的材质应用纹理：map: texture

24行：纹理动画设置

注：纹理的加载本身是异步操作，可能出现这样的情况：场景渲染已完成但纹理还没有成功加载，一般的 renderer.render() 渲染是漆黑一片。解决方法有两个思路：

其一，将渲染器的渲染代码（25行）放在动画中，动画会反复执行，纹理在加载完毕后会得到渲染；

其二，使用异步方式加载纹理，在纹理加载环节中定义材质的纹理，然后渲染一次效果。

马黑黑

一楼纹理流动效果解释：使用纹理偏移的方式令纹理产生流动效果。

texture 是前面加载的纹理变量，texture.offset.x 指纹理在X轴上的偏移量，偏移量不断加上动画帧间隔时间，或加上 0.01 之类的浮点数，就会持续产生便宜变化，只要纹理合适，流动效果就会出来。

梦江南

谢谢黑黑精彩讲解，欣赏点赞！

红影

流动是用纹理在X轴上做偏移产生的么，前面设置的texture.wrapS = THREE.RepeatWrapping;重复方式和重复次数不知道是什么意思，有这样的重复再做偏移，然后才形成的流动效果么？

红影

这个效果对贴图要求挺高的。非常奇妙的效果

杨帆

逼真的管道纹理流动效果，谢谢马老师经典讲授

马黑黑

杨帆 发表于 2025-6-24 19:58
逼真的管道纹理流动效果，谢谢马老师经典讲授

马黑黑

红影 发表于 2025-6-24 14:20
这个效果对贴图要求挺高的。非常奇妙的效果

要求并不高，仅在层次感上有了就好

马黑黑

红影 发表于 2025-6-24 14:19
流动是用纹理在X轴上做偏移产生的么，前面设置的texture.wrapS = THREE.RepeatWrapping;重复方式和重复次数 ...

至少，需要运行动画偏移的轴得设置重复方式，至于重复多少次是基于纹理总体压缩效果，不定义也行

马黑黑

梦江南 发表于 2025-6-24 13:55
谢谢黑黑精彩讲解，欣赏点赞！

红影

马黑黑 发表于 2025-6-24 20:12
要求并不高，仅在层次感上有了就好

这个像是流水似的，一般的图图就没有这样的效果啊

红影

马黑黑 发表于 2025-6-24 20:13
至少，需要运行动画偏移的轴得设置重复方式，至于重复多少次是基于纹理总体压缩效果，不定义也行

嗯，知道了，想偏移的需要设置重复方式。

马黑黑

红影 发表于 2025-6-24 22:37
嗯，知道了，想偏移的需要设置重复方式。

这是最基本的。这和过去介绍的SVG的偏移差不多是一个原理，就是在SVG那里更抽象

马黑黑

红影 发表于 2025-6-24 22:35
这个像是流水似的，一般的图图就没有这样的效果啊

有层次感的图片就行，不是单色纯色的就行

红影

马黑黑 发表于 2025-6-24 22:56
这是最基本的。这和过去介绍的SVG的偏移差不多是一个原理，就是在SVG那里更抽象

对SVG的偏移已经忘得差不多了

红影

马黑黑 发表于 2025-6-24 22:56
有层次感的图片就行，不是单色纯色的就行

嗯嗯，纯色肯定不行，移动了也看不出呢。

马黑黑

红影 发表于 2025-6-25 14:59
嗯嗯，纯色肯定不行，移动了也看不出呢。

主要是有正确方向的层次就行

红影

马黑黑 发表于 2025-6-25 20:21
主要是有正确方向的层次就行

嗯嗯，沿着某个方向的有颜色的或纹路的变化。