如何为缓冲区几何体中的每个顶点分配不同的颜色？三.js

Question

我是 Three.js 的新手，我找到了一些关于该主题的答案，但没有一个使用缓冲区几何形状。我正在 React 上制作欧洲的 3D 地形项目，我希望能够根据某些值更改水位。为了做到这一点，我的着色必须逐个顶点完成，而不是从图像中添加纹理，如果我更改顶点的值，着色将不会改变。因此，根据顶点的“高度”，我想分配不同的颜色。

这是我的 componentDidMount 函数：

const SIZE_AMPLIFIER = 15;
var container = document.getElementById("main_map");
var scene, camera, renderer, controls;
var data, plane;

//load map data from bin file

 function loadTerrain(file) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';
  xhr.open('GET', file, true);
  xhr.onload = function (evt) {
    if (xhr.response) {
      data = new Uint16Array(xhr.response)
      init()
    }

  };
  xhr.send(null);
}

loadTerrain('stats.bin');

function init() {

  // initialize camera
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 100000);
  camera.position.set(10000, 4000, 0);

  // initialize scene
  scene = new THREE.Scene();

  // initialize directional light (sun)
  var sun = new THREE.DirectionalLight(0xFFFFFF, 1.0);
  sun.position.set(300, 400, 300);
  sun.distance = 1000;
  scene.add(sun);

  var frame = new THREE.SpotLightHelper(sun);
  scene.add(frame);

  // initialize renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0x000000);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.append(renderer.domElement);

  //initialize controls

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 1;
  controls.rotateSpeed = .8;
  controls.maxPolarAngle = Math.PI / 2 - .3;

  // initialize plane
  plane = new THREE.PlaneBufferGeometry(1500 * SIZE_AMPLIFIER, 1500 * SIZE_AMPLIFIER, 999 , 999);
  plane.castShadow = true;
  plane.receiveShadow = true;

  var vertices = plane.attributes.position.array;
  console.log(data)

  // apply height map to vertices of plane
  // assign different color depending on the value??

  for (let i = 0, j = 2; i < data.length; i += 1, j += 3) {
    if(data[i] == 0){
      vertices[j] = 0
    }else {
      vertices[j] = data[i] / 65535 * 325 + 10
    }
  }

  // Add texture image
  var material = new THREE.MeshLambertMaterial({ 
      map:THREE.ImageUtils.loadTexture('stats_color.png')
   })

  var mesh = new THREE.Mesh(plane, material);
  mesh.rotation.x = - Math.PI / 2;
  mesh.matrixAutoUpdate = false;
  mesh.updateMatrix();

  plane.computeFaceNormals();
  plane.computeVertexNormals();

  scene.add(mesh);

  animate();
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
  //controls.update();
}

此后的结果（这对我来说很满意，但不幸的是对于应用程序的目的无效）：

Answer 1

这是一篇关于如何使用BufferGeometry的文章

要添加颜色，您可以创建一个 Float32Array 颜色并将其添加为名为“颜色”的属性。

  geometry.setAttribute(
      'color',
      new THREE.BufferAttribute(new Float32Array(colors), uvNumComponents));

然后你设置material.vertexColors为true；

  const material = new THREE.MeshPhongMaterial({
    vertexColors: true,
  });

  geometry.setAttribute(
      'color',
      new THREE.BufferAttribute(new Float32Array(colors), uvNumComponents));

  const material = new THREE.MeshPhongMaterial({
    vertexColors: true,
  });