three.js 填充颜色（面）随机排列的顶点，入射多边形

Question

最近刚学了三个js。我想在基于顶点创建多边形后填充面部颜色。我怎样才能做到这一点？顶点将随机给出

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/

Answer 1

在您的特定情况下，您可以将 coordinatesList 向量中的 Z 坐标分配给几何中的相应点：

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

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

three.js 填充颜色（面）随机排列的顶点，入射多边形

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

javascript

3d

polygon

vertex

three.js