THREE.Line中的顶点颜色

Question

我试图绘制three.js所用不同的颜色不同的顶点的线,使用THREE.Line和THREE.LineBasicMaterial与vertexColors设置为THREE.VertexColors.我希望相邻顶点的颜色之间没有插值(这样颜色只是在两个顶点之间的中点处不连续变化).

我尝试设置shading: THREE.FlatShading材料,但我现在意识到这不是一个选项LineBasicMaterial:http://jsfiddle.net/214huf0a/

是否有内置(或简单)方法来防止Three.js中一行上的点之间的颜色平滑,或者我是否需要编写自己的着色器？

Answer 1

您可以使用THREE.LineSegments和设置在每个段上创建一个颜色为three.js的行vertexColors = THREE.VertexColors;

for ( var i = 0; i < geometry.vertices.length; i+=2 ) {
    geometry.colors[ i ] = new THREE.Color( Math.random(), Math.random(), Math.random() );
    geometry.colors[ i + 1 ] = geometry.colors[ i ];
}

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

var line = new THREE.LineSegments( geometry, material );

three.js r.85