三。垂直挤出

Question

我是三人新手，我想垂直挤出形状。我可以设置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 坐标； 深度 / 步骤 * s 生成特定步骤中挤出的 z 坐标。

此外，关于形状位于xy平面中的假设是必要的，因为Shape对象是二维的； xy 平面的 Flatland 是他们唯一知道的世界。

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

Answer 2

我发现了一个带有旋转和翻译的解决方案，我弄乱的是我旋转了网格，而不是奇异的。但是我仍然对正确的方式胆怯。
工作代码：

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);
  geometry.rotateX(MathUtils.degToRad(-90));
  geometry.translate(0, 0, 200 / 100);

  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
  );

  location.updateMatrix();
  return location;
}

结果：