Different edges color in same cube?


Could anyone give some suggestions for the below question?

I added edges to my cube through using THREE.lineSegments and THREE.EdgesGeometry.

I am wondering how to set the different edges of the same cube with a different color.

Currently, I use THREE.LineBasicMaterial to set color.


We lately discussed a similar issue at stackoverflow:

Short answer: You can render your line segments with an additional color geometry attribute and by setting Material.vertexColors to THREE.VertexColors.

1 Like

@Mugen87 I follow your suggestion and I achieve this: https://jsfiddle.net/mjph9uL7/4/

But when I tried to add the Edges Geometry, I can’t render anything. I commented my problem in line 29

You didn’t add colors to the new edges geometry.
If you change color of scene’s background to something brighter, then you’ll see edges of black color.
Or you can remove vertexColors: true from material, and you’ll get the edges of white.

Note, that edgesGeometry is BufferGeometry.
I’ve changed your fiddle: https://jsfiddle.net/prisoner849/b4j1fupq/

1 Like