携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 >>
多面缓冲几何体（三角形拼接几何体）PolyhedronGeometry
多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别
简单来说就是通过描述面的顶点以及串联面的线(索引)拼接形成一个立方体的类
const material = new THREE.MeshPhongMaterial( { color: 0x3366ff } );
const verticesOfCube = [
-1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1,
-1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1,
];
const indicesOfFaces = [
2, 1, 0, 0, 3, 2,
0, 4, 7, 7, 3, 0,
0, 1, 5, 5, 4, 0,
1, 2, 6, 6, 5, 1,
2, 3, 7, 7, 6, 2,
4, 5, 6, 6, 7, 4,
];
const radius = 7; // ui: radius
const detail = 2; // ui: detail
const geometry = new THREE.PolyhedronGeometry(
verticesOfCube, indicesOfFaces, radius, detail);
const poly = new THREE.Mesh( geometry, material );
scene.add(poly)
PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)
参数解析
- vertices 顶点数组，这里最后生成的是一维数组，但是类去解析的时候是三个一组进行解析的，因为众所周知，两点成线，三点成面，三个点可以确定一个平面
- indices 索引，索引这个词顾名思义，就是针对某一个集合内数据的记录，这里索引所起到的作用，就是标识面与面之间的位置关系，通过半径换算得出对应的空间坐标，也是按顺序取值的
- radius 半径 决定了拼成的立方体的大小
- detail 细节越多，形状就越平滑，越像一个球体。 验证：索引只传入一个，观察效果
结论：当顶点参数与索引不能一一对应时，threeJs会尝试针对每个面与面之间应用索引
圆环缓冲几何体（圆环）RingGeometry
可以用来做小学教具里的三角板，正方形框架，奥林匹克圆环
const geometry1 = new THREE.RingGeometry( 15, 50, 3 );
const mesh = new THREE.Mesh( geometry1, material );
mesh.position.x = -120
scene.add( mesh );
RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
- innerRadius 内部半径，默认值为0.5，内部镂空图案的大小
- outerRadius 外部半径，默认值为1。外面形状的大小
- thetaSegments 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为8。相当于是在设置内部镂空图案的边数，三角形，四边形，五边形.......
- phiSegments — 最小值为1，默认值为8。这个是与形状交叉的线段密度
- thetaStart — 起始角度，默认值为0。从什么角度开始
- thetaLength — 圆心角，默认值为Math.PI * 2， 2π代表是闭合图形，小于二π时，分段与分段间夹角弧度 = thetaLength / thetaSegments,thetaSegments为3时比较特殊，因为三角形加起来是180度，所以需要除以2
老惯例，代码以代码片段的方式引入
