I am currently working on a project in three.js where I am trying to project an image onto the inside of a halfsphere. The half sphere is created using the following code:
const geometry = new THREE.SphereGeometry(Component.radius, this.resolution, this.resolution,
Math.PI, Math.PI, 0, Math.PI);
this.material = new THREE.MeshStandardMaterial({color: 0xffffff});
this.material.side = THREE.DoubleSide;
this.sphere = new THREE.Mesh(geometry, this.material);
// The image of the texture is set later dynamically via
// this.material.map = textureLoader.load(...);
Despite the radius and resolution being constants, there is one issue with the way the image appears on the sphere. The image becomes distorted around the "top" and "bottom" of the sphere, as shown in this example:
https://i.sstatic.net/jav6v.png
The original texture had the values "0,0" in the bottom left and "0,1" in the bottom right. When the camera faces down from the center of the hemisphere, the bottom left and bottom right corners are squished onto the "bottom" point of the sphere.
My objective is to modify this behavior so that the texture corners align with where they would be if you were to place a square texture into a sphere, with the corners touching the circle and then stretching the lines between them to match the circle. Here is a simple visual representation of what I mean:
https://i.sstatic.net/y6GS6.png
I have experimented with the mapping attribute of my texture, but so far, it has not changed the behavior as I had hoped.