马黑黑 发表于 2025-6-24 20:15

是圆环在旋转吗？

<div id="papa" style="position: relative; width: 100%; height: 640px;"></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.CanvasTexture(drawTexture()); // 加载纹理
        texture.colorSpace = THREE.SRGBColorSpace; // 纹理颜色保真
        texture.wrapS = THREE.RepeatWrapping; // 纹理在X轴上重复方式
        texture.wrapT = THREE.RepeatWrapping; // 纹理在Y轴上重复方式
        texture.repeat.x = 5; // 纹理在X轴上重复次数
        texture.repeat.y = 1; // 纹理在Y轴上重复次数

        const geometry = new THREE.TorusGeometry(); // 圆环几何体
        const material = new THREE.MeshBasicMaterial({ map: texture }); // 基础材质+纹理
        const mesh = new THREE.Mesh(geometry, material);
        mesh.rotateX(-Math.PI / 4); // X轴上初始旋转
        scene.add(mesh);

        // 动画
        function animate() {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                texture.offset.x += delta / 2;
                renderer.render(scene, camera);
        }

        // 绘制canvas纹理 ：两种颜色水平方向各占一半
        function drawTexture () {
                const canv = document.createElement('canvas');
                canv.width = 100;
                canv.height = 100;
                const ctx = canv.getContext('2d');
                ctx.fillStyle = 'green';
                ctx.fillRect(0, 0, 50, 100);
                ctx.fillStyle = 'lightgreen';
                ctx.fillRect(50, 0, 100, 100);
                return canv;
        }

        animate();
</script>

马黑黑 发表于 2025-6-24 20:16

一楼代码：

<div id="papa" style="position: relative; width: 100%; height: 640px;"></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.CanvasTexture(drawTexture()); // 加载纹理
        texture.colorSpace = THREE.SRGBColorSpace; // 纹理颜色保真
        texture.wrapS = THREE.RepeatWrapping; // 纹理在X轴上重复方式
        texture.wrapT = THREE.RepeatWrapping; // 纹理在Y轴上重复方式
        texture.repeat.x = 5; // 纹理在X轴上重复次数
        texture.repeat.y = 1; // 纹理在Y轴上重复次数

        const geometry = new THREE.TorusGeometry(); // 圆环几何体
        const material = new THREE.MeshBasicMaterial({ map: texture }); // 基础材质+纹理
        const mesh = new THREE.Mesh(geometry, material);
        mesh.rotateX(-Math.PI / 4); // X轴上初始旋转
        scene.add(mesh);

        // 动画
        function animate() {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                texture.offset.x += delta / 2;
                renderer.render(scene, camera);
        }

        // 绘制canvas纹理 ：两种颜色水平方向各占一半
        function drawTexture () {
                const canv = document.createElement('canvas');
                canv.width = 100;
                canv.height = 100;
                const ctx = canv.getContext('2d');
                ctx.fillStyle = 'green';
                ctx.fillRect(0, 0, 50, 100);
                ctx.fillStyle = 'lightgreen';
                ctx.fillRect(50, 0, 100, 100);
                return canv;
        }

        animate();
</script>

红影 发表于 2025-6-24 21:11

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

红影 发表于 2025-6-24 21:13

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

杨帆 发表于 2025-6-24 21:29

谢谢马老师精彩讲解与示范{:4_176:}

马黑黑 发表于 2025-6-24 21:52

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

看上去像是圆环在旋转

马黑黑 发表于 2025-6-24 21:53

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

对，是纹理持续偏移

马黑黑 发表于 2025-6-24 21:53

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

{:4_191:}

红影 发表于 2025-6-24 22:42

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

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

红影 发表于 2025-6-24 22:43

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

这样的持续偏移真的太奇妙了{:4_187:}

马黑黑 发表于 2025-6-24 22:54

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

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

马黑黑 发表于 2025-6-24 22:55

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

有点差别

梦油 发表于 2025-6-25 11:10

我看是圆环在转啊。

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

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

{:4_191:}

红影 发表于 2025-6-25 13:59

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

可以弄出很多没移动的移动{:4_173:}

红影 发表于 2025-6-25 14:01

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

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

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

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


{:4_190:}

马黑黑 发表于 2025-6-25 19:54

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


谢茶

马黑黑 发表于 2025-6-25 20:22

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

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

马黑黑 发表于 2025-6-25 20:23

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

是的
页: [1] 2 3
查看完整版本: 是圆环在旋转吗？