javascript - 在 Three.js 中为几何体中的顶点分配颜色

Question

这个问题以前在这里问过:Threejs: assign different colors to each vertex in a geometry , 但它很旧，因此提供的解决方案不适用于当前版本的 three.js(不再为 Geometry 类提供属性 vertexColors)。

我知道可以设置几何体的每个面的颜色，但我将球体的顶点设置为不同的距离，并且我希望同时调整每个顶点的颜色取决于它与中心的距离。

Answer 1

这似乎可以满足您的要求(虽然我以前从未使用过三，所以我不是 100% 这就是您要求的:

关键是(如 morris4 所说)，在面上设置颜色，而不是几何形状。

您还需要设置 Material 的“vertexColors”属性，以便它通过。

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

geometry = new THREE.CubeGeometry( 10, 10, 10 );

for ( faceIndex in geometry.faces )
{
    var face = geometry.faces[ faceIndex ];
    face.vertexColors[ 0 ] = new THREE.Color(0xFF0000);
    face.vertexColors[ 1 ] = new THREE.Color(0x00FF00);
    face.vertexColors[ 2 ] = new THREE.Color(0x0000FF);
    face.vertexColors[ 3 ] = new THREE.Color(0xFFFFFF);
}

var material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, vertexColors: THREE.VertexColors });

var object = new THREE.Mesh( geometry, material );

object.position.z = -25;

scene.add(object);

function render() {
    requestAnimationFrame(render);
    object.rotation.x += 0.01;
    object.rotation.y += 0.01;
    renderer.render(scene, camera);    
}
render();

我把它放在这里:http://jsfiddle.net/87mcD/3/

注意是r54，最新的是r63。而且它似乎不像在最新版本上那样工作。

不过，它可能对你还是有用的......

编辑:这个 fiddle 适用于 three.js r.63:http://jsfiddle.net/87mcD/4/