Вершины Цвета в 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 и настройку 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