Question

我使用three.js 106 ver。我正在使用一些算法生成地形（从平面几何开始），并且我想根据其veritces z值为地形着色。这是我到目前为止所得到的

mother

但是由于面的数量是顶点的两倍，所以它不像

那样简单

    const geometry = new THREE.PlaneGeometry(
  170,
  150,
  rows,
  cols
);

   ...

for (let y = 0; y < rows + 1; y++) {
  for (let x = 0; x < cols + 1; x++) {
    const pos = x * rows + y;
    const vertex = geometry.vertices[pos];
    if (vertex) {
       vertex.z = myAlgorithm();
    }

Answer 1

但是由于面的数量是顶点的两倍

恐怕这个说法不正确。由于合并的顶点数多，因此面数多于顶点数。但是，没有2：1关系。

请尝试使用BufferGeometry而不是Geometry，因为使用纯顶点数据应该会使代码更清晰。的代码如下所示：

const geometry = new THREE.PlaneBufferGeometry( 1, 1, rows, cols );

const position = geometry.attributes.position;

const colors = [];
const color = new THREE.Color();

for ( let i = 0; i < position.count; i ++ ) {

    const z =  Math.random() * 0.2; // instead of myAlgorithm()

    position.setZ( i, z );

    const s = z * 5; // values  in the range [0,1]

    color.setHSL( 0.4, s, 0.5 );

    colors.push( color.r, color.g, color.b );

}

geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

实时演示：https://jsfiddle.net/zj8d1m2v/3/

three.js R106

如何在three.js中根据顶点设置面部颜色

1 个答案: