# How to add more internal vertices to a mesh?

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, pts);
pts.forEach(pt => {
shape.lineTo(pt, pt)
});
``````

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:

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?

Back to 2014 