Recently, I delved into learning three.js and am eager to figure out how to fill in the face color after creating a polygon based on randomly given vertices. Can anyone guide me on how to achieve this?
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);
});
For reference, you can check out the jsfiddle here: https://jsfiddle.net/d9quczhe/