ThreeJs学习笔记【day5】图元【5】

思乡码农
208 阅读2分钟

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

形状缓冲几何体(shape) ShapeGeometry

这个在讲拉伸几何体的时候涉及到了shape，这个就是shape的几何体实现

const x = 0, y = 0;

const heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

const geometry = new THREE.ShapeGeometry( heartShape );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh )

ShapeGeometry(shapes : Array, curveSegments : Integer) 参数说明

  • shapes 包含形状的数组，或者一个shape形状实例
  • curveSegments - 每个形状的分段数，默认是12，越大，形状边角越圆滑，其实这个很形象的表达了微积分的思想，不断微分后，会形成光滑曲线，构成形状的元素越多，越平滑

image.png

球缓冲几何体（球状体）SphereGeometry

绘制球状体的过程很像绘制经纬度，他构造函数所传入的属性也说明了这一点

const geometry1 = new THREE.SphereGeometry( 30, 32, 16 );
const sphere = new THREE.Mesh( geometry1, material );
sphere.position.x = -60
scene.add( sphere )

在进行参数解释之前，为了明确描述球体的构造参数，这里需要类比引入一下经纬度的概念，假设不进行位置设置的情况下，球体相当于是以0，0，0为圆心，通过半径大小，扫描正负X轴，正负Y轴的顶点形成的，所以这里我们借助一下经纬度来描述球体参数

  • radius 球体半径，默认为1。控制球体大小的参数

  • widthSegments 水平分段数（沿着经线分段），最小值为3，默认值为32。

  • heightSegments 垂直分段数（沿着纬线分段），最小值为2，默认值为16。

  • phiStart 指定水平（经线）起始角度，默认值为0。

  • phiLength指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。

  • thetaStart 指定垂直（纬线）起始角度，默认值为0

  • thetaLength 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。

这里除了半径外，其他属性3个为一组，

widthSegments，heightSegments 大小决定了圆的圆滑程度 phiStart，phiLength，thetaStart thetaLength决定的是绘制出来的球，是球面体，还是完整的球状体，如果是球面体，那么开始角度是什么，又走过了多大弧度

*因为球体不太好理解，特意放上属性调整的链接，可以自行调整属性查看效果球缓冲几何体（SphereGeometry）

代码依旧通过代码片段的方式引入

avatar
文章
阅读
粉丝