javascript – 将颜色分配给Three.js中几何体中的顶点

这个问题之前曾在这里被问过：Threejs: assign different colors to each vertex in a geometry,但它已经很老了,所以提供的解决方案不适用于当前版本的three.js(不再为Geometry类提供属性vertexColors).

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

最佳答案

这似乎就是你所要求的(尽管我之前从未使用过三次,所以我不是百分之百就是你所要求的：

关键是(正如morris4所说),设置面部的颜色,而不是几何体.

您还需要设置材质’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.并且它似乎不像最新版本那样工作.

不过,它仍然可能对你有用……

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