Three.js垂直挤出

Question

我是 Three.js 的新手，我想垂直挤出一个形状。我可以设置 2D 形状的点，但是当我拉伸它时，拉伸会沿着 z 轴发生。我想沿着 y 轴挤出形状，如何以最简单的方式实现这一点？（在这个例子中，我知道可以使用盒子几何体，因为我挤出一个矩形，但这只是因为简单，我想挤出复杂的形状）。

我尝试过的一件事是在挤压网格后旋转网格，但这弄乱了我的起点（使得计算挤压对象所包含的对象的位置变得更加困难）。

所以为了简单起见，我想要这样的东西，没有旋转。

我的代码：

export function createStorageLocation(storageLocation: StorageLocation) {
  const shape = new Shape();
  shape.moveTo(0, 0);
  shape.lineTo(0, 200 / 100);
  shape.lineTo(400 / 100, 200 / 100);
  shape.lineTo(400 / 100, 0);
  shape.lineTo(0, 0);

  const extrudeSettings: ExtrudeGeometryOptions = {
    steps: 2,
    depth: 10,
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1,
  };

  const geometry = new ExtrudeGeometry(shape, extrudeSettings);

  const material = new MeshStandardMaterial({
    color: 'blue',
    opacity: 0.7,
    transparent: false,
  });

  const location = new Mesh(geometry, material);
  const axesHelper = new AxesHelper(5);
  location.add(axesHelper);
  location.position.set(
    storageLocation.startPoint.x / 100,
    storageLocation.startPoint.y / 100,
    storageLocation.startPoint.z / 100
  );
  return location;
}

应用程序的当前状态：

Answer 1

ExtrudeGeometry做出硬性假设，即要挤出的形状是在xy平面中定义的，并且挤出将沿着 + z进行。例如，参见源代码的第 421-449 行，特别是第 432 行：

v( vert.x, vert.y, depth / steps * s );

其中v(x, y, z)是一个将坐标三元组推入对象顶点数组的成员函数；vert.x和vert.y是被挤压形状的x和y坐标；并depth / steps * s产生特定步骤中挤出的z坐标。

此外，由于物体是二维的，因此关于形状位于xy平面内的假设是必要的。xy平面的Shape平地是他们唯一知道的世界。

为了获得您想要的行为（即，没有轮换），您必须自己实现它。您可以从ExtrudeGeometry内部开始，将拉伸从z轴移植到y轴。对于具有直挤压路径的矩形（就像这里的示例），逻辑相当简单，随着形状和挤压路径的复杂性而变得更加复杂，但它仍然比硬着头皮复杂得多使用挤压然后旋转的方法。