心形的坐标公式有很多，因为心形弧度不同其坐标公式也不同。
在本示例中，我们依然假定每个顶点坐标的 z 坐标永远为 0，我们需要计算的是 x, y 坐标，因此你可以把它当成一个 二维的直角坐标系 来看。
在本示例中，我们基于以下这个心形坐标公式：
x = a(3sin(θ) - sin(3θ))
y = 2a(2cos(θ) - cos(2θ))
心形坐标函数最著名的莫过于 笛卡尔 爱情故事中的 r=a(1-sinθ)，在这个公式中 r 表示极坐标中 点与圆形的距离，θ 为点与 x 轴的夹角，a 为一个系数。
电视剧《隐秘的角落》中提及过这个公式。
直角坐标系，创始人是 笛卡尔，直角坐标系也被称为 笛卡尔坐标系。
极坐标 的创始人是牛顿。
直角坐标系中是通过 x, y 坐标值来定位一个 点 的位置。
极坐标则是通过 r, θ 来定位一个点的位置
上面提到的 极坐标 默认是指 二维的，在 3D 球形中使用的是 3 维极坐标，通常称呼为 “球极坐标”。
用户可调节的系数
使用了 TypeScript，所以先定义那些用户可以控制调节的各项系数。
interface GuiData {
offsetRadian: number
xRatio: number
yRatio: number
xMultiple: number
yMultiple: number
points: number
r: number
g: number
b: number
offsetX: number
offsetY: number
}
// 各项系数默认值，这些值可以绘制出一个比较正的心形图案
let guiDataInit: GuiData = {
offsetRadian: 4,
xRatio: 0.1,
yRatio: 0.24,
xMultiple: 3,
yMultiple: 2,
points: 48,
r: 1,
g: 0,
b: 0,
offsetX: 0,
offsetY: 0.1
}1. offsetRadian：用来控制每一次绘制点时的角度偏移量
- xRatio、yRatio：x，y 中 a 的系数值
- xMultiple、yMultiple：x，y 括号中的系数值
- points：设定顶点的总数，我们假定它一定是大于或等于 4 ，且一定是 2 的整倍数
- r,g,b：一个 RGB 颜色值的 3 个分量
- offsetX、offsetY：x，y 整体的偏移量
生成顶点坐标的 JS 函数：
const getHeartXYArr = (data: GuiData) => {
const { offsetRadian, xRatio, yRatio, xMultiple, yMultiple, points, offsetX, offsetY } = data
const radian = Math.PI * 2 / points
const res: number[] = []
let rad: number = 0
for (let i = 0; i < points; i++) {
rad = (radian + Math.PI / offsetRadian) * i
res.push(xRatio * (xMultiple * Math.sin(rad) - Math.sin(xMultiple * rad)) + offsetX)
res.push(yRatio * (yMultiple * Math.cos(rad) - Math.cos(yMultiple * rad)) + offsetY)
}
res.push(res[0], res[1])
return res
}请注意上述代码中，我们在获得了各个关键的顶点坐标信息后，在数组的结尾处重新添加了一次第一个顶点坐标，这样做的目的是为了让线段绘制可以 “首尾相连”，即 最后一个坐标点连接到最开始的坐标点上。
配置管线中关于顶点的拓扑关系
在之前绘制一个三角形的示例中，此处的配置为：
primitive: {
topology: 'triangle-strip'
}'triangle-strip' 表示：三个点组成一个实心的三角形
而在本示例中，我们此处的配置修改为：
primitive: {
topology: 'line-strip'
}'line-strip' 表示：点与点之间依次连接，形成线段
关于 react-dat-gui 的介绍
我平时主要使用 React，GUI 控件有很多，而我一直习惯使用 react-dat-gui。
yarn add react-dat-gui
Three.js 官方示例中很多使用的是 mrdoob 编写的 dat.gui
当然也有使用 lil-gui 这个的。
