# How to color middle of the road?

**URL:** <https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663>\
**Category:** Questions\
**Tags:** animation, textures, materials, geometry\
**Created:** [July 9, 2023, 7:05pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663 "2023-07-09T19:05:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [July 9, 2023, 7:05pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/1 "2023-07-09T19:05:02Z")

</div>

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

```javascript
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

```javascript
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](https://www.drivespark.com/img/2016/08/double-yellow-line-road-markings-03-1470225623.jpg)  
here is my code

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

```

Thank you

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 9, 2023, 7:10pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/2 "2023-07-09T19:10:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [July 9, 2023, 7:19pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/3 "2023-07-09T19:19:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 9, 2023, 7:26pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/4 "2023-07-09T19:26:01Z")

</div>

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](https://threejs.org/docs/#examples/en/math/convexhull/Face) 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…

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 9, 2023, 7:30pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/5 "2023-07-09T19:30:59Z")

</div>

> [@mohamad\_chouacha](#):
>
> do you know how to fix this adding color for just in the middle as road markings

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!](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160)

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [July 9, 2023, 7:36pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/6 "2023-07-09T19:36:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [July 9, 2023, 7:42pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/7 "2023-07-09T19:42:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 9, 2023, 7:47pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/8 "2023-07-09T19:47:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 9, 2023, 7:47pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/9 "2023-07-09T19:47:57Z")

</div>

> [@mohamad\_chouacha](#):
>
> I don’t like the images because It take time for loading.

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

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [July 9, 2023, 7:53pm UTC](https://discourse.threejs.org/t/how-to-color-middle-of-the-road/53663/10 "2023-07-09T19:53:53Z")

</div>

yes that ist Thak you 🙂