Fill Custom Polygon Geometry

Questions
, ,
1

Hi everyone;
I want to fill the custom geometry that I generate.


    var geom = new THREE.BufferGeometry().setFromPoints(alanPts);
    
    var pointsObj = new THREE.Points(geom, new THREE.PointsMaterial({
        color: nokta_custom_color,
        size: 3
    }));
    scene.add(pointsObj);

    
    var line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({
        color: nokta_custom_color,
        size: 5
    }));
    scene.add(line);

   
    var shape = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
        color: custom_color,
        side: THREE.DoubleSide,  
        name: alan_id
    }));
    scene.add(shape);

image
image1006×622 23 KB

When I researched this issue, I realized that it looks like this due to the triangular mesh. I want to paint the entire shape. I tried this but still no results.

    const shapePositions = new THREE.Shape(alanPts);
    const geomShape = new THREE.ShapeGeometry(shapePositions);
    const matShape = new THREE.MeshBasicMaterial({
        color: 0x22d94a,
        side: THREE.DoubleSide,
        // transparent: true,
        //opacity: 0.2,
        depthTest: false,
    });
    const shape = new THREE.Mesh(geomShape, matShape);
    scene.add(shape);

Any idea can help. Thank you :slight_smile:

2

What is in alanPts? THREE.Shape works with XY coordinates (Z is ignored, maybe). If you share a CodePen demo, someone might be able to debug.

https://codepen.io/boytchev/full/GRPvaWL

image

1 Like
3

alanPTS includes my points. But you re right if it works with XY my code wont work.

image

I think I need to edit my alanPTS list.

4

The only problem is THREE.Shape works with XY, I edit my point list and it works. Thank you @PavelBoytchev

1 Like