How to make design to be clear?

Please I don’t Know what is the problem when design like this shown here


I changed the material but it become black when I used MeshBasicMaterial it become as shown in the picture could someone help me to fix this ? is there something in my code does not exist I think That’s why I got this :thinking:

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…

1 Like

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 :slight_smile:
in the picture bellow there is two plane which intersected in one line that is I want but to be colored.
image

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.)?

1 Like

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 :thinking:

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.

3 Likes

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