three.js fill color(face) randomly ordered vertex, incident polygon

Question

I just recently studied three js. I want to fill in the face color after creating a polygon based on vertices. How can I do this? The vertices will be given randomly

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 5, 10);
camera.lookAt(0, 5, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);



var grid = new THREE.GridHelper(30, 30, 0xffffff, 0x404040);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

var coordinatesList = [
  new THREE.Vector3(2, 0, 5),
  new THREE.Vector3(0, 10, 3),
  new THREE.Vector3(5, 10, 4),
  new THREE.Vector3(2, 8, 2),
  new THREE.Vector3(5, 5, 1)
];


// shape
var geomShape = new THREE.ShapeBufferGeometry(new THREE.Shape(coordinatesList));
var matShape = new THREE.MeshBasicMaterial({color:"blue", side: THREE.DoubleSide});
var shape = new THREE.Mesh(geomShape, matShape);
scene.add(shape);

// points
var geom = new THREE.BufferGeometry().setFromPoints(coordinatesList);
var matPoints = new THREE.PointsMaterial({size: 0.55, color: "pink"});
var points = new THREE.Points(geom, matPoints);
scene.add(points);


// lines
var matLines = new THREE.LineBasicMaterial({color: "magenta"});
var lines = new THREE.LineLoop(geom, matLines);
scene.add(lines);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

jsfiddle : https://jsfiddle.net/d9quczhe/

user_4045502 · Answer

In your specific case, you can assign Z-coordinate from a vector of coordinatesList to the respective point in your geometry:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 0, 25);
camera.lookAt(0, 5, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);



var grid = new THREE.GridHelper(30, 30, 0xffffff, 0x404040);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

var coordinatesList = [
  new THREE.Vector3(2, 0, 5),
  new THREE.Vector3(0, 10, 3),
  new THREE.Vector3(5, 10, 4),
  new THREE.Vector3(2, 8, 2),
  new THREE.Vector3(5, 5, 1)
];


// shape
var geomShape = new THREE.ShapeBufferGeometry(new THREE.Shape(coordinatesList));

// set Z-coord from the original vectors ///////////////////////////////////////
let pos = geomShape.attributes.position;
for(let i = 0; i < pos.count; i++){
    pos.setZ(i, coordinatesList[i].z)
};
geomShape.computeVertexNormals();
////////////////////////////////////////////////////////////////////////////////
console.log(geomShape)

var matShape = new THREE.MeshBasicMaterial({color:"blue", side: THREE.DoubleSide});
var shape = new THREE.Mesh(geomShape, matShape);
scene.add(shape);

// points
var geom = new THREE.BufferGeometry().setFromPoints(coordinatesList);
var matPoints = new THREE.PointsMaterial({size: 0.55, color: "pink"});
var points = new THREE.Points(geom, matPoints);
scene.add(points);


// lines
var matLines = new THREE.LineBasicMaterial({color: "magenta"});
var lines = new THREE.LineLoop(geom, matLines);
scene.add(lines);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body{
  overflow: hidden;
  margin: 0;
}

three.js fill color(face) randomly ordered vertex, incident polygon

1 Answers