title: Three.js Cross Origin Error Loading Related Collada File Texture
body: <p>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):</p>
  
  <blockquote>
    <p>Uncaught SecurityError: Failed to execute 'texImage2D' on
    'WebGLRenderingContext': The cross-origin image at
    <a href="http://mywebservice.net/blob/Texture_0.png" rel="nofollow noreferrer">http://mywebservice.net/blob/Texture_0.png</a> may not be loaded.</p>
  </blockquote>
  
  <p>Here is the sample XML:</p>
  
  <pre><code>&lt;library_images&gt;
  &lt;image id="Texture_0_png"&gt;
  &lt;init_from&gt;./Texture_0.png&lt;/init_from&gt;
  &lt;/image&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><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);
  }
  </code></pre>
  
  <p><strong>Update 1:</strong></p>
  
  <p>I tried the method in the following post <a href="https://stackoverflow.com/questions/30853339/three-js-collada-textures-not-loading">THREE.js Collada textures not loading</a> by adding this line to ColladaLoader.js:</p>
  
  <pre><code>loader.crossOrigin = '';
  </code></pre>
  
  <p>And this to my script:</p>
  
  <pre><code>loader.setCrossOrigin( '' );
  </code></pre>
  
  <p>But I get an error of:</p>
  
  <blockquote>
    <p>loader.setCrossOrigin is not a function</p>
  </blockquote>