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。这样的材料应该在顶点着色器中计算目标球体变形（在CPU上 - 然后它应该作为另一个属性传递）。使用浮动制服使两个状态在它们之间平滑地混合。

这是一个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）。处理不同的预测也是如此。

将球体变成平面

1 个答案: