Three.js Cross Origin Error Loading Related Collada File Texture

Question

I have a Collada file being loaded by three.js. The file has an associated texture named Texture_0.png. My Collada file is loaded via a Web service as it and the texture are stored in the same blob with REST Web Service access. CORS is enabled so the Collada file loads as expected, but since the Collada file is looking for a direct reference to the texture file, it calls it as well (since it is referenced in its XML). However, when it calls this related file, I get the following error and the texture doesn't load (in fact the Collada file goes away and I get a looping count of this error every split second):

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

Here is the sample XML:

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

I am thinking this as something to do with allowing/enabling access to the related image file via code in Three.js akin to how ImageUtils has an anonymous load. Since I am not calling for the texture with a separate call, but rather it gets called automatically because the Collada file (.dae) references it, how do I get the texture file without the cross origin error? Here is my three.js code:

// 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);
}

Update 1:

I tried the method in the following post THREE.js Collada textures not loading by adding this line to ColladaLoader.js:

loader.crossOrigin = '';

And this to my script:

loader.setCrossOrigin( '' );

But I get an error of:

loader.setCrossOrigin is not a function

erichlof erichlof · Accepted Answer · 2015-09-10T15:32:37

If you look at the StackOverflow link you provided, 'THREE.js Collada textures not loading' look at where the setCrossOrigin('') line goes - in the ColladaLoader.js file, not your three.js app source file.

When you called setCrossOrigin(''), it was trying to call it on the ColladaLoader (loader.setCrossOrigin) itself, which the browser is correct in saying 'this is not a function'.

Instead, put the setCrossOrigin call right below the ImageLoader() call inside the ColladaLoader.js source file. ImageLoader does indeed have a .setCrossOrigin method.

Hope this helps! :-)

p.s.

Come to think of it, the ColladaLoader.js file is using the variable name 'loader' without a var in front of it, which might have scope consequences:

function loadTextureImage ( texture, url ) {

    loader = new THREE.ImageLoader();

    loader.load( url, function ( image ) {

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

    } );

};

EDIT: The above loader without 'var' issue has been fixed in the dev branch of Three.js (the ColladaLoader.js file). I guess someone else noticed it too, so we can ignore. :-)

Three.js Cross Origin Error Loading Related Collada File Texture

1 Answers