Why are some lines not in the correct color

Questions
1

This is a mesh from a buffer geometry. I applied the blue edges with the edges geometry.
image

    const mesh = new THREE.Mesh( geometry, material );
    this.mesh = mesh;
    scene.add( mesh );
    mesh.position.set(0,0,0)

    const edges = new THREE.EdgesGeometry( geometry,  1);
    var colors = [];
    for (var i = 0; i < edges.attributes.position.count; i += 3) {
      colors.push( 0, 0, 1 );
      colors.push( 0, 0, 1 );
    }
    edges.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

    const lines = new THREE.LineSegments( edges, new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }));
    this.lines = lines

    scene.add( lines );

Has anyone an idea, why the edges at the corners do not have the correct color?

2

Your for loop for adding colors looks a bit unusual. Try this:

for (var i = 0; i < edges.attributes.position.count; i ++) {
    colors.push( 0, 0, 1 );
}
edges.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
1 Like