How to add more internal vertices to a mesh?

Questions
1

Can I add internal vertices to a mesh?
I’m creating a mesh on the fly using THREE.Shape which is not necessarily convex.

var pts = [...];
var shape = new THREE.Shape();
shape.moveTo(pts[0][0], pts[0][1]);
pts.forEach(pt => {
  shape.lineTo(pt[0], pt[1])
});

Then I take the vertices and apply a transformation to map it on a sphere.

for (var i = 0; i < geometry.attributes.position.array.length; i += 3) {
  var phi = mapToSphere(geometry.attributes.position.array[i]);
  var theta = mapToSphere(geometry.attributes.position.array[i + 1]);
  geometry.attributes.position.array[i] = radius * Math.sin(phi) * Math.cos(theta);
  geometry.attributes.position.array[i + 1] = radius * Math.cos(phi);
  geometry.attributes.position.array[i + 2] = radius * Math.sin(phi) * Math.sin(theta);
}

Then I use that to make my final mesh.

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

Issue I run into is that with the mesh created in this way I have no control over internal distribution of the vertices. I need those extra internal vertices to create a finer mesh which wraps smoothly over the sphere.
I have a method to generate more points inside the mesh, however I am not sure how to add it to the mesh.

Sample:

image
image963×898 155 KB

You can see the edges of the polygon(blue) which falls into the sphere.
If I can add the red points to the structure of the mesh I should be able to avoid this issue.

Any ideas?

2

Back to 2014 :blush: