ThreeJs学习笔记【day4】图元【2】

思乡码农
328 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>

圆柱缓冲几何体（圆柱） CylinderGeometry

一个平平无奇的圆柱体

new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

参数的分别是 顶部半径，底部半径，高度，圆柱体侧面分段数（分成几边形），还有圆柱体沿高度分段数，可以理解为，切成多少个横截面， 底部是否开启，指的是从底部是否可以看到外面背景，开始角度，要绘制的角度

从参数上，可以得出：盒子和圆锥，圆形都是特殊的圆柱体，均可以通过调整圆柱体参数得到对应的立方体，这和我们初中学习的立体几何所得出的结论是一致的，符合我们的直觉，而且绘制的过程就包含了微分的原理

const material = new THREE.MeshPhongMaterial( { color: 0x3366ff } );
const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
const cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

image.png

十二面缓冲几何体（十二面体）DodecahedronGeometry

一个平平无奇的十二面体 十二面体参数只有两个，一个是半径，还有一个是顶点倍数，这里假如detail足够大，将会得到一个圆球

const radius = 7;  // ui: radius
const detail = 0;  // ui: detail
const geometry1 = new THREE.DodecahedronGeometry(radius, detail);
const dode =  new THREE.Mesh( geometry1, material );
dode.position.x = -20
scene.add(dode)

image.png

挤压缓冲几何体（受积压的2D形状，相当于是平面转立体）ExtrudeGeometry

从一个形状路径中，挤压或者拉伸出一个BufferGeometry 下面的代码里shape是制作了一个爱心的平面图,就像下图这样，之后还有专门的图元叫做ShapeGeometry，到时候再仔细解释形状的构成，这里如何构成形状就先略过了

image.png extrudeSettings 参数解析

  • steps： 沿着挤出的深度细分的点的数量，相当于是 在高度上分布的细分线段的数量
  • depth： 高度，顾名思义，拉伸出的形状的高度
  • bevelEnabled： 拉伸出的应用，在边的部分是否应用斜角，简单理解，一个立方体，沿着顶点的边销去一个三角体，形成的斜角，就是这个参数所控制的样子
  • bevelThickness： 斜角的厚度，其实可以理解为，切除的那个三角体的宽度，或者是 这个斜角与立方体的夹角的大小，越大，则斜面越长如下图所示

image.png

image.png

  • bevelSize： 斜角与原始形状轮廓之间的延伸距离，数字越大，角度不变情况下，越平滑，如下图所示

image.png

  • bevelSegments： 斜面上分段线的密度
const shape = new THREE.Shape();
const x = -2.5;
const y = -5;
shape.moveTo(x + 2.5, y + 2.5);
shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);

const extrudeSettings = {
  steps: 2,  // ui: steps
  depth: 2,  // ui: depth
  bevelEnabled: true,  // ui: bevelEnabled
  bevelThickness: 1,  // ui: bevelThickness
  bevelSize: 1,  // ui: bevelSize
  bevelSegments: 2,  // ui: bevelSegments
};

const geometry2 = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const ex =  new THREE.Mesh( geometry2, material );
ex.position.x = 20
scene.add(ex)

完整代码以代码片段的形式呈现

avatar
文章
阅读
粉丝