How to create broke line

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 .


here is my code :slight_smile:

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

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