ThreeJS：管道纹理流动
<div id="papa" style="width: 100%;height: 600px; position: relative;"></div><script type="module">
import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
basic3(papa);
// 加载纹理
const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/2025/aa.jpeg');
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 10;
texture.repeat.y = 5;
//绘制直管道
const path = new THREE.LineCurve3(new THREE.Vector3(-2, 1, 0), new THREE.Vector3(2, -1, 0));
const geometry = new THREE.TubeGeometry(path, 32, 0.2, 8, false);
const material = new THREE.MeshBasicMaterial({ color: 0xefefee, map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 纹理动画
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
texture.offset.x -= delta;
renderer.render(scene, camera);
};
animate();
</script> 代码
<div id="papa" style="width: 100%;height: 600px; position: relative;"></div>
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
basic3(papa);
// 加载纹理
const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/2025/aa.jpeg');
texture.colorSpace = THREE.SRGBColorSpace;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 10;
texture.repeat.y = 5;
//绘制直管道
const path = new THREE.LineCurve3(new THREE.Vector3(-2, 1, 0), new THREE.Vector3(2, -1, 0));
const geometry = new THREE.TubeGeometry(path, 32, 0.2, 8, false);
const material = new THREE.MeshBasicMaterial({ color: 0xefefee, map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 纹理动画
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
texture.offset.x -= delta;
renderer.render(scene, camera);
};
animate();
</script>
10和11行，设置纹理的重复方式；
12和13行，设置纹理在X、Y轴上的重复次数；
17行，管道使用的材质应用纹理：map: texture
24行：纹理动画设置
注：纹理的加载本身是异步操作，可能出现这样的情况：场景渲染已完成但纹理还没有成功加载，一般的 renderer.render() 渲染是漆黑一片。解决方法有两个思路：
其一，将渲染器的渲染代码（25行）放在动画中，动画会反复执行，纹理在加载完毕后会得到渲染；
其二，使用异步方式加载纹理，在纹理加载环节中定义材质的纹理，然后渲染一次效果。 一楼纹理流动效果解释：使用纹理偏移的方式令纹理产生流动效果。
texture 是前面加载的纹理变量，texture.offset.x 指纹理在X轴上的偏移量，偏移量不断加上动画帧间隔时间，或加上 0.01 之类的浮点数，就会持续产生便宜变化，只要纹理合适，流动效果就会出来。 谢谢黑黑精彩讲解，欣赏点赞！{:4_187:} 流动是用纹理在X轴上做偏移产生的么，前面设置的texture.wrapS = THREE.RepeatWrapping;重复方式和重复次数不知道是什么意思，有这样的重复再做偏移，然后才形成的流动效果么？ 这个效果对贴图要求挺高的。非常奇妙的效果{:4_199:} 逼真的管道纹理流动效果，谢谢马老师经典讲授{:4_191:} 杨帆 发表于 2025-6-24 19:58
逼真的管道纹理流动效果，谢谢马老师经典讲授
{:4_176:} 红影 发表于 2025-6-24 14:20
这个效果对贴图要求挺高的。非常奇妙的效果
要求并不高，仅在层次感上有了就好 红影 发表于 2025-6-24 14:19
流动是用纹理在X轴上做偏移产生的么，前面设置的texture.wrapS = THREE.RepeatWrapping;重复方式和重复次数 ...
至少，需要运行动画偏移的轴得设置重复方式，至于重复多少次是基于纹理总体压缩效果，不定义也行 梦江南 发表于 2025-6-24 13:55
谢谢黑黑精彩讲解，欣赏点赞！
{:4_190:} 马黑黑 发表于 2025-6-24 20:12
要求并不高，仅在层次感上有了就好
这个像是流水似的，一般的图图就没有这样的效果啊{:4_173:} 马黑黑 发表于 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的偏移已经忘得差不多了{:4_173:} 马黑黑 发表于 2025-6-24 22:56
有层次感的图片就行，不是单色纯色的就行
嗯嗯，纯色肯定不行，移动了也看不出呢。 红影 发表于 2025-6-25 14:59
嗯嗯，纯色肯定不行，移动了也看不出呢。
主要是有正确方向的层次就行 马黑黑 发表于 2025-6-25 20:21
主要是有正确方向的层次就行
嗯嗯，沿着某个方向的有颜色的或纹路的变化。
页:
[1]
2