Cant get earcut to work

Im trying to triangulate a catmullromcurve with the mapbox earcut algorithm.

I create a catmullromcurve3 from vec3s, i push the vertices into an array, then i call the earcut triangulate function on these vertices.

I use a buffergeometry, i add the vertices as positions, and i add the result of the earcut as indices.

the relevant source code:

function getPositions(nOfPoints)


  let vertices = [];
  let points = curve.getPoints(nOfPoints);
  for (let i = 0 ; i < nOfPoints; i++)
    const x = points[i].x;
    const y = points[i].y;
    const z = points[i].z;

    vertices.push( x, y, z );
  return vertices;


curve = new THREE.CatmullRomCurve3( [

    new THREE.Vector3( coords.x, coords.y, coords.z-5),
    new THREE.Vector3( 0, coords.y, coords.z),
    new THREE.Vector3( coords.x+imageSize.width, coords.y, coords.z),
    new THREE.Vector3( coords.x+imageSize.width, 0, coords.z), 
    new THREE.Vector3( coords.x+imageSize.width, coords.y+imageSize.height, coords.z),
    new THREE.Vector3( 0, coords.y+imageSize.height, coords.z),
    new THREE.Vector3( coords.x, coords.y+imageSize.height, coords.z-5 ),
    new THREE.Vector3( coords.x, 0, coords.z-5),
    new THREE.Vector3( coords.x, coords.y, coords.z-5),

] );

curve.closed = true;
curve.curveType = 'catmullrom'
curve.tension = 0.2;

const points = getPositions(100);
var indices = Earcut.triangulate(points);
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(points, 3));

const material = new THREE.MeshBasicMaterial({color : 0x880000});
const splineObject = new THREE.Mesh( geometry, material );


and the result:

Any ideas what am i doing wrong?

What don’t you just create an instance of Shape from your points and then a ShapeBufferGeometry?

BTW: By sharing an editable live example, you make it easier for the community to fix your code.

1 Like

Thanks for the reply.

I want to use these vertices as controlpoints for the spline afterwards.
And i also want to be able to move the vertices in Z direction.

As far as i can see, its not possible to move a single vertex in Z direction with shapegeometry.

I managed to make it work, i used vec3s so i needed to give 3 as a parameter for earcut as in default it uses 2 values per vertex.

My new problem is the texturing of the spline, do i have to manually give the uv coordinates in order to make it correctly texture the spline?

Well, according to your code your are not yet generating texture coordinates although they are required if your want to use textures.