I'm encountering an issue with loading a Collada file using three.js that has a texture called Texture_0.png associated with it. The Collada file and the texture are stored in the same blob and accessed via a REST Web Service. CORS is enabled, allowing the Collada file to load properly. However, when the Collada file tries to access the texture file directly (as it's referenced in its XML), I receive the following error message:
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at may not be loaded.
Below is a snippet of the sample XML:
<library_images>
<image id="Texture_0_png">
<init_from>./Texture_0.png</init_from>
</image>
I believe the issue lies in allowing access to the related image file through code in Three.js similar to how ImageUtils allows for anonymous loading. Since I'm not explicitly calling for the texture but rather it's being called automatically due to the Collada file referencing it, how can I retrieve the texture file without facing the cross-origin error? Here's my three.js code snippet:
// Code Snippet for Rendering a 3D Object
// Initialize variables and set up loader
// Load the Collada file and handle the scene
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('http://mywebservice.net/blob/mycollada.dae', function (collada) {
// Handle the loaded collada object
});
// Other functions and setup process...
Update 1:
In an attempt to resolve the issue, I referred to a post on Stack Overflow titled THREE.js Collada textures not loading. Following the suggestions mentioned in the post, I added a line to ColladaLoader.js and included additional code in my script. However, this resulted in an error message stating:
loader.setCrossOrigin is not a function