CODEWITHSUNDEEP
javascriptthree.js
Amin
Amin

Reputation: 94

Morphing Sphere into Plane

Is there a way to change the SphereGeometry() object to flat plane on screen? I want to do it exactly as this site, so when you click on bottom right buttons, the view is changed. The code below is how the sphere created. Simplicity is important.

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

Upvotes: 1

Views: 1275

Answers (1)

Ramil Kudashev
Ramil Kudashev

Reputation: 1175

Speaking of morphing earth-like sphere into map-like plane - geometry morphing (vertex displacement) works well. Starting with THREE.SphereBufferGeometry wouldn't work good since unwrapped polygonal sphere is not quite a plane.

But there are no such problems with THREE.PlaneBufferGeometry. To construct desired object you could use your own ShaderMaterial. Such material should compute target sphere-alike morph in vertex shader (either on CPU - then it should be passed as another attribute). Having two states smoothly mix between them using float uniform.

Here is a working example of such wrapping with 77 revision of three.js (use slider to wrap). 

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

It is worth noticing that this object construction is sensitive to camera position. In order to hide a cut and have a nice transition at any angle you could fix camera and apply rotation in shader (rotating not geometry, but uv coordinates). Handling different projections goes there as well.

Upvotes: 4

Related Questions