Морфовая сфера в плоскость

Question

Есть ли способ изменить объект SphereGeometry() на плоскость на экране? Я хочу сделать это точно как this site, поэтому, когда вы нажимаете на нижние правые кнопки, вид изменяется. Ниже приведен код, как создается сфера. Простота важна.

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); 
}) 

Answer 1

Говоря о морфинге земной сферы в картографическую плоскость - морфинг геометрии (смещение вершин) хорошо работает. Начиная с THREE.SphereBufferGeometry не будет работать, так как развернутая полигональная сфера равна not quite a plane.

Но таких проблем нет с THREE.PlaneBufferGeometry. Чтобы построить желаемый объект, вы можете использовать свой собственный ShaderMaterial. Такой материал должен вычислять целевой шар-подобный морфинг в вершинном шейдере (либо на процессоре, либо в качестве другого атрибута). Наличие двух состояний плавно смешивается между ними с использованием однородной поплавка.

Вот working example of such wrapping с 77 версией three.js (используйте ползунок для обертывания).

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); 
} 

Следует отметить, что эта конструкция объекта чувствительна к положению камеры. Для того, чтобы скрыть разрез и иметь хороший переход под любым углом, вы можете исправить камеру и применить поворот в шейдере (rotating not geometry, but uv coordinates). Также идет обработка различных прогнозов.