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中得到修复。

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

1 个答案: