三个.js Collada 纹理未加载

Posted 2023-03-23

【中文标题】三个.js Collada 纹理未加载

【英文标题】：THREE.js Collada textures not loading

【发布时间】：2015-08-31 10:20:37

【问题描述】：

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

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，但无法正确格式化。

3) 在纹理加载错误发生之前，会有短暂的闪现。此 dae 已加载到所有纹理出现的 Sketchup 中。当然，我很困惑，因为跨域加载必须首先加载 2015_03_19_Try6a3D.dae。我很乐意将 collada.html、2015_03_19_Try6a3D.dae 和所有相关文件发送给任何人供他们使用。

【问题讨论】：

尝试在纹理加载部分之前添加：THREE.ImageUtils.crossOrigin = '';

@Peter 我尝试了以下结果，结果相同 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 动画= new THREE.Animation(child, child.geometry.animation); animation.play(); );

@Peter 我还在每个 loader.load 之前将您的建议添加到 ColladaLoader.js。没有任何改变。

@user2800277：你的意思是通知“stdob”，而不是我。

@stdob 我尝试了以下结果，结果相同 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(); ); 另外，在每个 loader.load 之前将您的建议添加到 ColladaLoader.js。没有任何改变。

【参考方案1】：

我遇到了同样的问题。 ColladaLoader.js 目前不支持开箱即用的 CORS。为了渲染您的纹理，它实现了 Loader 类或 ImageLoader 类（取决于具体情况）。如果您想在 Collada 引用的所有情况下避免跨源错误，则两者都需要将 CORS 源分配给“”或“匿名”。

转到 ColladaLoader.js 中的这一行：

texture = loader.load( url );

在其正上方添加这一行：

loader.crossOrigin = '';

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

loader = new THREE.ImageLoader();

并在其正下方添加这一行：

loader.setCrossOrigin( '' );

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

【讨论】：

这对我也有用：***.com/questions/32469104/…