# How to create broke line

**URL:** <https://discourse.threejs.org/t/how-to-create-broke-line/58311>\
**Category:** Questions\
**Tags:** animation, materials, shaders, textures, geometry\
**Created:** [November 18, 2023, 4:26pm UTC](https://discourse.threejs.org/t/how-to-create-broke-line/58311 "2023-11-18T16:26:32Z")\
**Posts on this page:** 2\
**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:** [November 18, 2023, 4:26pm UTC](https://discourse.threejs.org/t/how-to-create-broke-line/58311/1 "2023-11-18T16:26:32Z")

</div>

hope you 're well,

I created solid line for road now I want to be like this picture below I used this code but giving blending color .

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/c/8c136768e8c29412897c264c841fc789494c3669.png)  
here is my code 🙂

```javascript
import * as THREE from 'three';

// Create the scene
const scene = new THREE.Scene();

// Define your profile and curvepathX variables correctly

// Create the extruded geometry
const geometrycurbe = new THREE.ExtrudeGeometry(profile, { steps: 120, extrudePath: curvepathX });

// Access the attributes of the geometry
const positionAttribute = geometrycurbe.getAttribute('position');
const colorAttribute = new THREE.BufferAttribute(new Float32Array(positionAttribute.count * 3), 3);

// Modify the color of each pair of consecutive faces
for (let i = 0; i < positionAttribute.count; i += 4) {
  const color1 = new THREE.Color('red');
  const color2 = new THREE.Color('yellow');
  
  // Set the color of the first face in the pair
  colorAttribute.setXYZ(i, color1.r, color1.g, color1.b);
  colorAttribute.setXYZ(i + 1, color1.r, color1.g, color1.b);
  
  // Set the color of the second face in the pair
  if (positionAttribute.count >= i + 4) {
    colorAttribute.setXYZ(i + 2, color2.r, color2.g, color2.b);
    colorAttribute.setXYZ(i + 3, color2.r, color2.g, color2.b);
  }
}

// Set the color attribute to the geometry
geometrycurbe.setAttribute('color', colorAttribute);

// Create a material that uses vertex colors
const materialcurb = new THREE.MeshPhongMaterial({ vertexColors: true });

// Create a mesh using the extruded geometry and material
const curbstone = new THREE.Mesh(geometrycurbe, materialcurb);
scene.add(curbstone);

// Set up camera and renderer
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Animate and render the scene
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

```

I want to like this :  
[broke line](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.vectorstock.com%2Froyalty-free-vector%2Froad-with-a-broken-white-stripe-vector-3250705&psig=AOvVaw0WEVQaD2sent-pVxBXICaJ&ust=1700411138659000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCNC-56D7zYIDFQAAAAAdAAAAABAE)

---

<div class="post-metadata">

**Author:** ![nameo9283](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nameo9283/32/42038_2.png) [@nameo9283](https://discourse.threejs.org/u/nameo9283)\
**Post date:** [November 18, 2023, 6:00pm UTC](https://discourse.threejs.org/t/how-to-create-broke-line/58311/2 "2023-11-18T18:00:30Z")

</div>

You’ll need to compute and assign your UV’s for the mesh area you want for your texture and overlap them to create the tiling effect. Its more array sorting. I would suggest you try it with just a plane geometry first so you have very little to work at. UV’s are 0-1 space. You just place eaches index within that space to get a view.  
You can research other apps calculations as well, its mostly the same concept with different but similar code. The for loop will be mostly the same