Ошибки Gettings: Текстура не завершена, и INVALID_VALUE: texImage2D в IE 11

Question

Я видел различные примеры кубов, сделанных с изображениями, поданными из локальной файловой системы, но я не смог найти примеров, где изображения динамически загружаются с внешнего веб-сайта и заполняют файл cubemap. Я разработал способ сделать это, и он отлично работает в браузерах Chrome, Safari, Firefox, Edge и IOS. Но, не удивительно, что он не работает в IE 11. При попытке открыть карту куб, консоль выплевывает следующие ошибки:

WEBGL11003: INVALID_VALUE: texImage2D

WEBGL11122: drawArrays: Текстура не завершена. Все грани кубических граней должны быть одинаковыми.

Текстуры одного размера и имеют определенную ширину и высоту.

var controls, scene, camera, renderer; 
var cameraCube, sceneCube; 
var textureEquirec, textureCube, loader, cubeMaterial, cubeShader; 
var cubeMesh; 
var geometry, material, mesh; 
var pause; 

function init(seat) { 

    // SCENE 
    scene = new THREE.Scene(); 
    sceneCube = new THREE.Scene(); 

    // CAMERAS 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.set(0,0,-1000); 
    cameraCube = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 100000); 

    // LIGHTS 
    var ambient = new THREE.AmbientLight(0xffffff); 
    scene.add(ambient); 

    // TEXTURES 
    cubeShader = THREE.ShaderLib[ "cube" ]; 
    cubeMaterial = new THREE.ShaderMaterial({ 
     fragmentShader: cubeShader.fragmentShader, 
     vertexShader: cubeShader.vertexShader, 
     uniforms: cubeShader.uniforms, 
     depthWrite: false, 
     side: THREE.BackSide 
    }); 

    updateTexture(seat); 
    textureCube.format = THREE.RGBFormat; 
    textureCube.mapping = THREE.CubeReflectionMapping; 
    textureCube.minFilter = THREE.LinearFilter; 

    cubeMesh = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), cubeMaterial); 
    sceneCube.add(cubeMesh); 

    geometry = new THREE.SphereGeometry(400.0, 24, 24); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.autoClear = false; 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.setFaceCulling(THREE.CullFaceNone); 

    var modal = document.getElementById('modal'); 
    modal.appendChild(renderer.domElement); 

    window.addEventListener('resize', onWindowResize, false); 
} 

function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    cameraCube.aspect = window.innerWidth/window.innerHeight; 
    cameraCube.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

function animate() { 
    if (pause) return; 
    requestAnimationFrame(animate); 
    render(); 
    controls.update(); 
} 

function render() { 
    var timer = -0.0002 * Date.now(); 
    camera.lookAt(scene.position); 
    cameraCube.rotation.copy(camera.rotation); 
    renderer.render(sceneCube, cameraCube); 
    renderer.render(scene, camera); 
} 

function loadTexture(texture){ 
    scope.loadingView = true; 
    if (textureCube) { 
     textureCube.dispose(); 
    } 
    loader = new THREE.CubeTextureLoader(); 
    loader.setCrossOrigin('anonymous'); 
    textureCube = loader.load(texture, onLoadCallback, null, onErrorCallback); 
    cubeMaterial.uniforms.tCube.value = textureCube; 
} 

function updateTexture(seat){ 
    var path = CDNDomain + '/cloud/assets/'; 
    var files = [ 
     path + 'pathtoimage.jpg', 
     path + 'pathtoimage.jpg', 
     path + 'pathtoimage.jpg', 
     path + 'pathtoimage.jpg', 
     path + 'pathtoimage.jpg', 
     path + 'pathtoimage.jpg', 
    ]; 
    loadTexture(files); 
} 

function initializeControls(){ 
    controls = new THREE.OrbitControls(camera); 
    controls.minDistance = 500; 
    controls.maxDistance = 2500; 
} 

function onLoadCallback(loaded) { 
    scope.$apply(function(){ 
     scope.loadingView = false; 
    }); 
    initializeControls(); 
    animate(); 
} 

function onErrorCallback(error){ 
    scope.loadingMsg = 'There was an error processing your request.'; 
} 

Я вызываю функцию init при нажатии кнопки и передавая данные.

Answer 1

Понял, что текстуры не имеют значения 2. После изменения размера изображений проблема исправлена ​​в IE11.