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

好吧，我找到了一个旋转和平移的解决方案，我搞砸的是我旋转了网格，而不是几何体。但我仍然对这样做的正确方法感到好奇。工作代码：

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

结果：

Answer 2

ExtrudeGeometry 硬性假设要挤出的形状是在 xy 平面中定义的，并且挤出是沿着 + z。例如，参见 source code 的第 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平面的假设是必要的，因为Shape个对象是two-dimensional； xy位面的Flatland是他们唯一知道的世界。

要获得您想要的行为（即，没有旋转），您必须自己实施。您可以从 ExtrudeGeometry 内部执行的操作开始，并将挤压从 z 轴移植到 y 轴。对于具有直线挤压路径的矩形（如您此处的示例），逻辑相当微不足道，随着形状和挤压路径的复杂性而变得更加复杂，但它仍然比咬紧牙关复杂得多，使用 extrude-then-rotate 方法。

Three.js 垂直挤出

Three.js extrude vertically

javascript

3d

three.js