Threejs:为几何中的每个顶点分配不同的颜色

问题描述

我想通过 Three.js 中的 IdMapping 进行采摘

I want to do picking via IdMapping in Three.js

由于性能问题，我只有一个巨大的几何图形，计算如下:

Because of performance issues I only have one huge geometry, computed like this:

for (var i = 0; i < numberOfVertices; i += 9) {
  p1  = new THREE.Vector3(graphData.triangles.vertices[i+0], graphData.triangles.vertices[i+1], graphData.triangles.vertices[i+2]);
  p2  = new THREE.Vector3(graphData.triangles.vertices[i+3], graphData.triangles.vertices[i+4], graphData.triangles.vertices[i+5]);
  p3  = new THREE.Vector3(graphData.triangles.vertices[i+6], graphData.triangles.vertices[i+7], graphData.triangles.vertices[i+8]);
  geometry.vertices.push(new THREE.Vertex( p1.clone() ));
  geometry.vertices.push(new THREE.Vertex( p2.clone() ));
  geometry.vertices.push(new THREE.Vertex( p3.clone() ));
  geometry.faces.push( new THREE.Face3( i/3, i/3+1, i/3+2 ) );

  // i want to do something like this:
  geometry.colors.push(new THREE.Color(0xFF0000));
  geometry.colors.push(new THREE.Color(0xFF0000));
  geometry.colors.push(new THREE.Color(0xFF0000));
}

geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({});

var triangles = new THREE.Mesh( geometry, material );
scene.add(triangles);

如何为几何中的每个顶点指定不同的颜色?

How can I assign different colors to each vertex in my geometry?

推荐答案

它必须是 geometry.vertexColors 而不是 geometry.colors(按顶点推送颜色).

It has to be geometry.vertexColors instead of geometry.colors (push a colour per vertex).

和材料:

material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });

这篇关于Threejs:为几何中的每个顶点分配不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！