将球体变形为平面

Morphing Sphere into Plane

本文关键字：平面 变形      更新时间：2023-09-26

有办法将SphereGeometry()对象更改为屏幕上的平面吗？我想完全像这个网站一样做，所以当你点击右下角的按钮时，视图就会改变。下面的代码是如何创建球体的。简洁很重要。

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

说到将类地球球体变形为类地图平面-几何体变形（顶点位移）效果很好。从三开始。SphereBufferGeometry不会很好地工作，因为展开的多边形球体不完全是一个平面。

但THREE不存在这样的问题。PlaneBufferGeometry。要构建所需的对象，可以使用自己的ShaderMaterial。这样的材质应该在顶点着色器中计算类似目标球体的变形（要么在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 ); 
}

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

相关文章：