Three.js: 动画一个类似盒子的几何图形

Question

我已经构建了这个snake game，其中使用一堆立方体网格和THREE.BoxGeometry：

我希望每条蛇只包含一个网格和一个几何体，以便我可以轻松添加纹理、圆角边缘等。

我正在尝试获取一组 3d 点并将它们转换为单个几何体，类似于演示中的盒状蛇（就像几个 THREE.BoxGeometry 连接在一起）。

我尝试使用THREE.CurvePath 和THREE.ExtrudeGeometry 来实现这一点：

_makeSnakeGeometry(positions) {
  const vectors = positions.map(p => new THREE.Vector3(...p));
  const curvePath = new THREE.CurvePath();
  const first = vectors[1];
  const last = vectors[vectors.length - 1];

  let curveStart = vectors[0];
  let previous = curveStart;
  let previousDirection;

  // Walk through the positions. If there is a change in direction, add 
  // a new curve to the curve path.
  for (let vector of vectors.slice(1)) {
    let direction = previous.clone().sub(vector);

    if (vector.equals(first)) {
      curveStart.sub(direction.clone().divideScalar(2));
    }

    if (vector.equals(last)) {
      previous.sub(previousDirection.clone().divideScalar(2));
    }

    if ((previousDirection && !previousDirection.equals(direction)) || vector.equals(last)) {
      curvePath.add(new THREE.LineCurve3(curveStart, previous));
      curveStart = previous;
    }

    previous = vector;
    previousDirection = direction;
  }

  const p = Const.TILE_SIZE / 2;
  const points = [[-p, -p], [-p, p], [p, p], [p, -p]];
  const shape = new THREE.Shape(points.map(p => new THREE.Vector2(...p)));
  const geometry = new THREE.ExtrudeGeometry(shape, {
    steps: 20,
    extrudePath: curvePath,
    amount: 20
  });

  return geometry;
}

不幸的是，它看起来很丑陋，我们最终得到了路径方向改变的圆角：

如果我增加steps 选项，生成的网格看起来不那么难看，但由于平滑的弯曲边缘，几何图形具有大量顶点。我担心顶点数量过多，因为我可能必须在每个动画帧上重新创建这个几何体。

为了为几何图形设置动画，我尝试使用geometry.morphTargets，但收效甚微。变形发生了，但它看起来也很丑陋。也许我需要手动为几何的顶点设置动画？

总而言之，我的问题是：

• 如何创建一个具有最少顶点的几何图形，类似于拼凑在一起的多个盒子几何图形？
• 当底层顶点数可能发生变化时，为几何图形设置动画的正确方法是什么？

Answer 1

为了构建蛇形几何体，我最终合并了几何体：

_makeSnakeGeometry(positions) {
  positions = positions.map(p => new THREE.Vector3(...p));
  const geometry = new THREE.Geometry();

  for (let i = 0; i < positions.length; i += 1) {
    const position = positions[i];
    const mesh = makeVoxelMesh(Const.TILE_SIZE, { position });
    mesh.updateMatrix();
    geometry.merge(mesh.geometry, mesh.matrix);
  }

  return geometry;
}

makeVoxelMesh 为蛇的一个位置返回单个立方体网格。我使用geometry.merge 将它们连接在一起，并在每个动画帧上重复该过程。它并不完美，因为几何体最终具有额外的顶点和面，而对于如此简单的形状来说，它并不需要这些顶点和面。也许事后有办法减少它们？

为了给蛇设置动画，我找到了构成头面的四个顶点。我通过查看顶点位置和面法线来做到这一点：

_findHeadFaceVertices() {
  const direction = this._direction.clone().multiplyScalar(1 + (Const.TILE_SIZE / 10));
  const headFacePosition = new THREE.Vector3(...this.head).add(direction);
  const { vertices, faces } = this.mesh.geometry;

  // Sort vertices by distance to a point near the snake head and only keep
  // the first few that are equidistant.
  const closest = vertices
    .map(v => [v.distanceTo(headFacePosition), v])
    .sort((a, b) => a[0] - b[0])
    .filter((pair, i, sorted) => pair[0] === sorted[0][0])
    .map(pair => pair[1]);

  const result = [];
  const seen = {};

  // Filter the remaining vertices by keeping only ones which belong to faces
  // that point in the same direction as the snake.
  for (let face of faces) {
    for (let vertex of [vertices[face.a], vertices[face.b], vertices[face.c]]) {
      const key = vertex.toArray().toString();
      if (!seen[key] && closest.includes(vertex) && face.normal.equals(this._direction)) {
        seen[key] = true;
        result.push(vertex);
      }
    }
  }

  return result;
}

为了使动画正常工作，我必须在每个动画帧之后设置this.mesh.geometry.verticesNeedUpdate = true;。