three.js 几何体汇总（更新中……）
本帖最后由 马黑黑 于 2025-5-22 07:22 编辑 <br /><br /><style>#pa {position: relative; margin: 30px auto; width: 1400px; left: calc(50% - 81px); transform: translateX(-50%); background: white; z-index: 1; box-shadow: 2px 2px 5px #000; }
.table { width: 100%; margin: 20px auto; border-collapse: collapse; box-shadow: 0 0 10px rgba(0,0,0,0.1); font-family: Arial, sans-serif; }
.table th, .table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; }
.table th { background-color: #336699; color: white; font-weight: bold; text-align: center; letter-spacing: 6px; }
.table tr:hover { background-color: #f5f5f5; }
.table tr:nth-child(even) { background-color: #f9f9f9; }
</style>
<div id="pa"></div>
<script>
const datas = [
['立方缓冲几何体<br>BoxGeometry', 'BoxGeometry 是四边形的原始几何类，它通常使用构造函数所提供的 “width”、“height”、“depth” 参数来创建立方体或者不规则四边形', 'BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)', '<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=83649">立方体</a>'],
['四面缓冲几何体<br>TetrahedronGeometry', '一个用于生成四面体的类', 'TetrahedronGeometry(radius : Float, detail : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747224137"></a>'],
['八面缓冲几何体<br>OctahedronGeometry', '一个用于生成八面体的类', 'OctahedronGeometry(radius : Float, detail : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747352112">道奇蓝八面体</a>'],
['十二面缓冲几何体<br>DodecahedronGeometry', '一个用于创建十二面几何体的类', 'DodecahedronGeometry(radius : Float, detail : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747282415">十二面体</a>'],
['二十面缓冲几何体', '一个用于生成二十面体的类', 'IcosahedronGeometry(radius : Float, detail : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747310234">二十面体</a>'],
['球缓冲几何体<br>SphereGeometry', '一个用于生成球体的类', 'SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747443610">线框球体</a>'],
['胶囊几何体<br>CapsuleGeometry', 'CapsuleGeometry是一个胶囊图形类，通过半径和高度来进行构造。使用lathe来进行构造', 'CapsuleGeometry(radius : Float, height : Float, capSegments : Integer, radialSegments : Integer, heightSegments : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747052172">线框胶囊</a>'],
['圆形缓冲几何体<br>CircleGeometry', 'CircleGeometry是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数', 'CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747023845">六边形</a>'],
['圆锥缓冲几何体<br>ConeGeometry', '一个用于生成圆锥几何体的类', 'ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747095702">嵌套圆锥体</a>'],
['圆柱缓冲几何体<br>CylinderGeometry', '一个用于生成圆柱几何体的类', 'CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747224137">纹理贴图圆柱</a>'],
['圆环缓冲扭结几何体<br>TorusKnotGeometry', '创建一个圆环扭结，其特殊形状由一对互质的整数，p 和 q 所定义。如果 p 和 q 不互质，创建出来的几何体将是一个环面链接', 'TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747562401">树根扭结</a>'],
['平面缓冲几何体<br>PlaneGeometry', '一个用于生成平面几何体的类', 'PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747648872">8*8网格状矩形</a>'],
['平面圆环缓冲几何体<br>RingGeometry', '一个用于生成二维圆环几何体的类', 'RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747387524">平面+立体圆环</a>'],
['立体圆环缓冲几何体<br>TorusGeometry', '一个用于生成三维圆环几何体的类', 'TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747387524">平面+立体圆环</a>'],
['网格几何体<br>WireframeGeometry', '可以被用作一个辅助物体，来对一个 geometry 几何体以线框的形式进行查看', 'WireframeGeometry(geometry : BufferGeometry)', '<a href="http://mhh.52qingyin.cn/art/bshow.php?st=1&sd=1&art=mahei_1747537728">金色线框球</a>'],
['形状缓冲几何体<br>ShapeGeometry','从一个或多个路径形状中创建一个单面多边形几何体','ShapeGeometry(shapes : Array, curveSegments : Integer)','<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=83657&extra=page%3D1">点击会变色的三角形</a>'],
['多面缓冲几何体<br>PolyhedronGeometry', '多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。 这个类由DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry 所使用，以生成它们各自的几何结构', 'PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)', '<a href="https://www.huachaowang.com/forum.php?mod=forumdisplay&fid=94&page=1">线框化近似圆</a>'],
['车削缓冲几何体<br>LatheGeometry', '创建具有轴对称性的网格，比如花瓶。车削绕着Y轴来进行旋转。', 'LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)', '<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=83669&extra=page%3D1">线框钻石</a>'],
['挤压缓冲几何体<br>ExtrudeGeometry', '从一个形状路径中，挤压出一个BufferGeometry', 'ExtrudeGeometry(shapes : Array, options : Object)', '<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=83684&extra=page%3D1">挤压几何体图形</a>'],
['边缘几何体<br>EdgesGeometry', '可以作为一个辅助对象来查看geometry的边缘', 'EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )', '<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=83681&extra=page%3D1">两个挤压几何体</a>'],
['管道缓冲几何体<br>TubeGeometry', '创建一个沿着三维曲线延伸的管道', 'TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)', '<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=83653&extra=page%3D1">线框管道</a>'],
];
let tblstr = '<table class="table"><tr><th style="width: 50px;">序号</th><th style="width: 200px;">名称</th><th>描述</th><th>构造器</th><th style="width: 100px;">示例</th></tr>';
for (let j = 0; j < datas.length; j ++) {
tblstr += `<tr><td>${j+1}</td><td>${datas}</td><td>${datas}</td><td>${datas}</td><td>${datas}</td></tr>`;
}
tblstr += '</table>';
pa.innerHTML = tblstr;
</script>
示例暂时指向我个人的网站，后续弄好后再修改 去看了，1和8都是六边形？是不是有一个的引用重复了？ 黑黑整理出这么three.js 几何体，很多还有范例，真是辛苦了{:4_199:} 后面还有几个还没介绍，看名字感觉都挺难{:4_173:} 红影 发表于 2025-5-19 20:58
后面还有几个还没介绍，看名字感觉都挺难
有一些几何体道理上要自己创建各个顶点 红影 发表于 2025-5-19 20:57
黑黑整理出这么three.js 几何体，很多还有范例，真是辛苦了
有文档在的 马黑黑 发表于 2025-5-19 21:06
有一些几何体道理上要自己创建各个顶点
这个不容易，但是可操作的空间更大了{:4_187:} 马黑黑 发表于 2025-5-19 21:06
有文档在的
那也一样很不容易啊{:4_187:} 红影 发表于 2025-5-19 21:37
那也一样很不容易啊
不难的 红影 发表于 2025-5-19 21:37
这个不容易，但是可操作的空间更大了
而且用上数组 原来八面体叫道奇蓝八面体，名称好听
汇总在一起更方便对比和复习
{:4_199:} 车削缓冲几何体是能像车床一样削出一个花瓶或者珠子，这运动复杂了吧，期待效果中。。。
马黑黑 发表于 2025-5-19 22:52
不难的
我是觉得挺难的{:4_173:} 马黑黑 发表于 2025-5-19 22:52
而且用上数组
这里面的东西还真多啊。 红影 发表于 2025-5-20 10:25
这里面的东西还真多啊。
现在介绍的可能连冰山一角都算不上。不过总得有个开头，然后就看各人的兴趣和能力了 红影 发表于 2025-5-20 10:24
我是觉得挺难的
幼儿园的数学几何不过关 花飞飞 发表于 2025-5-20 09:26
车削缓冲几何体是能像车床一样削出一个花瓶或者珠子，这运动复杂了吧，期待效果中。。。
这个，车床削出来的，默认的就很漂酿，而且可爱，比刀削小笼包还好看 马黑黑 发表于 2025-5-20 12:39
现在介绍的可能连冰山一角都算不上。不过总得有个开头，然后就看各人的兴趣和能力了
嗯嗯，黑黑汇总时把手册也附上呗，有兴趣的可以多去看看了{:4_187:} 马黑黑 发表于 2025-5-20 12:40
幼儿园的数学几何不过关
没办法，那个时候就不懂，大了也不懂{:4_173:}