Threejs - How to build a polygon in 3D space from points

Question

I guess it is an easy task, but I have flaws in my code or thoughts.

I want to create a polygon from some points that are all in the same plane and they are ordered (around the polygon) in a points array. But, depending on the points, the polygon does not look like it should.

I have created a minimal repo with just the code that builds the scene with the poly and an orthographic camera to view it.

npm i
npm run dev:test

I guess the important part is the way I build the polygon. Here is the code

    function createPoly() {
    
        const points: readonly Vector3[] = [
            new Vector3(0, 0, 0),
            new Vector3(4, 0, 0),
            // new Vector3(3, 0, 2),    // <- works
            new Vector3(4, 0, 4),
            // new Vector3(2, 0, 3),    // does not work
            new Vector3(0, 0, 4)
        ];
    
        let polyShape = new Shape(
            points.map((v3) => {
                const v2 = new Vector2(v3.x, v3.z);
                return v2;
            })
        );

        const polyGeometry = new ShapeGeometry(polyShape);
        polyGeometry.setAttribute(
            "position",
            new Float32BufferAttribute(
                points.map(v3 => [v3.x,v3.y,v3.z]).flat(),3)
        )    

        const polyMesh = new Mesh(
            polyGeometry,
            new MeshBasicMaterial({ 
                     color: 0x999999, 
                     side: DoubleSide })
        )
    
        return polyMesh;
    }

The 4 points of the square (x/z plane) work. But adding (2/0/3) is one example that behaves differently than I think.

(3/0/2) works, as long as I don't also add (2/0/3).

Please give me a hint to my thought/code flaw.

You can create a working codesanbox and add the link to your question — Anurag Srivastava, Feb 20 '23 at 16:41
The answer is in the threejs doc : https://threejs.org/docs/#api/en/core/BufferGeometry — pirs, Feb 21 '23 at 17:45

score 0 · Answer 1 · answered Feb 24 '23 at 14:34

The problem in my code above was the overwriting of the points in the ShapeGeometry (follow the link of @pirs above for more info).

Fixing it was as easy as removing that part. Creating the Shape with the 2D points is enough. When the ShapeGeometry is created from that Shape it is handled correctly. I had the code from another SO answer. See my answer there for some more info. https://stackoverflow.com/a/75557678/7869582

Here is the code from above without the faulty part

    function createPoly() {
        
        const points: readonly Vector3[] = [
            new Vector3(0, 0, 0),
            new Vector3(4, 0, 0),
            new Vector3(3, 0, 2),    // <- works
            new Vector3(4, 0, 4),
            new Vector3(2, 0, 3),    // <- works
            new Vector3(0, 0, 4)
        ];
    
        console.log("new poly", points.map(pos => `${pos.x.toFixed(2)}/${pos.y.toFixed(2)}/${pos.z.toFixed(2)}`));
        
        let polyShape = new Shape(
            points
                .map((v3) => {
                    const v2 = new Vector2(v3.x, v3.z);
                    return v2;
                })
        );
    
        const polyGeometry = new ShapeGeometry(polyShape);
    
        const polyMesh = new Mesh(
            polyGeometry,
            new MeshBasicMaterial({ color: 0x999999, side: DoubleSide })
        )
        
        // I have to rotate the poly as I am working in the x/z plane
        polyMesh.rotateX(Math.PI / 2);
    
        return polyMesh;
    }

Threejs - How to build a polygon in 3D space from points

1 Answers1