Morphing-Kugel in die Ebene

Question

Gibt es eine Möglichkeit, das SphereGeometry() Objekt in eine flache Ebene auf dem Bildschirm zu ändern? Ich möchte es genau wie this site tun, wenn Sie also auf die Schaltflächen unten rechts klicken, wird die Ansicht geändert. Der Code unten ist wie die Kugel erstellt wurde. Einfachheit ist wichtig.

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

Sprechen von Morphing erdähnlichen Kugel in kartenartige plane - Morphing-Geometrie (Vertex Verschiebung) funktioniert gut. Das Starten mit THREE.SphereBufferGeometry würde nicht gut funktionieren, da die ausgepackte polygonale Kugel not quite a plane ist.

Aber es gibt keine solchen Probleme mit THREE.PlaneBufferGeometry. Um das gewünschte Objekt zu erstellen, können Sie Ihr eigenes ShaderMaterial verwenden. Solches Material sollte eine Ziel-Kugel-ähnliche Morph-in-Vertex-Shader (entweder auf der CPU - dann sollte es als ein anderes Attribut übergeben werden) berechnen. Die zwei Zustände mischen sich unter Verwendung der Float-Uniform glatt zwischen ihnen.

Hier ist ein working example of such wrapping mit 77 Revision von three.js (Schieberegler zu wickeln).

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

Es ist bemerkenswert, dass diese Objektkonstruktion für die Kameraposition empfindlich ist. Um einen Schnitt zu verstecken und einen schönen Übergang in jedem Winkel zu haben, könntest du die Kamera fixieren und Rotation im Shader anwenden (rotating not geometry, but uv coordinates). Der Umgang mit verschiedenen Projektionen verläuft auch dort.