three.js 贴图为图片时跨域问题

最新推荐文章于 2023-03-31 16:19:57 发布
最新推荐文章于 2023-03-31 16:19:57 发布
阅读量7.7k 收藏 3
点赞数 2
分类专栏： three.js 文章标签： three.js canvs 图片跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amos_luoye/article/details/62215835
版权
three.js 贴图时一直报"DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.",    在网上搜索了半天，基本的解决办法都是通过在服务器里面加 Access-Control-Allow-Origin为 *，然而无论如何都无效，经过不断的排查，发现是因为canvas在画图时会图片存在跨域，但是在three.js中并没有进行处理，于是修改three.js源码，在THREE.ImageLoader.prototype 类中return 之前加入 image.crossOrigin='*', 提交测试 ，发现在火狐浏览器中问题已经解决，但是在google中问题依旧还是存在，于是又开始查资料，发现在google中，设置 image.crossOrigin=''即可，提交测试，完美解决！
上吧，皮卡丘
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
ogl-basis-texture-loader:将Threejs BasisTextureLoader修改为OGL
04-16
ogl基础纹理加载器 将Threejs BasisTextureLoader修改为 用法 :warning: 将base-transcoder目录复制到您的公共目录。 // import import { Renderer } from "ogl" ; import { BasisTextureLoader } from "./basis-texture-loader" ; BasisTextureLoader . setTranscoderPath ( "you-public-directory/transcoder" ) ; // create const renderer = new Renderer ( ) ; const basisLoader = new BasisTextureLoader ( renderer . gl ) ; // load const texture = awai
three.js纹理添加跨域问题：No 'Access-Control-Allow-Origin' header is present on the requested resource.
weixin_44775117的博客
09-25 688
前言 在调试上一个示例时发现，添加本地图片作为纹理映射时，实际物体总是展示位黑色。在用VScode进行html调试时发现错误 然后寻找解决方法时，有人说创建一个本地服务器，用node.js搭建一个简单的服务器或者用Apache搭建一个本地服务器。刚开始用node.js搭建了本地服务器，也能读取本地的文件，然后将纹理应用的图片放在本地服务器上，但是打开html还是原来的问题。然后下载了Apache...
快速解决Canvas.toDataURL 图片跨域的问题
01-19
如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题： 【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://sub2.xx.com’ is therefore no
跨域文档.mdvue.config.js配置跨域vue.config.js配置跨域vue.config.js配置跨域
05-23
vue.config.js配置跨域
pdf.js，内含跨域解决办法
11-10
在浏览器查看一个pdf文件时常常不知道怎么显示，这个资源可以很好的帮到你，而且还附有跨域的解决办法。
ThreeJS 跨域
guzicheng1990的博客
05-22 1758
环境 ThreeJS 107版本 three.min.js 说明 给地球贴图片材质时，发现报错图片跨域了。 解决方案 方案一 网上找到方法修改threejs.module.js文件中的ImageLoader.prototype 参考原文地址：https://blog.csdn.net/qq_41923622/article/details/103756549 在return之前加上image.crossOrigin=’’ 方案二 方案一是用源码的情形下，我这是直接用的压缩包three.mi.
关于 Threejs 贴图跨域问题解决办法
Five—菜鸟级的博客
12-29 5787
three.js 贴图时一直报"DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.", 这是因为canvas在画图时会图片存在跨域，但是在three.js中并没有进行处理，所以是可以通过修改three.js源码...
threejs 13 纹理texture-canvasTexture
—巨人绿
10-27 1085
import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" import { DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three"; var renderer = new THREE.WebGLRenderer({ antialias: true }); // rende
threejs加载纹理图跨域
weixin_46352558的博客
08-03 1816
threejs加载纹理图报错Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded
wPaint实现在线编辑图片 并且解决跨域问题
04-08
wPaint 实现跨域访问iis服务上的、编辑和保存图片，采用html5 canvas jquery 实现 并且java实现保存图片到FTP 具体说明如链接https://blog.csdn.net/xiaozukun/article/details/89093469
three.js 加载跨域文件的解决方法
热门推荐
蜗牛速度额的博客
08-26 1万+
当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图。我们获取的是图片在服务器上的路径。 要解决这个问题只要设置Image的crossOrigin属性即可。于是从网上查这个属性的设置，有两种CORS模式，一是“anonymous”（匿名模式），另一种是“use-credentials”（用户授权证书模式） 这个一般是安全问题，解决方法就是我们翻到three.js的源码把对应的...
Threejs加载纹理的时候显示跨域，解决方法
lmzstree的博客
07-17 692
先看看自己的vscode里，下载了live-serve的插件没有，没有下载的话，就去下载然后打开方式是openinlive-serve打开。
threejs 引入图片资源报跨域异常
if_else1的博客
09-28 1428
问题：three.js 引入图片资源报跨域一样。 网上修改源码，方法在我尝试下，没用。 看了一下官方的示例，发现官方使用的oss上的图片。 我也换成了oss服务上的https图片资源路径。试了一下。还是报错 nb。 解决方法： 需要在oss上配置跨域*。 这个应该是核心的问题。 问题解决。 我正好有oss服务器，所以别的方法没有试过。 猜测nginx 配置 add_header 'Access-Control-Allow-Origin' '*'; add_hea...
three.js textureLoader加载图片失败
星海拾遗
05-11 5170
textureLoader无法加载图片 three.js的坑真的不是一般的多，关键是使用者还少，面向百度谷歌编程根本搜不到类似案例。 博主在使用three.js中的textureloader，加载本地图片失败，加载网络图片跨域错误。基本无解。 搜索之后发现一篇神文 解决方案 注：源码行数因版本不同会有不同，尽量搜索有关textureloader的关键字来查找，比如 THREE.TextureLoader.prototype 修改图示中标记的行 ...
threejs关于模型的格式介绍,模型转换,模型压缩,模型加载的相关总结
红叶
01-28 8692
1.Threejs WebGL相关模型加载性能对比及模型压缩优化详解干货链接 1.科普：三维文件格式 科普：三维文件格式 2.如何在页面极速渲染3D模型 如何在页面极速渲染3D模型 3.3D性能优化 | 说一说glTF文件压缩 3D性能优化 | 说一说glTF文件压缩 2.webgl的模型格式选择: 列举3个最常用的模型格式 1. fbx FBX最大的用途是用在诸如在 Max、Maya、Softimage 等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥 Max 和 Maya 等软件的优势
three.js(5)：纹理贴图和遇到的问题
spider_man
08-27 2327
完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>正方体贴图</title> <style> .body{ margin: 0; overflow: hidden; } </style> </head> <body> </body>
threejs 加载纹理图片时报304跨域
mao0523的博客
02-25 657
threejs 加载纹理图片时报304跨域
Three.js 图片加载中遇到的new THREE.TextureLoader().load(‘./images/floor.jpg‘)
m0_51981718的博客
03-31 1712
解决THREE.TextureLoader().load('./images/floor.jpg')图片不能正常显示问题
vue.config.js如何配置跨域问题
最新发布
03-30
在Vue项目中，可以通过配置vue.config.js文件来解决跨域问题。vue.config.js是一个可选的配置文件，用于对Vue项目进行自定义配置。 要配置跨域问题，可以在vue.config.js中添加以下代码： ```javascript module....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值