THREE.js Collada纹理不加载 [英] THREE.js Collada textures not loading

问题描述

1）启动本地网络服务器

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）启动加载的html文件2015_03_19_Try6a3D_dae / 2015_03_19_Try6a3D.dae

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/>

我试图发布加载dae的javascript，但是无法获得正确的格式。

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

3）在纹理加载错误发生之前有一些短暂的闪光。这个dae已经在Sketchup中加载，其中所有的纹理都出现了。当然，我很困惑，因为跨源加载必须工作加载2015_03_19_Try6a3D.dae在第一位。我会很高兴地发送任何collada.html，2015_03_19_Try6a3D.dae，以及所有相关文件供他们玩。

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.

推荐答案

同样的问题。 ColladaLoader.js目前不能解决CORS开箱即用的问题。为了渲染你的纹理，它实现Loader类或ImageLoader类（根据情况）。如果您想避免Collada引用的所有情况下出现跨源错误，都需要将CORS起点分配给或anonymous。

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.

转到ColladaLoader.js中的行：

Go to this line in ColladaLoader.js:

texture = loader.load( url );

在上面添加此行：

loader.crossOrigin = '';

然后在同一个脚本中转到此行：

Then go to this line in the same script:

loader = new THREE.ImageLoader();

并在下面添加此行：

loader.setCrossOrigin( '' );

我进行此更改后，我的跨源错误消失了。

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

这篇关于THREE.js Collada纹理不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！