I am trying to create a polygon in three.js This is the code that I used.

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

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

}
}

Here are the coordinates that I am passing:

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

Although it does create a polygon but it doesn't create the desired polygon. The vertex at (x:2,y:8,z:0) is not in position. The problem is that the triangular faces aren't appropriately being defined. Please help with this so that the faces and vertices can be dynamic and generated geometry is appropriate.

Thanks a ton.

P.S. I tried working with shape but that doesn't seem to be working for me either. I have used this in the code.

I am trying to create a polygon in three.js This is the code that I used.

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.puteFaceNormals();
    var zone = new THREE.Mesh(geometry, material);
    scene.add(zone);

}
}

Here are the coordinates that I am passing:

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

Although it does create a polygon but it doesn't create the desired polygon. The vertex at (x:2,y:8,z:0) is not in position. The problem is that the triangular faces aren't appropriately being defined. Please help with this so that the faces and vertices can be dynamic and generated geometry is appropriate.

Thanks a ton.

P.S. I tried working with shape but that doesn't seem to be working for me either. I have used this in the code.

• javascript
• three.js
• 3d
• geometry-surface

1 Answer 1

Using THREE.Shape() is perfectly fine in your case:

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 grid = new THREE.GridHelper(30, 30, 0xffffff, 0x404040);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

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


// shape
var geomShape = new THREE.ShapeBufferGeometry(new THREE.Shape(coordinatesList));
var matShape = new THREE.MeshBasicMaterial({color:"blue"});
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/build/three.min.js"></script>

Three.js r109