Is there way to change the color of each line segment drawn between each point.
For example in the example below i want to draw a blue line between the first and second vectors and a yellow line between the second and the third vector.
const curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
] );
I already know how to have a single color for all the connections in the above CatmullRomCurve3. But dont know if it is possible to have multi col;or lines between the points.
Yes, it is possible. Three.js curves have no colors, but after you create the geometry, you can add a color buffer attribute to the geometry and turn on the vertexColors property in the material. Thus you may have individual color of each vertex. Then color the vertices of each fragment with the desired color:
Can I ask you if the setting, vertexColors:true, works for other material, like MeshStandardMaterial or MeshLambertMaterial? I tried it on MeshStandardMaterial and it failed. How about using the setting on other geometry, not just line?
It works with both materials. It works with other geometries as well (e.g. BoxGeometry, or custom user geometries). Most likely there is a bug in your code.
I changed your following project to TubeGeometry. It only worked when the material is set to MeshBasicMaterial, not MeshStandardMaterial, and color needs to be set to a certain value, not vertexColors.
Please correct me, if I’m mistaken.Thanks.
var geometry = new THREE.TubeGeometry(curve, 100, 0.5, 20, false);
var material = new THREE.MeshBasicMaterial( { color:0xfff00} );
Thanks for your reminder. I forgot the point that MeshStandardMaterial needs the source of light.
Although color can be seen now, only one color is visible, instead of the assigned color by the following color array. Should I modify any code here? Thanks.
var colorCurve = [ [1,0,0], [1,1,0], [0,1,0], [1,0,1], [0,1,1], [1,1,1],[1,0,0] ];
var colors = [];
for( var i=0; i<SEGMENTS; i++ )
{
var idx = Math.floor(i/SEGMENTS_PER_FRAGMENT);
colors.push( ...colorCurve[ idx ] );
}
colors.push( ...colorCurve[ idx ] );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ));
var material = new THREE.MeshStandardMaterial({vertexColors: true});
When I try it, I see no problems. You need a proper light (thanks @prisoner849), you need a proper vertex color setting (the vertices in a tube are much more than in a line), you need a mesh object (not a line object), and … you need to post your issue in a new thread (piggybacking on other threads is considered impolite).
Here is what I get when I try a tube instead of a line:
