获取错误：纹理不是立方体贴图完整，以及 IE 11 中的 INVALID_VALUE: texImage2D

Question

我见过各种使用从本地文件系统提供的图像制作的立方体贴图示例，但我无法找到任何从外部网站动态加载图像并填充立方体贴图的示例。我想出了一种方法来做到这一点，它在 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 中得到修复。