I'm trying to create 3D objects from 2D coordinates which i imported another file

Questions
, , , ,
1

Im %100 sure about the coordinates are useable. I dont know how can i create the 3D objects

export const createPolygonMeshForCoordinates = function(coordinates) {
    console.log("i am responsible for creating polygons with the following coordinates", coordinates)
    const point1 = coordinates[0];
    const point2 = coordinates[1];
    const point3 = coordinates[2];
    const point4 = coordinates[3];
    const point5 = coordinates[4];

    console.log(point1, point2, point3, point4, point5);

    const points = [point1, point2, point3, point4, point5];
    console.log('points:', points);

    if (coordinates.length < 3) {
        console.error('At least three points are required to create a 3D shape.');
        return null;
    }

    const polys = coordinates.map(coord => new THREE.Vector2(coord[0], coord[1]));

    const shape = new THREE.Shape();
    shape.moveTo(points[0].x, points[0].y);
    polys.slice(1).forEach(point => {
        shape.lineTo(point.x, point.y);
    });
    shape.lineTo(points[0].x, points[0].y); 

    const extrudeSettings = {
        depth: 5, 
        bevelEnabled: false
    };

    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
    return mesh;
}
2

Is there a specific reason why you’re drawing the shape with lineTo? As opposed to this:

const shape = new THREE.Shape( polys )

Not sure if that is the nature of your problem, but that’s usually how I do this.

2 Likes
3

i use lineTo because the coords hs latitude and longitude values and it makes points.
in array a lot of points i have.
i have to draw this geometric shape with this points.
im not sure the correct way which i use and its not working so :confused:
im trying to do something different and now script :

export const createPolygonMeshForCoordinates = function(coordinates) {
    console.log("I am responsible for creating polygons with the following coordinates", coordinates);
    
    const point1 = coordinates[0];
    const point2 = coordinates[1];
    const point3 = coordinates[2];
    const point4 = coordinates[3];
    const point5 = coordinates[4];

    console.log(point1, point2, point3, point4, point5);

    const points = [point1, point2, point3, point4, point5];
    console.log('points:', points);
     
    const geo = new THREE.BufferGeometry();

    console.log('geometry', geo);
    
    const vertices = [
        point1.x, point1.y, point1.z,
        point2.x, point2.y, point2.z,
        point3.x, point3.y, point3.z,
        point4.x, point4.y, point4.z,
        point5.x, point5.y, point5.z,
    ];

    const posAttribute = new THREE.BufferAttribute(new Float32Array(vertices), 3);
    geo.setAttribute('position', posAttribute);

    const material = new THREE.MeshBasicMaterial;
    const mesh = new THREE.Mesh(geo, material);
    scene.add(mesh);
    return mesh;


}

the console.log’s are working correctly

4

The Shape constructor will do that for you, it will connect points in sequential order.

What exactly is the issue you’re encountering? Maybe if you include the error you get or a live example it might make things easier for those looking at this thread to help you.

5

i only get this error: because of the some values are smaller than 1

Screenshot 2024-08-23 at 17.23.37

6

@sphynx Any chance to provide an editable working live code example, that demonstrates the issue? jsfiddle, codepen, codesandbox etc.