Javascript 绘制三条几何图形线时，颜色不'；不要拘泥于片段

绘制缓冲区几何体线时，我将索引设置为：

索引=[1,2,2,3,3,4]

和如下颜色：

颜色=[r1，g1，b1，r1，g1，b1，r2，g2，b2，r3，g3，b3，r3，g3]

。然而，这些颜色不会附着在片段上并超出它们，最终与下一种颜色混合。我注意到它并没有画出所有的颜色，只画了第一种，就像是给每种颜色画了一段半。 我创造了一把小提琴：

var positions=new Float32Array（最大点数*3）；//每个点3个顶点
var colors=新阵列（2*（最大点数-1）*3）；
var指数=新的UINT16阵列（2*（最大点数-1））；
var x=y=z=index=0；
对于（变量i=0，l=MAX_点；i

---

编辑小提琴。

正如韦斯特兰利指出的那样，通过使用非索引几何体，我能够解决这个问题。你可以在这里看到一把小提琴：

位置[index++]=x；
位置[索引++]=y；
位置[index++]=z；
对于（变量i=1，l=MAX_POINTS-1；i

正如韦斯特兰利指出的那样，通过使用非索引几何体，我能够解决这个问题。你可以在这里看到一把小提琴：

位置[index++]=x；
位置[索引++]=y；
位置[index++]=z；
对于（变量i=1，l=MAX_POINTS-1；i

您确定链接了正确的小提琴吗？这里的代码和fiddle中的代码似乎不一样，fiddle中的代码也没有运行-它有错误。我第一次使用它时。现在正确了吗？是的，但也许也可以将孔代码放在这里的代码块中。小提琴有额外的代码（在init函数+渲染和动画函数的末尾），这里没有显示。请使用

3。改为使用线段

和非索引

BufferGeometry

。我以前使用过线段但索引几何体，这不是一个错误吗？您确定链接了正确的小提琴吗？这里的代码和fiddle中的代码似乎不一样，fiddle中的代码也没有运行-它有错误。我第一次使用它时。现在正确了吗？是的，但也许也可以将孔代码放在这里的代码块中。小提琴有额外的代码（在init函数+渲染和动画函数的末尾），这里没有显示。使用

3。改为使用线段

和非索引

BufferGeometry

。我以前使用过线段但索引几何体，这不是一个bug吗？

var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
var colors = new Float32Array(2*(MAX_POINTS-1)*3);
var indices = new Uint16Array(2*(MAX_POINTS-1));
var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;
    x += ( Math.random() - 0.5 ) * 300;
    y += ( Math.random() - 0.5 ) * 300;
    z += ( Math.random() - 0.5 ) * 300;
}
var iindex = 0, cindex = 0;
for ( var i = 1, l = MAX_POINTS; i < l; i ++ ) {
    indices[iindex++] = i-1;
    indices[iindex++] = i;
    x = ( Math.random() );
    y = ( Math.random() );
    z = ( Math.random() );
    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;

    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ));
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.setIndex(new THREE.BufferAttribute( indices, 1 ));

// material
var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors, linewidth:2});    

positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;
for ( var i = 1, l = MAX_POINTS-1; i < l; i ++ ) {
    x += ( Math.random() - 0.5 ) * 300;
    y += ( Math.random() - 0.5 ) * 300;
    z += ( Math.random() - 0.5 ) * 300;
    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;
}
positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;
var iindex = 0, cindex = 0;
for ( var i = 1, l = MAX_POINTS; i < l; i ++ ) {
    x = ( Math.random() );
    y = ( Math.random() );
    z = ( Math.random() );
    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;

    colors[ cindex ++ ] = x;
    colors[ cindex ++ ] = y;
    colors[ cindex ++ ] = z;
}