Javascript 使用three.js自定义形状

我正在尝试在three.js中创建一个多边形 这是我使用的代码

function DeployZone(coordinatesList) {
// Create the polygon Shape
{


    var material = new THREE.MeshLambertMaterial({ color: 0x00ffcc });

    var faces = [0, 1, 2, 3, 4];

    var geometry = new THREE.Geometry();
    for (var i = 0; i < coordinatesList.length; i++) {
        geometry.vertices.push(new THREE.Vector3(
            coordinatesList[i].x,
            coordinatesList[i].z,
            coordinatesList[i].y
        ));
    }


    for (var i = 0; i<faces.length; i++) {
        for (var j = 1; j < faces.length - 1; j++) {
            geometry.faces.push(new THREE.Face3(faces[0], faces[j], faces[j + 1]));
        }
    }

    geometry.computeFaceNormals();
    var zone = new THREE.Mesh(geometry, material);
    scene.add(zone);

}
}

功能部署区（协调列表）{
//创建多边形形状
{
var material=new THREE.MeshLambertMaterial（{color:0x00ffcc}）；
var faces=[0,1,2,3,4]；
var geometry=new THREE.geometry（）；
对于（变量i=0；iTHREE.Shape（）

非常合适：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，1100）；
摄像机位置设置（0,5,10）；
摄像机。注视（0，5，0）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var grid=new THREE.GridHelper（30,30,0xffffff,0x404040）；
grid.rotation.x=Math.PI*0.5；
场景.添加（网格）；
变量协调列表=[
新的三个矢量3（0，0，0），
新的三个矢量3（0，10，0），
新的三个矢量3（5，10，0），
新的三矢量3（2，8，0），
新三，矢量3（5，5，0）
];
//形状
var geomeshape=new THREE.ShapeBufferGeometry（new THREE.Shape（coordinates列表））；
var matShape=新的3.MeshBasicMaterial（{颜色：“蓝色”}）；
var形状=新的三网格（geomShape，matShape）；
场景。添加（形状）；
//要点
var geom=新的三个.BufferGeometry（）.setFromPoints（坐标列表）；
var matPoints=新的三点材质（{size:0.55，颜色：“粉色”}）；
var点=新的三个点（geom、matPoints）；
场景。添加（点）；
//线条
var matLines=新的三线基本材质（{color:“洋红”}）；
var线=新的三线回路（geom、matLines）；
场景。添加（行）；
renderer.setAnimationLoop（（）=>{
渲染器。渲染（场景、摄影机）；
})；

正文{
溢出：隐藏；
保证金：0；
}

---

你好，非常感谢。不过有一个问题。我更新了坐标如下：
坐标列表=[新三个。矢量3（0，0，0），新三个。矢量3（0，10，10），新三个。矢量3（5，10，10），新三个。矢量3（2，8，8），新三个。矢量3（5，5，5）]
虽然点和线按预期渲染，但形状却没有。
var coordinatesList = new List<Coordinates>() {
      new Coordinates(X:0,Y:0,Z:0),
       new Coordinates(X:0,Y:10,Z:0),
       new Coordinates(X:5,Y:10,Z:0),
       new Coordinates(X:2,Y:8,Z:0),
       new Coordinates(X:5,Y:5,Z:0)
    };