绘制 BufferGeometry 线时,我将索引设置为:
indices = [1,2,2,3,3,4]
和颜色,例如:colors = [r1,g1,b1,r1,g1,b1, r2,g2,b2 ,r2,g2,b2,r3,g3,b3,r3,g3]
。然而,颜色不会粘附在片段上并超出它们,最终与下一个颜色混合。我注意到它不会绘制所有颜色,只会绘制第一个颜色,就像它为每种颜色绘制一半的颜色一样。
我创建了一个 fiddle :http://jsfiddle.net/0f1oxdjx/
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});
编辑了 fiddle 。
最佳答案
正如 WestLangley 指出的那样,通过使用非索引几何图形,我能够解决这个问题。您可以在这里看到一个工作 fiddle :
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;
}
关于javascript - 绘制 Three.js BufferGeometry 线时,颜色不会粘在线段上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41302840/