论坛 › 马黑黑教程专版 › three.js几何体之圆柱缓冲几何体（CylinderGeometry）

马黑黑 发表于 2025-5-14 20:04

three.js几何体之圆柱缓冲几何体（CylinderGeometry）

<style>
        #btnPrev { box-shadow: 2px 2px 6px rgba(0,0,0,.5); }
        #btnPrev:hover { box-shadow: 2px 2px 12px rgba(0,0,0,.5); font-weight: bold; }
</style>

<p>圆柱缓冲几何体（CylinderGeometry）是一个用于生成圆柱几何体的类。构造器：</p>
<blockquote>CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)</blockquote>
<p> 其中：</p>
<blockquote>
        radiusTop — 圆柱的顶部半径，默认值是 1<br>
        radiusBottom — 圆柱的底部半径，默认值是 1<br>
        height — 圆柱的高度，默认值是 1<br>
        radialSegments — 圆柱侧面周围的分段数，默认为 32<br>
        heightSegments — 圆柱侧面沿着其高度的分段数，默认值为 1<br>
        openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的<br>
        thetaStart — 第一个分段的起始角度，默认为 0（三点钟方向）<br>
        thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱
</blockquote>
<p>在下面的代码中，我们用圆柱几何体+颜色+纹理贴图创建一个圆柱立体图案：</p>
<div id="hEdiv"><pre id="hEpre">
&lt;script type="module"&gt;
        import * as THREE from 'https://esm.sh/three'; // three主库
        import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库

        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); // 渲染器加入到body标签

        const controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
        controller.autoRotate = true; // 开启自动旋转

        const geometry = new THREE.CylinderGeometry(1, 1, 3); // 创建圆柱形几何体 : 顶、底、高
        // 用图片做纹理贴图（要求图片与页面同源或异域图片支持跨域）
        const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/Pic/xuehua.jpg', () => {
                renderer.render(scene, camera); // 立即渲染，否则一开始是黑色效果
        });
        // 创建材质
        const material = new THREE.MeshBasicMaterial({
                color: 'gold', // 颜色（会改变影响纹理贴图）
                map: texture, // 使用上面创建的纹理贴图
                transparent: true, // 开启透明度
                opacity: 0.5 // 不透明度（透明度 = 1 - opacity）
        });
        const cylinder = new THREE.Mesh(geometry, material); // 创建圆柱网格对象

        scene.add(cylinder); // 圆柱网格对象加入到场景

        //renderer.render(scene, camera); // 至此已经可以将静态效果渲染出来

        // 动画函数
        const animate = () =&gt; {
                requestAnimationFrame(animate); // 请求关键帧动画递归调用函数自身
                controller.update(); // 更新轨道控制器令其自转
                renderer.render(scene, camera); // 渲染效果
        };

        animate(); // 运行动画
       
        window.onresize = () =&gt; renderer.setSize(window.innerWidth, window.innerHeight);
&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-14 21:14

这个圆柱体参数有这么多，好细致。。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的
底面开放还是封顶，不都是封着的么。。
开放是什么是意思，是没有底面，然后直接看着像是圆桶么。。{:4_173:}

花飞飞 发表于 2025-5-14 21:18

这个代码构成跟别的缓冲几何体差不多~~
多个参数只设了前三个，也贴了纹理图片，对比一下实例里的更接近真实木头。。
这个还是可以鼠标各个角度移动的，而实例里的只能按设定的左右滚动。。
再回头去瞅瞅实例{:4_173:}

杨帆 发表于 2025-5-14 21:25

漂亮，谢谢老师精彩分享{:4_191:}

红影 发表于 2025-5-14 21:51

还能用颜色改变纹理贴图，这个倒是刚知道{:4_173:}

红影 发表于 2025-5-14 21:52

圆柱多了高度方向的设置，还能有高度上的分段设置。
高度再长点，成了金箍棒了{:4_173:}

红影 发表于 2025-5-14 21:53

顶和底默认是1，可以其中一个是0么，这样就成了圆锥了{:4_173:}

马黑黑 发表于 2025-5-14 21:54

红影 发表于 2025-5-14 21:53
顶和底默认是1，可以其中一个是0么，这样就成了圆锥了

是的，真聪明

马黑黑 发表于 2025-5-14 21:55

红影 发表于 2025-5-14 21:52
圆柱多了高度方向的设置，还能有高度上的分段设置。
高度再长点，成了金箍棒了

没错，记得上金色

马黑黑 发表于 2025-5-14 21:55

红影 发表于 2025-5-14 21:51
还能用颜色改变纹理贴图，这个倒是刚知道

颜色和贴图会彼此影响

马黑黑 发表于 2025-5-14 21:55

杨帆 发表于 2025-5-14 21:25
漂亮，谢谢老师精彩分享

{:4_190:}

马黑黑 发表于 2025-5-14 21:56

花飞飞 发表于 2025-5-14 21:14
这个圆柱体参数有这么多，好细致。。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的
...

对，中空

小辣椒 发表于 2025-5-14 22:47

今天那个 图片是用帖纸效果吗
https://638183.freep.cn/638183/small/texture/wd3.jpg

马黑黑 发表于 2025-5-14 23:05

小辣椒 发表于 2025-5-14 22:47
今天那个 图片是用帖纸效果吗

这是木皮图片，做纹理贴图

红影 发表于 2025-5-15 17:52

马黑黑 发表于 2025-5-14 21:54
是的，真聪明

耶，得到表扬了{:4_205:}

红影 发表于 2025-5-15 17:53

马黑黑 发表于 2025-5-14 21:55
没错，记得上金色

哈哈，正好还能用鼠标控制大小，真的如金箍棒一样的如意呢{:4_189:}

红影 发表于 2025-5-15 17:54

马黑黑 发表于 2025-5-14 21:55
颜色和贴图会彼此影响

那还需要对颜色混合有所了解才好，才能得到自己想要的效果呢。

马黑黑 发表于 2025-5-15 18:54

红影 发表于 2025-5-15 17:54
那还需要对颜色混合有所了解才好，才能得到自己想要的效果呢。

其实可以试试，不好再换

马黑黑 发表于 2025-5-15 19:02

红影 发表于 2025-5-15 17:53
哈哈，正好还能用鼠标控制大小，真的如金箍棒一样的如意呢

有点像

马黑黑 发表于 2025-5-15 19:02

红影 发表于 2025-5-15 17:52
耶，得到表扬了

应该的，必须的

查看完整版本: three.js几何体之圆柱缓冲几何体（CylinderGeometry）