论坛 › 马黑黑教程专版 › three.js几何体之圆形缓冲几何体

马黑黑 发表于 2025-5-12 12:21

three.js几何体之圆形缓冲几何体

<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>圆形缓冲几何体（CircleGeometry）是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。构造器：CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float); 其中：</p>
<blockquote>
        radius — 圆形的半径，默认值为1<br>
        segments — 分段（三角面）的数量，最小值为3，默认值为32<br>
        thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）<br>
        thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆<br>
</blockquote>
<p>下面的示例，我们用圆形缓冲几何体+基础材质画一个平面六边形：</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://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); // 实例化轨道控制器

        const geometry = new THREE.CircleGeometry(1, 6); // 圆形缓冲几何体
        // 基础材质 ：颜色+双面渲染
        const material = new THREE.MeshBasicMaterial({ color: 'tan', side: THREE.DoubleSide });
        const circle = new THREE.Mesh(geometry, material); // 创建圆形对象 : 几何体+材质
        scene.add(circle); // 圆形对象加入到场景

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

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

        render(); // 运行动画
       
        window.onresize = () => 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 + '\n<style>body {margin: 0; }</style>\n';
                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-12 13:41

这个弄出来的是平面，不是立方体了呢{:4_187:}

红影 发表于 2025-5-12 13:45

相机构筑的空间很难理解，在原始位置我左右翻面可以翻，上下翻面就不见了。移动六边形的位置后，各个方向都可以翻了。{:4_173:}

红影 发表于 2025-5-12 13:54

之前的球形几何体构成的是三维的，现在的球形几何体就是平面的吧。
当分段足够多，看着就是圆了吧，分段少就是多边形了。

樵歌 发表于 2025-5-12 14:10

辛苦了{:4_190:}

马黑黑 发表于 2025-5-12 19:11

樵歌 发表于 2025-5-12 14:10
辛苦了

{:4_191:}

马黑黑 发表于 2025-5-12 19:13

红影 发表于 2025-5-12 13:54
之前的球形几何体构成的是三维的，现在的球形几何体就是平面的吧。
当分段足够多，看着就是圆了吧，分段少 ...

一楼开头部分就已经说了，画的是平面六边形。我家妹纸看到我的文字说有毛病，六边形就是平面的，咋还加个前缀，我解释说，坛子里大家语文好但是数学都不好，我得罗嗦一点，即便如此，坛子里的小盆友也未能能理解{:4_170:}

马黑黑 发表于 2025-5-12 19:14

本帖最后由 马黑黑 于 2025-5-12 19:16 编辑

红影 发表于 2025-5-12 13:45
相机构筑的空间很难理解，在原始位置我左右翻面可以翻，上下翻面就不见了。移动六边形的位置后，各个方向都 ...
这个轨道控制是全开放的。图形对象是个平面，你翻到任意一个变和你的眼睛垂直时，就什么都看不到，你再翻一下就行。你翻转的实际上不是图像，是整个相机立体轨道。

马黑黑 发表于 2025-5-12 19:16

红影 发表于 2025-5-12 13:41
这个弄出来的是平面，不是立方体了呢

一楼说清楚了的。这是一个平面几何体

花飞飞 发表于 2025-5-12 19:47

这个是个六边形纸片片。
从你的材质库里找了下，换成MeshNormalMaterial效果更好，鼠标扯到不同的角度还发不同的光。。{:4_173:}

花飞飞 发表于 2025-5-12 19:49

马黑黑 发表于 2025-5-12 19:14
这个轨道控制是全开放的。图形对象是个平面，你翻到任意一个变和你的眼睛垂直时，就什么都看不到，你再翻 ...

某个瞬间的确是可以隐身，啥也看不到的。
可以理解为片片太薄了，对眼睛对得太正了。{:4_173:}

马黑黑 发表于 2025-5-12 19:52

花飞飞 发表于 2025-5-12 19:49
某个瞬间的确是可以隐身，啥也看不到的。
可以理解为片片太薄了，对眼睛对得太正了。

你可以想象一张纸，在某个距离下和你的眼睛视线一直，你最多只能看到一条线。而这里是精准计算，当平面图形和观者的视线同在Z轴，就应该是什么也看不到。

马黑黑 发表于 2025-5-12 19:52

花飞飞 发表于 2025-5-12 19:47
这个是个六边形纸片片。
从你的材质库里找了下，换成MeshNormalMaterial效果更好，鼠标扯到不同的角度还发 ...

{:4_191:}

花飞飞 发表于 2025-5-12 19:59

把六边换成32，看上去就是个圆了。。
这个CircleGeometry(1, 6)圆形缓冲几何体，名称很有意思。。。
你代码上方给了四个参数，这里只出现两个。。还有两个加上会成什么样呢

马黑黑 发表于 2025-5-12 19:59

花飞飞 发表于 2025-5-12 19:59
把六边换成32，看上去就是个圆了。。
这个CircleGeometry(1, 6)圆形缓冲几何体，名称很有意思。。。
你 ...

是的。它还有默认值，你可以试着什么数字都不要，只是一个空的小括号

花飞飞 发表于 2025-5-12 20:00

马黑黑 发表于 2025-5-12 19:52
你可以想象一张纸，在某个距离下和你的眼睛视线一直，你最多只能看到一条线。而这里是精准计算，当平面图 ...

{:4_173:}这个啥也看不到很容易，稍微移动一下就可以。。可见计算精准

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

花飞飞 发表于 2025-5-12 20:00
这个啥也看不到很容易，稍微移动一下就可以。。可见计算精准

{:4_181:}

花飞飞 发表于 2025-5-12 20:02

马黑黑 发表于 2025-5-12 19:52


{:4_170:}真的，亮片片更好看的，宇宙之光

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

马黑黑 发表于 2025-5-12 19:59
是的。它还有默认值，你可以试着什么数字都不要，只是一个空的小括号

默认的是个圆呀。。。很圆的圆。
数字3就是三角形。。
其实默认的32就差不多是个圆了。但有锯齿，毛边。。。设200就圆得不得了了。

花飞飞 发表于 2025-5-12 20:24

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


赌王发扑克飞旋着就过来 了{:4_173:}

查看完整版本: three.js几何体之圆形缓冲几何体