这个问题之前曾在这里被问过：Threejs: assign different colors to each vertex in a geometry,但它已经很老了,所以提供的解决方案不适用于当前版本的three.js(不再为Geometry类提供属性vertexColors).
我知道可以设置几何体的每个面的颜色,但是我将球体的顶点设置为不同的距离,并且我希望同时调整每个顶点的颜色,这取决于它与中心的距离.
最佳答案
这似乎就是你所要求的(尽管我之前从未使用过三次,所以我不是百分之百就是你所要求的：
原文链接：https://www.f2er.com/js/429853.html关键是(正如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/
