javascript - Three.js跨源错误加载相关Collada文件纹理

Question

我有一个由 three.js 加载的 Collada 文件。该文件有一个名为 Texture_0.png 的关联纹理。我的 Collada 文件是通过 Web 服务加载的，因为它和纹理存储在具有 REST Web 服务访问权限的同一个 blob 中。 CORS 已启用，因此 Collada 文件按预期加载，但由于 Collada 文件正在寻找对纹理文件的直接引用，它也会调用它(因为它在其 XML 中被引用)。但是，当它调用此相关文件时，我收到以下错误并且纹理未加载(实际上 Collada 文件消失了，我每隔一秒就会收到此错误的循环计数):

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://mywebservice.net/blob/Texture_0.png may not be loaded.

这是示例 XML:

<library_images>
<image id="Texture_0_png">
<init_from>./Texture_0.png</init_from>
</image>

我认为这与通过 Three.js 中的代码允许/启用对相关图像文件的访问有关，类似于 ImageUtils 如何进行匿名加载。由于我不是通过单独的调用来调用纹理，而是因为 Collada 文件 (.dae) 引用它而自动调用它，我如何获得没有交叉原点错误的纹理文件？这是我的 three.js 代码:

// 3D Object
var scene;
var camera;
var renderer;
var box;
var controls;

// Instantiate a Collada loader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(http://mywebservice.net/blob/mycollada.dae', function (collada) {

    box = collada.scene;

    box.traverse(function (child) {

        if (child instanceof THREE.SkinnedMesh) {

            var animation = new THREE.Animation(child, child.geometry.animation);
            animation.play();

        }
    });

    box.scale.x = box.scale.y = box.scale.z = .2;
    box.updateMatrix();

    init();
    animate();
});


function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(0xdddddd);
    //renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setSize(500, 500);

    // Load the box file
    scene.add(box);

    // Lighting
    var light = new THREE.AmbientLight();
    scene.add(light);

    // Camera
    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;

    camera.lookAt(scene.position);

    // Rotation Controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.rotateSpeed = 5.0;
    controls.zoomSpeed = 5;

    controls.noZoom = false;
    controls.noPan = false;

    $("#webGL-container").append(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

更新 1:

我尝试了以下帖子中的方法 THREE.js Collada textures not loading通过将此行添加到 ColladaLoader.js:

loader.crossOrigin = '';

这是我的脚本:

loader.setCrossOrigin( '' );

但是我得到一个错误:

loader.setCrossOrigin is not a function

Answer 1

如果您查看您提供的 StackOverflow 链接，“THREE.js Collada 纹理未加载”请查看 setCrossOrigin('') 行的位置 - 在 ColladaLoader.js 文件中，而不是您的 three.js 应用程序源文件中。

当您调用 setCrossOrigin('') 时，它试图在 ColladaLoader (loader.setCrossOrigin) 本身上调用它，浏览器说“这不是函数”是正确的。

相反，将 setCrossOrigin 调用放在 ColladaLoader.js 源文件中 ImageLoader() 调用的正下方。 ImageLoader 确实有一个 .setCrossOrigin 方法。

希望对您有所帮助! :-)

附:

想想看，ColladaLoader.js 文件使用的是变量名“loader”，前面没有 var，这可能会产生范围后果:

function loadTextureImage ( texture, url ) {

    loader = new THREE.ImageLoader();

    loader.load( url, function ( image ) {

        texture.image = image;
        texture.needsUpdate = true;

    } );

};

编辑:上面没有 'var' 问题的加载器已经在 Three.js 的开发分支(ColladaLoader.js 文件)中得到修复。我想其他人也注意到了，所以我们可以忽略。 :-)