Cant get earcut to work

Questions
1

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));
geometry.setIndex(indices);

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

scene.add(splineObject);

and the result:

image
image640×562 2.39 KB

Any ideas what am i doing wrong?

2

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
3

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.

4

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?

5

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