three.js:Failed to execute 'texImage2D' on 'WebGLRenderingContext解决方案

three.js加载图片时,出现Failed to execute 'texImage2D' on 'WebGLRenderingContext .Tainted canvases may not be loaded.的错误

跨域安全问题。

解决办法:

1 如果你用的是纹理题图:如:

var loader = new THREE.TextureLoader();

加上:

loader.setCrossOrigin( 'Anonymous');

即可。(THREE.ImageUtils.loadTexture也可用这个方法)

 

2 如果你是直接用img的,如:

var img = new image(); 加上 img.crossOrigin =“anonymous” 即可

 

3 如果你被THREE.WebGLRenderer: image is not power of two  这样的warning所困扰,在你的建立mesh后加上:mesh.material.map.minFilter = THREE.LinearFilter; 即可。如

 var mesh = new THREE.Mesh( geometry, material );

mesh.material.map.minFilter = THREE.LinearFilter;

 

转载于:https://www.cnblogs.com/beatIteWeNerverGiveUp/p/7922786.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个错误通常发生在尝试使用`texImage2D`方法加载受污染的画布时,导致无法加载。这通常是由于以下原因之一引起的: 1. 跨域资源加载限制:如果你尝试加载来自其他域的图像数据,且服务器没有正确配置跨域资源共享(CORS)头部,浏览器会标记画布为污染,并阻止加载。确保服务器在响应中包含适当的CORS头部。 2. 加载受限的图像数据:某些浏览器对于从`file://`协议加载的本地文件有一些限制。如果你正在从本地文件系统加载图像数据并遇到此错误,请尝试在一个本地服务器上运行你的代码,而不是直接从文件系统打开。 3. 画布已被标记为污染:如果之前的操作已经将画布标记为污染,后续尝试加载图像数据时会触发此错误。在尝试加载新图像之前,确保清除画布上的任何现有数据和标记。 解决此错误的方法包括: 1. 确保跨域资源加载正确配置:如果你需要从其他域加载图像数据,请确保服务器响应包含适当的CORS头部。 2. 检查文件加载方式:如果你正在从本地文件系统加载图像数据,请尝试通过本地服务器运行代码,而不是直接从文件系统打开。 3. 清除画布数据:在尝试加载新图像之前,确保清除画布上的任何现有数据和标记。 如果以上方法仍然无法解决问题,可能存在其他原因导致错误。在这种情况下,检查浏览器开发者工具中的详细错误信息可能有助于进一步排查问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值