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 );
scene.add( mesh );
Thank you
Thus, you can generate images you want.