是圆环在旋转吗？

马黑黑

马黑黑

一楼代码：

1. <div id="papa" style="position: relative; width: 100%; height: 640px;"></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.         const texture = new THREE.CanvasTexture(drawTexture()); // 加载纹理
   
8.         texture.colorSpace = THREE.SRGBColorSpace; // 纹理颜色保真
   
9.         texture.wrapS = THREE.RepeatWrapping; // 纹理在X轴上重复方式
   
10.         texture.wrapT = THREE.RepeatWrapping; // 纹理在Y轴上重复方式
    
11.         texture.repeat.x = 5; // 纹理在X轴上重复次数
    
12.         texture.repeat.y = 1; // 纹理在Y轴上重复次数
    
13. 
    
14.         const geometry = new THREE.TorusGeometry(); // 圆环几何体
    
15.         const material = new THREE.MeshBasicMaterial({ map: texture }); // 基础材质+纹理
    
16.         const mesh = new THREE.Mesh(geometry, material);
    
17.         mesh.rotateX(-Math.PI / 4); // X轴上初始旋转
    
18.         scene.add(mesh);
    
19. 
    
20.         // 动画
    
21.         function animate() {
    
22.                 requestAnimationFrame(animate);
    
23.                 const delta = clock.getDelta();
    
24.                 texture.offset.x += delta / 2;
    
25.                 renderer.render(scene, camera);
    
26.         }
    
27. 
    
28.         // 绘制canvas纹理 ：两种颜色水平方向各占一半
    
29.         function drawTexture () {
    
30.                 const canv = document.createElement('canvas');
    
31.                 canv.width = 100;
    
32.                 canv.height = 100;
    
33.                 const ctx = canv.getContext('2d');
    
34.                 ctx.fillStyle = 'green';
    
35.                 ctx.fillRect(0, 0, 50, 100);
    
36.                 ctx.fillStyle = 'lightgreen';
    
37.                 ctx.fillRect(50, 0, 100, 100);
    
38.                 return canv;
    
39.         }
    
40. 
    
41.         animate();
    
42. </script>

复制代码

红影

这个和那个管道纹理流动一样，是圆环上图案的纹理流动呢

红影

这个太神奇了，纹理偏移造成的视觉误觉真的像是圆环在转动呢

杨帆

谢谢马老师精彩讲解与示范

马黑黑

红影 发表于 2025-6-24 21:13
这个太神奇了，纹理偏移造成的视觉误觉真的像是圆环在转动呢

看上去像是圆环在旋转

马黑黑

红影 发表于 2025-6-24 21:11
这个和那个管道纹理流动一样，是圆环上图案的纹理流动呢

对，是纹理持续偏移

马黑黑

杨帆 发表于 2025-6-24 21:29
谢谢马老师精彩讲解与示范

红影

马黑黑 发表于 2025-6-24 21:52
看上去像是圆环在旋转

还真的分不出是不是圆环在转的，若是圆环自身转动起来，估计效果也是一样的。

红影

马黑黑 发表于 2025-6-24 21:53
对，是纹理持续偏移

这样的持续偏移真的太奇妙了

马黑黑

红影 发表于 2025-6-24 22:43
这样的持续偏移真的太奇妙了

没错。运用的好也是很有意思的

马黑黑

红影 发表于 2025-6-24 22:42
还真的分不出是不是圆环在转的，若是圆环自身转动起来，估计效果也是一样的。

有点差别

梦油

我看是圆环在转啊。

马黑黑

梦油 发表于 2025-6-25 11:10
我看是圆环在转啊。

红影

马黑黑 发表于 2025-6-24 22:54
没错。运用的好也是很有意思的

可以弄出很多没移动的移动

红影

马黑黑 发表于 2025-6-24 22:55
有点差别

差别就在于动画帧的间隔时间，会导致微不可查的不连续吧。

梦油

马黑黑 发表于 2025-6-25 12:35

马黑黑

梦油 发表于 2025-6-25 16:50

谢茶

马黑黑

红影 发表于 2025-6-25 14:01
差别就在于动画帧的间隔时间，会导致微不可查的不连续吧。

不是酱紫。你想一想：平滑的圆和多面体

马黑黑

红影 发表于 2025-6-25 13:59
可以弄出很多没移动的移动

是的