问如何利用BufferGeometry制作圆角和圆角立方体？

EN

法线只影响照明，而不影响几何形状。

使一切变得四舍五入的真正方法是使其“物理”四舍五入。你可以做很多种方法，比如排列一堆圆柱体、球体和平面来达到你想要的效果，但听起来你已经很熟悉创建你自己的顶点和普通缓冲区了，所以你可以跳过其中的一些。

要计算圆角顶点，请考虑基本的trig函数sin和cos，它们在Math库下具有方便的JavaScript内置。你可以用这些来计算一个弧线上的一系列点。在创建圆角的情况下，90° (PI/2)弧。因此，要获得弧线上的n点，您可以这样做：

注意:这只是在单位圆上创建点。你也需要做出调整，以对齐你的角。

const numPoints = 6 // points at 0°, 18°, 36°, 54°, 70°, 90°
const positions = [] // will hold the x, y, z, triplets

let x = null, y = null
for(let i = 0; i < numPoints; ++i){
  console.log(`Working on angle: ${Math.round(57.2958*( (Math.PI / 2) / (numPoints - 1) ) * i)}°`)
  x = Math.cos( ( (Math.PI / 2) / (numPoints - 1) ) * i )
  y = Math.sin( ( (Math.PI / 2) / (numPoints - 1) ) * i )
  x = (x < 1e-6)?0:x // tweak
  y = (y < 1e-6)?0:y // tweak
  console.log(`pushing: ${[x, y, 1, x, y, -1].join(', ')}`)
  positions.push(x, y, 1, x, y, -1)
}

计算这些点中每个点的法线实际上相当容易，特别是当你至少在一开始将数值保持在单位圆内时。索引i处顶点的法线将计算为：

let normal = new Vector3(x, y, 0)

轰隆隆。和正常人一样。这是因为顶点是基于一个单位圆生成的(法线被“规范化”为1)。请注意，由于上面的顶点生成代码推入了两个点，所以您还需要推送这个法线的两个副本(因为顶点和普通缓冲区总是1-ot-1)。

使用您对BufferGeometry的知识构建一个index，将您刚刚创建的所有点连接成三角形，这样您就可以从事业务了。

现在，您可以对每个圆角进行这些计算，对单元圆上应该排列弧的位置进行调整，或者可以通过用为单位圆计算的顶点填充临时BufferGeometry一次，然后使用BufferGeometry.applyMatrix4对点和法线应用转换矩阵，将值修改为特定边缘的正确位置/方向。

至于角，你可以使用同样的技术，除了你必须计算点，可以在一个球的表面。这有点困难，但是看看SphereGeometry是如何构建它的顶点和法线的，您应该已经上路了。

最后一件事要提的是:我根本没有说过要建造两边，因为你已经知道了其中的大部分。但是有一点要注意的是，这些构造的圆角要求两边不能像普通立方体一样互相接触。相反，每一个边的一个侧面将需要满足边缘的圆形边缘。

下面是一张来自搅拌器插件的照片，它展示了使用这样一种技术的圆角是如何结束的：

​

​