Javascript 将球体变形为平面

有没有办法将

SpheregeMetry（）

对象更改为屏幕上的平面？我想完全按照这样做，所以当你点击右下角的按钮时，视图就改变了。下面的代码是如何创建球体的。简单很重要

var loader = new THREE.TextureLoader();
    loader.load("js/model/map.jpg", function(texture) {
    var earthMaterial = new THREE.MeshBasicMaterial({
        map: texture,
        bumpscale: 0.05
    });
    var earthSphereGeometry = new THREE.SphereGeometry(80, 32, 32);

    earthSphere = new THREE.Mesh(earthSphereGeometry, earthMaterial);
    scene.add(earthSphere);
})

---

说到将类似地球的球体变形为类似地图的平面几何体变形（顶点置换），效果很好。从开始不起作用，因为未包装的多边形球体是

但这方面的问题并不存在。要构造所需的对象，您可以使用自己的对象。这样的材质应该在顶点着色器中计算类似于目标球体的变形（或者在CPU上-然后它应该作为另一个属性传递）。使两种状态通过均匀浮动在它们之间平滑混合

下面是three.js的77修订版（使用滑块包装）

值得注意的是，该对象结构对摄影机位置非常敏感。

---

为了隐藏剪切并在任何角度进行良好的过渡，可以修复摄影机并在着色器（）中应用旋转。处理不同的投影也会用到那里。

嗨，你知道怎么做了吗？

vec3 anglesToSphereCoord(vec2 a, float r)
{
    return vec3(
        r * sin(a.y) * sin(a.x),
        r * cos(a.y),
        r * sin(a.y) * cos(a.x)  
    );
}

void main() {
    vec2 angles = M_PI * vec2(2. * uv.x, uv.y - 1.);
    vec3 sphPos = anglesToSphereCoord(angles, 0.6);
    vec3 wrapPos = mix(position, sphPos, wrapAmountUniform);

    gl_Position = projectionMatrix * modelViewMatrix * vec4( wrapPos, 1.0 ); 
}