如何在 `THREE.js` 当前版本中转换 `geometry.faceVertexUvs`？答案

【问题标题】：How to convert `geometry.faceVertexUvs` in `THREE.js` current version?如何在 `THREE.js` 当前版本中转换 `geometry.faceVertexUvs`？
【发布时间】：2022-01-21 20:49:47
【问题描述】：

const geometry = new THREE.SphereGeometry(100, 64, 64, Math.PI / 2, Math.PI, 0, Math.PI);
const uvs = geometry.faceVertexUvs[0];
const axis = 'x';
for (let i = 0; i < uvs.length; i += 1) {
  for (let j = 0; j < 3; j += 1) {
    uvs[i][j][axis] *= 0.5;
  }
}

geometry.faceVertexUvs 已弃用。
如何将此引用转换为THREE.js 当前版本？

【问题讨论】：

标签： three.js

【解决方案1】：

新方法使用BufferGeometry 代替Geometry。这会将每个顶点属性（位置、法线、uv）存储在数组中，因此您可以使用BufferGeometry.getAttribute("uv"); 获取 UV。

一旦您检索到该属性，您最终会得到一个BufferAttribute，您可以在其中访问每个单独组件的.array 属性：

const geometry = new THREE.SphereGeometry(100, 64, 64, Math.PI / 2, Math.PI, 0, Math.PI);

const uvAttribute = geometry.getAttribute("uv");
const uvArray = uvAttribute.array;

// Loop through all UVs
// UVs have 2 components, so we jump by 2 on each iteration
for (let i = 0; i < uvAttribute.length; i += 2) {
    uvArray[i + 0] = uvX;
    uvArray[i + 1] = uvY;
}

// Now we set the update flag to true so the GPU gets the new values
uvAttribute.needsUpdate = true;

【讨论】：