BufferGeometry compute UV

Questions
1

Recently, I faced the point where my project needs to update the latest version of three.js.

I noticed there is a breaking change where Geometry has been deprecated.

I have a piece of legacy code which does not work anyway. I try to find a solutions and trying to figure out how I can make it work for hours.

I have zero / little knowledge about 3D development and stuff. I am not sure how I can proceed the transition from Geometry to BufferedGeometry.

I have problem understanding the faceVertexUvs equivalent in BufferedGeo and clearly the key faces are no longer there.

Could someone kindly provide some hints for me ? I am devastated.

function computeUV(meshGroup) {
  // Note: Normally, the 3D model should have its UV already set.
  meshGroup.traverse(child => {
    if (child.isMesh) {
      const geometry = new THREE.Geometry().fromBufferGeometry(child.geometry);

      computePlanarUV(geometry);
      child.geometry = new THREE.BufferGeometry().fromGeometry(geometry);
    }
  });

  return meshGroup;
}

function computePlanarUV(geometry) {
  geometry.computeBoundingBox();
  const { min, max } = geometry.boundingBox;
  const center = new THREE.Vector2(
    (max.x + min.x) / 2.0,
    (max.y + min.y) / 2.0,
  );
  const scale = Math.max(max.x - min.x, max.y - min.y);
  const vertices = geometry.vertices;

  geometry.faceVertexUvs[0] = geometry.faces.map(face => {
    const v1 = vertices[face.a];
    const v2 = vertices[face.b];
    const v3 = vertices[face.c];

    return [
      new THREE.Vector2(
        (v1.x - center.x) / scale + 0.5,
        (v1.y - center.y) / scale + 0.5,
      ),
      new THREE.Vector2(
        (v2.x - center.x) / scale + 0.5,
        (v2.y - center.y) / scale + 0.5,
      ),
      new THREE.Vector2(
        (v3.x - center.x) / scale + 0.5,
        (v3.y - center.y) / scale + 0.5,
      ),
    ];
  });

  geometry.uvsNeedUpdate = true;
}```
2

In this situation, some manageable examples may be helpful.
Take a look at some of the Collection of examples from discourse.threejs.org.

BeginnerExample
To the BufferGeometry step 2
To calculate uv’s step 12

Other examples from the collection.

RoundEdgedBoxFlat
RotateShiftTexture
UVgenerator
TextureRotationForCuboid
SphereWithoutTrigonometry

Somewhat more complicated.
TetrahedronSpecificUVs

NOTE! .addAttribute is now .setAttribute

1 Like
3

Thank you very much