Threejs - 如何按距离偏移二维几何体上的所有点

Question

使用 Three.js，（虽然我相信这与数学更相关）我有一组可以创建二维几何的二维点。例如正方形、矩形、五边形或自定义 2D 形状。基于原始的二维形状，我想创建一个方法来像附图一样向内或向外均匀地偏移点。

不知道有没有简单的方法offset/grow/shrink二维图形上的所有点（vector3）均匀向内或向外。如果是这样，如果我可以将点偏移 X 距离，那会很酷吗？有点像说将 2D 形状上的点向外或向内偏移 X 距离。

不，我指的不是从中心点缩放。虽然缩放可能适用于对称形状，但它不适用于非对称形状。

例如看图片

提前致谢。

Answer 1

你可以阅读 forum thread。

我对 ProfiledContourGeometry 做了一些修改，得到了 OffsetContour，所以我把它留在这里，以防万一，如果它有帮助呢:)

  function OffsetContour(offset, contour) {

    let result = [];

    offset = new THREE.BufferAttribute(new Float32Array([offset, 0, 0]), 3);
    console.log("offset", offset);

    for (let i = 0; i < contour.length; i++) {
      let v1 = new THREE.Vector2().subVectors(contour[i - 1 < 0 ? contour.length - 1 : i - 1], contour[i]);
      let v2 = new THREE.Vector2().subVectors(contour[i + 1 == contour.length ? 0 : i + 1], contour[i]);
      let angle = v2.angle() - v1.angle();
      let halfAngle = angle * 0.5;

      let hA = halfAngle;
      let tA = v2.angle() + Math.PI * 0.5;

      let shift = Math.tan(hA - Math.PI * 0.5);
      let shiftMatrix = new THREE.Matrix4().set(
             1, 0, 0, 0, 
        -shift, 1, 0, 0,
             0, 0, 1, 0,
             0, 0, 0, 1
      );


      let tempAngle = tA;
      let rotationMatrix = new THREE.Matrix4().set(
        Math.cos(tempAngle), -Math.sin(tempAngle), 0, 0,
        Math.sin(tempAngle),  Math.cos(tempAngle), 0, 0,
                          0,                    0, 1, 0,
                          0,                    0, 0, 1
      );

      let translationMatrix = new THREE.Matrix4().set(
        1, 0, 0, contour[i].x,
        0, 1, 0, contour[i].y,
        0, 0, 1, 0,
        0, 0, 0, 1,
      );

      let cloneOffset = offset.clone();
      console.log("cloneOffset", cloneOffset);
        shiftMatrix.applyToBufferAttribute(cloneOffset);
      rotationMatrix.applyToBufferAttribute(cloneOffset);
      translationMatrix.applyToBufferAttribute(cloneOffset);

      result.push(new THREE.Vector2(cloneOffset.getX(0), cloneOffset.getY(0)));
    }


    return result;
  }

欢迎修改:)

Answer 2

我对不包括修改边数的解决方案有一些疑问。

我在这个项目中遇到了同样的问题，我想确保 voronoi 单元之间的距离已知，但我很快发现比例不能满足用例。但是我面临的一个复杂问题是我必须在 while 循环中处理的一些边消失了。调试非常困难，我不得不创建一个调试模式来帮助查看点和线，我也保留了它。可以使用复选框激活此调试模式：

请注意图片，我将它们作为 link 未嵌入，因为我仍然是新贡献者（稍后可能会改进）。

应该消失的边缘显示为红色 retraction snapshot1

retraction with edges discard 1

retraction with edges discard 2

这里是函数的 link，您可能需要修改它以使用另一种点格式： https://github.com/WebSVG/voronoi/blob/8893768e3929ea713a47dba2c4d273b775e0bd82/src/voronoi_diag.js#L278

这里是 link 集成此功能的完整项目，它还有 link 现场演示 https://github.com/WebSVG/voronoi

Threejs - 如何按距离偏移二维几何体上的所有点

Threejs - How to offset all points on a 2d geometry by distance

geometry

vector

three.js

geometry-surface