javascript - Three.js:对盒状几何体进行动画处理

Question

我已经构建了这个snake game其中蛇使用一堆立方体网格和 THREE.BoxGeometry 进行动画处理:

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

我正在尝试获取一组 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;
}

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

如果我增加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;。