# How to color middle of the road?

Good day hope you’re well.
I have created road in three js and I would like to color just the middle of the road using yellow color I think the way we color if we use Geometry is different in Buffer Geometry I tried to use this as the same way as we did for Geometry based on this code

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;

trying this code

new THREE.Face3(a,b1,c1),
new THREE.Face3(a,b2,c2)

but not working.
Please I need to add color using yellow color Like in this picture
image
here is my code

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 );

Thank you

what version of three are you using? face3 has been deprecated for a good while now, did gpt generate this?

For now I use three.js r154 I tried using this Face3 many time but But caused the problems and the app will not work correctly do you know how to fix this adding color for just in the middle as road markings.

yeah 154 doesn’t export or support face3 anymore, since a while, you’d have to learn the conversion in later versions, if it’s essential you’d need to use the face3 class you can check the documentation on the face class and import it from ‘three/addons/math/ConvexHull.js’. from the image you’ve provided it just looks like you need a repeating texture on a plane…

The main question is: do you know how to build it correctly?
In your question you mention Geomety and Face3, they are hell outdated.
Have you seen this topic? Car Racing - For lovers of fast cars!

2 Likes

Yeah I saw This before But road marking is not color it is just an image I prefer to be colored sorry I don’t like the images because It take time for loading.

Appart Face3 or Geometry is there any way to color a part of this please ?

your code is an incoherent mess, especially in terms of using one of the latest versions of three… it’s difficult to make any approximation of this without a working example, you’re practically asking people to work out what you need to work out

2 Likes

CanvasTexture is an option Thus, you can generate images you want.

2 Likes

yes that ist Thak you