Currently, I am working on a project involving a sphere in THREE.js that I like to refer to as the master sphere. In this project, I have enabled the user to pinpoint multiple spots on the sphere which serve as markers for the corners of a polygon. These points are visualized as spheres in 3D space and lie on the surface of the master sphere. Once the user has placed three or more points, they can connect them to form a polygon.
My next goal is to generate a polygon slightly above the surface of the master sphere. This polygon should mimic the shape of the one constructed by the user but elevated just above the sphere's surface.
To achieve this, initially I attempted creating a polygon directly on the sphere's surface and then displacing each vertex along its normal using a vertex shader. For this purpose, I utilized THREE.Shape and THREE.ShapeGeometry to create a 2D shape on the z-axis. Subsequently, I translated the shape to the surface and experimented with various combinations of THREE.SubdivisionModifier and THREE.TessellateModifier to generate vertices for the shader. It was observed that without applying a modifier, the transformed shape wasn't even visible post-translation.
Presently, I am employing the following combination of modifiers, however, the outcome exhibits severe distortion:
// Initialize modifiers and specify number of divisions.
var subdivisionModifier = new THREE.SubdivisionModifier(3);
var tessellateModifier = new THREE.TessellateModifier(8);
// Modify geometry using both modifiers.
for(var x=0; x<6; x++) {
tessellateModifier.modify(polyGeometry);
}
subdivisionModifier.modify(polyGeometry);
The result shows the yellow outline representing the intended shape, while the blue outline signifies the actual generated shape. The green wireframe depicts the master sphere.
I have created a JSFiddle demonstration of my project available here: Globe with an elevated polygon
From the current state of affairs, it is evident that the final polygon does not match the desired shape. Consequently, I find myself questioning whether I am heading towards a dead-end path and if my objective is even feasible.