在使用threejs的IOS safari中使用MeshBasicMaterial将纹理映射错误

Question

我正在使用MeshBasicMaterial将纹理映射到表示世界但在IOS Safari上呈现错误的球体（但可以在Mac或Windows上使用chrome和safari，或在Android上使用Chrome）。

我使用的代码如下：

var sphereGeo = new THREE.SphereGeometry(100, 32, 32);

    var earthTexture = THREE.ImageUtils.loadTexture( '/lib/map/world/model/earth-compresed.jpg' );
    var bumpTexture = THREE.ImageUtils.loadTexture( '/lib/map/world/model/high-bump-compresed.jpg' );
    var earthMaterial = new THREE.MeshBasicMaterial( { 
        map: earthTexture,
        bumpMap:     bumpTexture,
        bumpScale:   1
    } );
    var earth = new THREE.Mesh(sphereGeo, earthMaterial);
    scene.add(earth);

这是它在IOS上的显示方式

这就是它必须如何展示以及它如何在其他地方运作

由于

Answer 1

您需要将纹理转换为2的幂（即4096x2048）。另外，我会使用https://www.khronos.org/registry/webgl/sdk/tests/conformance/limits/gl-max-texture-dimensions.html来验证设备是否支持如此大的纹理。