In the previous post, we set up three.js and implemented a rotating cube. To add a "low poly" effect, we added a mesh.

Then, to make things more interesting, we imported an SVG logo to use instead.

Here's where we left off:

First, let's remove the rotation on the x axis by commenting out the lines:

// cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// wireframe.rotation.x += 0.01;
wireframe.rotation.y += 0.01;

Centering our logo

Next, we'll center our logo. To do so, we'll need to offset the x coordinates retrieved from the SVG.

Recall we have the following function:

xs = xs.map((x) => {
  return (x / max) * scalingFactor
})

The purpose of this function is to scale our x points by the scaling factor (to shrink the rendering).

If we want to center the coordinates, we simply need to subtract max / 2:

xs = xs.map((x) => {
  return ((x - max / 2) / max) * scalingFactor
})

Now, here's the result: