Faces color problem when using TubeBufferGeometry

Hi all,
I used TubeBufferGeometry in my code. But when I check the line. Some part of the segment show different color with sawtooth. But when I use the TubeGeometry, the problem is not existing.

00%20PM 06%20PM

My code to draw the line:

curve = new THREE.CatmullRomCurve3( points1, false, “centripetal”);
curve.name = “curve_” +i;
geometry = new THREE.TubeBufferGeometry( curve, curveSegments, tubeRadius, radialSegments, closed );//.toNonIndexed();
geometry.name = “TubeGeometry” + i;
geometry.elementsNeedUpdate = true;
geometry.colorsNeedUpdate = true;

material = new THREE.MeshPhongMaterial( {
color: 0xffb3b3,//0xf4f9f9,
vertexColors: THREE.VertexColors,
opacity: 1,
transparent: false,
side:THREE.DoubleSide,
wireframe: false
});

material.visible = true;
material.needsUpdate = true;
material.name = “material” + i;
// mesh
mesh = new THREE.Mesh( geometry, material );
mesh.name = “mesh” + i;

Can you please demonstrate the issue with a [live example(https://jsfiddle.net/f2Lommf5/)?

BTW: Setting material.needsUpdate to true is not necessary when you create a new material. Besides, when using a geometry generator based on BufferGeoemtry (like TubeBufferGeometry), elementsNeedUpdate and colorsNeedUpdate do not exist. These are properties of Geometry.

Ok, thanks. I create it on the https://jsfiddle.net/yancychy/dfhmg4ku/65/ .
I comment on the //vertexColors: THREE.FaceColors. Otherwise, the color is black.
57%20PM

The way you compute your camera parameters is problematic. far has a value of 327667 which will cause depth precision and also the mentioned lighting issues. Besides, TubeGeometry is not able to compute appropriate normals for such an extreme input of points. Certain parts of a tube section overlap or intersect and the geometry generator can’t handle this. This can only be fixed if you improve your points array. After some optimization of your code, that’s the best I can come up with:

https://jsfiddle.net/h5gqw3xb/

When you study the code, you will see different camera parameters and a different lighting setup. I’ve also deleted the code section where you have tried to create a second instance of WebGLRenderer. That snippet did not make sense to me. Besides, setting vertexColors does not have any effect since your geometry does not have vertex colors.

I’m afraid I can not confirm this. The geometry type has not effect on this issue.

Thanks Mugen87.

The https://jsfiddle.net/h5gqw3xb/ is much better. Yes, the points are not good. I will do interpolation on these points to smooth them.

But when I use the TubeGeometry, the problem is not existing.

I’m afraid I can not confirm this. The geometry type has not effect on this issue.

Yes, I tested the TubeGeometry, the problem is still existing. It’s the data problem.