Hi, Please I want To color specific faces for curved plane could you tell me how can I do That ?
var ls=50;
var ws=10;
var lss = ls + 1;
var wss = ws + 1;
var faceCount = ls * ws * 2;
var vertexCount = lss * wss;
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.25*(i-ws/2)*normal.x;
y = trenchPoints[ j ].y;
z = trenchPoints[ j ].z+0.25*(i-ws/2)*normal.z;
xyzSet();
vIdx ++;
}
}
for(let x=0;x<lss;x++){
for(let y=4;y<Math.round((width+1)*3/2);y+=3){
g.attributes.position.array[y+(width+1)*3*x]=(2*slope/10)*y;
}
}
for(let x=0;x<lss;x++){
for(let y=25;y<Math.round(width*3-1);y+=3){
g.attributes.position.array[y+(width+1)*3*x]=2*(2*slope/10)*Math.round((width+1)*3/2)-(2*slope/10)*y;
}
}
g.attributes.position.needsUpdate = true;
//g.attributes.normal.needsUpdate = true;
var mesh = new THREE.Mesh( g, material );
scene.add( mesh );
// set vertex position
function xyzSet() {
posIdx = vIdx * 3;
g.vertices[ posIdx ] = x;
g.vertices[ posIdx + 3 ] = y;
g.vertices[ posIdx + 2 ] = z;
}
I Used this code for coloring the faces but no working
for(let x=0;x<50;x++){
g.faces[x].color.setHex('green');
}
This code is working when I use Geometry() instead of BufferGeometry() is it a Difference between Them? I checked The console But faces is missing there is only faceindices as shown in the picture.
