Please I don’t Know what is the problem when design like this shown here
you’ll have to elaborate on the result you’re expecting, the image + description is very limited on an explanation as to what you’re doing vs the expected result…
I agree with @Lawrence3DPK
From your image…I am guessing that your layer of your model/mesh/etc. are on top of eachother…
Try changing the position properties of these
I want the place where the plane changed to be clear like the picture bellow 
in the picture bellow there is two plane which intersected in one line that is I want but to be colored.
The only person, who knows what and how works in your code, is you.
Is your code/project classified, that you can’t provide even a minimal live working example (jsfiddle, codepen, codesandbox etc.)?
here is My code used Idon’t know where is the issue.
var lss = ls + 1;
var wss = ws + 1;
var faceCount = ls * ws * 2;
var vertexCount = lss * wss;
var g = new THREE.BufferGeometry( );
g.faceIndices = new Uint32Array( faceCount * 3 );
g.vertices = new Float32Array( vertexCount * 3 );
//g.normals = new Float32Array( vertexCount * 3 );
//g.uvs = new Float32Array( vertexCount * 2 );
g.setIndex( new THREE.BufferAttribute( g.faceIndices, 1 ) );
g.addAttribute( 'position', new THREE.BufferAttribute( g.vertices, 3 ).setDynamic(true ) );
//g.addAttribute( 'normal', new THREE.BufferAttribute( g.normals, 3 ).setDynamic( true ) );
//g.addAttribute( 'uv', new THREE.BufferAttribute( g.uvs, 2 ) );
var idxCount = 0;
var material=new THREE.MeshBasicMaterial( { color: 'white', side: THREE.DoubleSide, wireframe:true } )
for ( var j = 0; j < ls; j ++ ) {
for ( var i = 0; i < ws; i ++ ) {
// 2 faces / segment, 3 vertex indices
a = wss * j+i;
b1 = wss * ( j + 1 ) + i; // right-bottom
c1 = wss * ( j + 1 ) + 1 + i;
b2 = wss * ( j + 1 ) + 1 + i; // left-top
c2 = wss * j + 1 + i;
g.faceIndices[ idxCount ] = a; // right-bottom
g.faceIndices[ idxCount + 1 ] = b1;
g.faceIndices[ idxCount + 2 ] = c1;
g.faceIndices[ idxCount + 3 ] = a; // left-top
g.faceIndices[ idxCount + 4 ] = b2,
g.faceIndices[ idxCount + 5 ] = c2;
g.addGroup( idxCount, 6, i ); // write groups for multi material
idxCount += 6;
}
}
var curveGeometry = new THREE.BufferGeometry().setFromPoints( points );
var tangent;
var normal = new THREE.Vector3( 0, 0, 0 );
var binormal = new THREE.Vector3( 0, 1, 0 );
var x, y, z;
var vIdx = 0; // vertex index
var posIdx; // position index
for ( var j = 0; j < lss; j ++ ) { // length
for ( var i = 0; i < wss; i ++ ) { // width
// calculate here the coordinates according to your wishes
tangent = trenchSpline.getTangent( j / ls ); // .. / length segments
normal.cross( tangent, binormal );
binormal.cross( normal, tangent ); // new binormal
normal.normalize().multiplyScalar(1 );
x = trenchPoints[ j ].x+0.5*(i-(width+Bermleft+Bermright+sidesloperight+sideslopeleft)/2)*normal.x;
y = trenchPoints[ j ].y;
z = trenchPoints[ j ].z+0.5*(i-(width+Bermleft+Bermright+sidesloperight+sideslopeleft)/2)*normal.z;
xyzSet();
vIdx ++;
}
}
let ditchright=Math.floor(document.getElementById('sidesloperight').value);
let ditchleft=Math.floor(document.getElementById('sideslopeleft').value);
g.attributes.position.needsUpdate = true;
//g.attributes.normal.needsUpdate = true;
var mesh = new THREE.Mesh( g, material );
scene.add( mesh );
I don’t see .computeVertexNormals() anywhere in your code
Is that the Problem I? I add it but same as first time.
You have to know.
I don’t know how you use it in your code. I don’t know if your scene contains any light source. And if it does, their parameters and types are unknown for me.
So far, your question looks like an attempt to make the others to do your job for you.
I agree with prisoner849, however if you were to provide us some extra details, then I’m sure someone would be happy to help…
even console.logging something would be helpful…just so the forum knows what errors occur