THREE.js Collada textures not loading

Question

1) start local web server

C:\Users\Public\Documents\Rick>http-server . -p 8832 --cors
Starting up http-server, serving . on: http://0.0.0.0:8832<br/>
Hit CTRL-C to stop the server<br/><br/>
**partial log** from (node.js) http-server . -p 8832 --cors<br/><br/>
[Mon, 15 Jun 2015 18:14:57 GMT] "GET /2015_03_19_Try6a3D_dae/2015_03_19_Try6a3D/scrn_ground.png" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,  like Gecko) Chrome/43.0.2357.124 Safari/537.36"<br/><br/>

2) start html file that loads 2015_03_19_Try6a3D_dae/2015_03_19_Try6a3D.dae

from collada.html (javascript console)<br/><br/>
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://localhost:8832/2015_03_19_Try6a3D_dae/2015_03_19_Try6a3D/scrn_ground.png may not be loaded.<br/><br/>

I tried to post the javascript that loads the dae, here, but could not get it to format correctly.

3) There is a brief flash of something before the texture loading errors happen. This dae has been loaded in Sketchup where all the textures appear. Of course, I am confused because cross-origin loading had to be working to load 2015_03_19_Try6a3D.dae in the first place. I will gladly send anyone collada.html, 2015_03_19_Try6a3D.dae, and all related files for them to play with.

Try add this before texture loading part: THREE.ImageUtils.crossOrigin = ''; — stdob--
@Peter I tried the following which gave the same results THREE.ImageUtils.crossOrigin = ''; loader.load( 'localhost:8832/2015_03_19_Try6a3D_dae/2015_03_19_Try6a3D.dae', function ( collada ) { THREE.ImageUtils.crossOrigin = ''; dae = collada.scene; dae.traverse( function ( child ) { if ( child instanceof THREE.SkinnedMesh ) { var animation = new THREE.Animation( child, child.geometry.animation ); animation.play(); } } ); — user2800277
@Peter I also added your suggestion to ColladaLoader.js before every loader.load. Nothing changed. — user2800277
@stdob I tried the following which gave the same results THREE.ImageUtils.crossOrigin = ''; loader.load( 'localhost:8832/2015_03_19_Try6a3D_dae/…;, function ( collada ) { THREE.ImageUtils.crossOrigin = ''; dae = collada.scene; dae.traverse( function ( child ) { if ( child instanceof THREE.SkinnedMesh ) { var animation = new THREE.Animation( child, child.geometry.animation ); animation.play(); } } ); Also, added your suggestion to ColladaLoader.js before every loader.load. Nothing changed. — user2800277

AJ Campbell AJ Campbell · Accepted Answer · 2015-06-29T09:01:43

I had the same problem. ColladaLoader.js currently does not address CORS out-of-the-box. In order to render your textures, it implements either the Loader class or the ImageLoader class (depending upon the situation). Both need to have the CORS origin assigned to either '' or 'anonymous' if you want to avoid cross-origin errors in all cases for Collada references.

Go to this line in ColladaLoader.js:

texture = loader.load( url );

Add this line right above it:

loader.crossOrigin = '';

Then go to this line in the same script:

loader = new THREE.ImageLoader();

And add this line right below it:

loader.setCrossOrigin( '' );

And voila! My cross-origin errors went away after I made this change.

THREE.js Collada textures not loading

1 Answers