Animating 3D shapes in Three.js

Question

Animating 3D shapes in Three.js

I developed a futuristic snake game where snake-like entities move around in an animated fashion using various cube meshes and the THREE.BoxGeometry:

https://i.sstatic.net/GVDNj.png

To enhance the game, I aim to create each snake with a single mesh and geometry for easy addition of textures and rounded edges.

My current challenge is transforming a set of 3D points into a unified geometry that resembles the segmented box-like snakes seen in the demonstration (similar to multiple connected instances of THREE.BoxGeometry).

In my attempt to achieve this, I experimented with utilizing THREE.CurvePath and 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;

  // Traversing through the positions. If there's a change in direction, insert a new curve on the 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;
}

Unfortunately, the result appears unattractive with rounded corners occurring at the intersection points:

https://i.sstatic.net/spUzy.png

Increasing the steps option improves the visual appeal, yet introduces a high vertex count due to the smoothing effect on the curved edges. This concerns me as recreating this geometry might be required on every animation frame.

For animating the geometry, I tested out geometry.morphTargets but encountered limited success. While the morphing takes place, it doesn't meet aesthetic standards. Perhaps manual manipulation of the vertices is necessary?

In conclusion, my queries are as follows:

How can I generate a low-vertex-count geometry resembling interconnected box geometries?
What's the recommended approach for animating a geometry when the number of vertices could vary?

javascript animation 3d three.js

Answer 1

Answer №1

When creating the snake's shape, I found it necessary to combine various geometries:

_generateSnakeGeometry(snakePositions) {
  snakePositions = snakePositions.map(pos => new THREE.Vector3(...pos));
  const finalGeometry = new THREE.Geometry();

  for (let i = 0; i < snakePositions.length; i += 1) {
    const currentPosition = snakePositions[i];
    const voxelMesh = createVoxelMesh(Constants.TILE_SIZE, { position: currentPosition });
    voxelMesh.updateMatrix();
    finalGeometry.merge(voxelMesh.geometry, voxelMesh.matrix);
  }

  return finalGeometry;
}

The function createVoxelMesh produces a single cube mesh for each segment of the snake. By utilizing finalGeometry.merge, I assemble them together and repeat the process throughout the animation. However, this method is not flawless as the resulting geometry contains unnecessary vertices and faces for such a straightforward shape. Is there a technique available to reduce these extra components later on?

To animate the snake, I pinpoint the four vertices forming the head face by examining their positions and face normals:

_locateHeadFaceVertices() {
  const movement = this._direction.clone().multiplyScalar(1 + (Constants.TILE_SIZE / 10));
  const headPosition = new THREE.Vector3(...this.head).add(movement);
  const { vertices, faces } = this.mesh.geometry;

  // Arrange vertices based on proximity to a point near the snake's head, retaining only those equidistant from it.
  const nearest = vertices
    .map(v => [v.distanceTo(headPosition), v])
    .sort((a, b) => a[0] - b[0])
    .filter((pair, i, sorted) => pair[0] === sorted[0][0])
    .map(pair => pair[1]);

  const outcome = [];
  const seenVert = {};

  // Select vertices belonging to faces oriented in the same direction as the snake.
  for (let f of faces) {
    for (let v of [vertices[f.a], vertices[f.b], vertices[f.c]]) {
      const key = v.toArray().toString();
      if (!seenVert[key] && nearest.includes(v) && f.normal.equals(this._direction)) {
        seenVert[key] = true;
        outcome.push(v);
      }
    }
  }

  return outcome;
}

In order for the animation to function properly, I had to include the line

this.mesh.geometry.verticesNeedUpdate = true;

after each frame.

https://i.sstatic.net/eBnaa.png

Answer 2

When creating the snake's shape, I found it necessary to combine various geometries:

_generateSnakeGeometry(snakePositions) {
  snakePositions = snakePositions.map(pos => new THREE.Vector3(...pos));
  const finalGeometry = new THREE.Geometry();

  for (let i = 0; i < snakePositions.length; i += 1) {
    const currentPosition = snakePositions[i];
    const voxelMesh = createVoxelMesh(Constants.TILE_SIZE, { position: currentPosition });
    voxelMesh.updateMatrix();
    finalGeometry.merge(voxelMesh.geometry, voxelMesh.matrix);
  }

  return finalGeometry;
}

The function createVoxelMesh produces a single cube mesh for each segment of the snake. By utilizing finalGeometry.merge, I assemble them together and repeat the process throughout the animation. However, this method is not flawless as the resulting geometry contains unnecessary vertices and faces for such a straightforward shape. Is there a technique available to reduce these extra components later on?

To animate the snake, I pinpoint the four vertices forming the head face by examining their positions and face normals:

_locateHeadFaceVertices() {
  const movement = this._direction.clone().multiplyScalar(1 + (Constants.TILE_SIZE / 10));
  const headPosition = new THREE.Vector3(...this.head).add(movement);
  const { vertices, faces } = this.mesh.geometry;

  // Arrange vertices based on proximity to a point near the snake's head, retaining only those equidistant from it.
  const nearest = vertices
    .map(v => [v.distanceTo(headPosition), v])
    .sort((a, b) => a[0] - b[0])
    .filter((pair, i, sorted) => pair[0] === sorted[0][0])
    .map(pair => pair[1]);

  const outcome = [];
  const seenVert = {};

  // Select vertices belonging to faces oriented in the same direction as the snake.
  for (let f of faces) {
    for (let v of [vertices[f.a], vertices[f.b], vertices[f.c]]) {
      const key = v.toArray().toString();
      if (!seenVert[key] && nearest.includes(v) && f.normal.equals(this._direction)) {
        seenVert[key] = true;
        outcome.push(v);
      }
    }
  }

  return outcome;
}

In order for the animation to function properly, I had to include the line

this.mesh.geometry.verticesNeedUpdate = true;

after each frame.

https://i.sstatic.net/eBnaa.png

Animating 3D shapes in Three.js

Answer №1

Similar questions

Having trouble retrieving all JSON properties

What is the process for incorporating the JavaScript "star" feature from Google's search results page?

Displayed in the xmlhttp.responseText are the tags

"Experiencing a callstack overflow due to multiple carousels on one page using Jquery or Vanilla

Ways to disable an AJAX loading animation

Implementing Batch File Uploads using Typescript

Using Promises with setTimeout

Show a variety of randomly selected pictures from various sources using the command image/next

Is there a method to access the variable name of v-model from a child component in the parent component?

Steps to include a title next to a progress bar:

The use of Buffer() is no longer recommended due to concerns regarding both security vulnerabilities and

Even after unsubscribing with mqtt.js, the old listener continues to receive messages

What causes the variable within the useEffect function to delay its value update?

Error Encountered While Submitting Email Form

Guide to passing arguments to a function within Vue's v-for loop?

Converting a Finsweet hack #4 from jQuery to pure JavaScript in Webflow: Step-by-step guide

Retrieve the current height of the iFrame and then set that height to the parent div

Check if a certain object is devoid of any values based on the elements in an array - JavaScript

Received a JSON value that cannot be converted into a tuple of two numbers in Typescript

Checking time differences in MongoDB