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