将球体变成平面 [英] Morphing Sphere into Plane

问题描述

有没有办法在屏幕上将 SphereGeometry（）对象更改为平面？我想完全像这个网站那样做，所以当你点击右下方的按钮时，视图就是改变。下面的代码是球体的创建方式。简单很重要。

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

推荐答案

说到将类似地球的球体变形为类似地图的平面 - 几何变形（顶点位移）效果很好。从 THREE.SphereBufferGeometry 开始因为展开的多边形球体是不是一架飞机，所以工作正常。

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.

但 THREE.PlaneBufferGeometry 。要构建所需的对象，您可以使用自己的 ShaderMaterial 。这样的材料应该在顶点着色器中计算目标球体变形（在CPU上 - 然后它应该作为另一个属性传递）。使用浮动制服使两个状态在它们之间平滑地混合。

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.

这是此类包装的工作示例使用77版本的three.js（使用滑块包装）。

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

值得注意的是，此对象构造对相机位置敏感。
为了隐藏剪切并在任何角度都有一个很好的过渡，你可以修复相机并在着色器中应用旋转（旋转不是几何，而是uv坐标）。处理不同的预测也是如此。

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.

这篇关于将球体变成平面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！