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

Three.js：动画类似盒子的几何体

1 个答案: