# BufferGeometry compute UV

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 = 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;
}`````````

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.

Somewhat more complicated.
TetrahedronSpecificUVs

NOTE! ` .addAttribute` is now `.setAttribute`

1 Like

Thank you very much