马黑黑 发表于 2025-5-20 07:17

three.js几何体之管道缓冲几何体

<p>管道缓冲几何体（TubeGeometry）用于创建一个沿着三维曲线延伸的管道。构造器：</p>
<blockquote>TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)</blockquote>
<p> 其中：</p>
<blockquote>
        path — Curve - 一个由基类Curve继承而来的3D路径。缺省时默认为二次贝塞尔路径<br>
        tubularSegments — 整数值，组成这一管道的分段数，默认值为 64<br>
        radius — 浮点数值，管道的半径，默认值为 1<br>
        radialSegments — 整数值，管道横截面的分段数目，默认值为 8<br>
        closed — 布尔值，管道的两端是否闭合，默认值为false
</blockquote>
<p>如下代码，演示了如何定义二次贝塞尔曲线路径并用于创建管道几何体 TubeGeometry，所构建的曲线路径是参数缺省时 three.js 使用的默认值，管道分段数、管道半径、管道横截面分段数等均使用默认值，TubeGeometry() 参数实际上可以留空。运行代码将看到一个线框立体管道：</p>
<div id="hEdiv"><pre id="hEpre">
&lt;div style="position: absolute; color: #eee; margin: 10px;"&gt;点击页面可暂停/继续动画&lt;/div&gt;
&lt;script type="module"&gt;
        import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

        const scene = new THREE.Scene;
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 5);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建二次贝塞尔路径（路径其实是默认的，这里只是为了演示）
        const path = new THREE.QuadraticBezierCurve3(
                new THREE.Vector3(-1, -1, 0),
                new THREE.Vector3(-1, 1, 0),
                new THREE.Vector3(1, 1, 0)
        );

        const geometry = new THREE.TubeGeometry(path, 64, 1, 8, false); // 参数都是默认值，可以空
        const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 'tan' }); // 线框化基础材质
        const mesh = new THREE.Mesh(geometry, material); // 构图
        scene.add(mesh); // 图形加入场景

        const clock = new THREE.Clock();

        const animate = () =&gt; {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                mesh.rotation.y -= delta / 5;
                renderer.render(scene, camera);
        };

        window.onresize = () =&gt; {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
        }

        document.onclick = () =&gt; clock.running ? clock.stop() : clock.start();

        animate();
&lt;/script&gt;
</pre></div>
<blockquote><button id="btnPrev" name="btnPrev" type="button" value="prev">运行代码</button></blockquote>

<script type="module">
        import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
        hlight.hl(hEdiv, hEpre);

        btnPrev.onclick = () => {
                const value = hEpre.textContent + '<style>body {margin: 0; }</style>';
                const previewWindow = window.open('', 'preview1', 'width=1200,height=768,top=100,left=100');
                previewWindow.document.open();
                previewWindow.document.write(value);
                setTimeout(function() { previewWindow.document.title = "预览" }, 100);
                previewWindow.document.close();
        };
</script>

梦江南 发表于 2025-5-20 07:44

黑黑老师早上好！
这是平面一点点旋转成管道，这个旋转过程太漂亮了！金黄色的细线组成的旋转管道太不可思议了！{:4_187:}

花飞飞 发表于 2025-5-20 09:16

这个管道好形象，3D模拟真实模型 ，无限接近生活实际。。。
{:4_173:}

花飞飞 发表于 2025-5-20 09:17

任意点击页面一处动态可暂停，把按纽优化了。。

红影 发表于 2025-5-20 09:37

如果把管道横截面的分段数目取更多点，就更接近于圆形管道了{:4_204:}

红影 发表于 2025-5-20 09:44

还好黑黑把默认的path写出来了，否则都不知道默认是这样的数值。
在纸上画了一下这三个点，控制点在起始点和结束点当中，是个标准圆弧，控制点移动一下就不一样了，会更复杂。还好这三个点的Z都是0，在同一平面上，否则更不可想象。

红影 发表于 2025-5-20 09:46

radius — 浮点数值，管道的半径，默认值为 1
这个没看懂，如果公式内置了，不是有三个点就能决定这条曲线了，为什么还有个半径？

红影 发表于 2025-5-20 09:50

这些线框也有意思，暂停后忽然就感觉它是逆向旋转了，可怕的视觉误差。

马黑黑 发表于 2025-5-20 12:41

红影 发表于 2025-5-20 09:50
这些线框也有意思，暂停后忽然就感觉它是逆向旋转了，可怕的视觉误差。

视觉错误

红影 发表于 2025-5-20 22:20

马黑黑 发表于 2025-5-20 12:41
视觉错误

是的，这样的视觉错误会经常发生。

马黑黑 发表于 2025-5-23 18:24

红影 发表于 2025-5-20 22:20
是的，这样的视觉错误会经常发生。
嗯嗯，再正常不过

红影 发表于 2025-5-23 23:27

马黑黑 发表于 2025-5-23 18:24
嗯嗯，再正常不过

那转向变来变去的，也有趣呢{:4_173:}

马黑黑 发表于 2025-5-23 23:53

红影 发表于 2025-5-23 23:27
那转向变来变去的，也有趣呢

还行

红影 发表于 2025-5-24 10:49

马黑黑 发表于 2025-5-23 23:53
还行

视觉错觉的妙用{:4_173:}

马黑黑 发表于 2025-5-24 13:15

红影 发表于 2025-5-24 10:49
视觉错觉的妙用

大概吧我也不清楚

红影 发表于 2025-5-24 22:57

马黑黑 发表于 2025-5-24 13:15
大概吧我也不清楚

反正看着挺奇妙的。

马黑黑 发表于 2025-5-25 18:25

红影 发表于 2025-5-24 22:57
反正看着挺奇妙的。

也许吧

红影 发表于 2025-5-25 22:32

马黑黑 发表于 2025-5-25 18:25
也许吧

three.js几何体都很强大。

马黑黑 发表于 2025-5-26 12:46

红影 发表于 2025-5-25 22:32
three.js几何体都很强大。

它就是有个问题：更新太快，新版本不太稳定。比如光源，聚光灯还是哪个的，强度小了没作用，要设置为很大才行

红影 发表于 2025-5-26 15:18

马黑黑 发表于 2025-5-26 12:46
它就是有个问题：更新太快，新版本不太稳定。比如光源，聚光灯还是哪个的，强度小了没作用，要设置为很大 ...

更新也是为了更好使用呢，虽然会带来问题，相信很快会解决。
页: [1] 2 3
查看完整版本: three.js几何体之管道缓冲几何体