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
"
Failed
to
execute
'texImage
2
D'
on
'WebGLRenderingContext
"报这个错误是渲染模式的问题，应该把渲染模式转变为canvas就可以了
"renderMode"
:
0,
// "renderMode" sets the renderer type,
on
ly useful
on
web
:
// 0 -
在使用
three
.
js
给实例贴图片时报错：
THREE
.
WebGLState
:
DOMExcepti
on
:
Failed
to
execute
'texImage
2
D'
on
'WebGLRenderingContext'
:
Tainted canvases may not be loaded
.
如果你也是这报错，并且在safari中展示正常，但是chrome中抱此错，
那么
.
.
.
现在smooth-dnd属于是年久失修的一个状态了，因为目前已经不支持vue3的这部分内容了，所以我们使用的时候，需要先在他基础上拓展一下
将拖拽的逻辑提取出来DndC
on
tainer
.
js
文件，做封装
DndC
on
tainer
.
js
Performing Calculati
on
s
on
a GPU
Use Metal
to
find GPUs and perform calculati
on
s
on
them
.
Overview
In this sample, you’ll learn essential tasks that are used in all Metal apps
.
You’ll see how
to
c
on
vert a simple functi
on
written in C
to
Metal Shading Langu
最近在研究
Three
.
js
的时候碰到的问题在此记录当我们使用thee
.
js
的时候肯定会碰到利用各种请求去向服务器请求贴图。
假设我们获取的是图片在服务器上的路径然后我们用
THREE
.
ImageUtils
.
loadTexture加载贴图到这里都是没有问题当我们在贴图加载完成的时候去render(Scene, Camera);获取当它自己刷新的时候就会报错然后我们加载的贴图显示不出来然后浏览器报这个错
three
.
js
:
2
7461 DOMExcepti
on
:
Failed
to
execute
'texImage
2
D'
on
'WebGLRenderingContext'
:
Tainted canvases may not be loaded
.
at
THREE
.
WebGLState
.
texImage
2
D (file
:
///H
:
/3d_demo/demo6/
js
/
three
.
js
:
2
74
.
.
.
Uncaught DOMExcepti
on
:
Failed
to
execute
‘texImage
2
D’
on
‘WebGLRenderingC
on
text’
:
The image element c
on
tains cross-origin data, and may not be loaded
.
解决方法1：
将图片转换为Base64编码，直接有效。可通过以下地址进行在线转换。
http
:
//www
.
jq
2
2
.
com/demo/base
To
Image
2
01807
2
50139/
可直接将您代码调用图片的地
2
.
假设我们获取的是图片在服务器上的路径然后我们用
加载贴图到这里都是没有问题当我们在贴图加载完成的时候去render(Scene, Camera);获取当它自己刷新的时候就会报错然后我们加载的贴图显示不出来然后浏览器报这个错误。
这个一般是安全问题，解决方法就是我们翻到t
.
.
.
在初步学习OpenGL 和 WebGL（基于 OpenGL ES） 之后，发现这两者都对初学者不够友好，繁多复杂的API，以及高深的建模原理矩阵运算，线代等大大提高了学习的门槛。
Three
Js
是对webGL提供的接口进行了良好的封装，简化了很多专业知识，学习成本明显降低。
以下，是用webGL绘制一个矩形的样例片段：（ps：我就画一个矩形，一下子就整这么多方法，这还算是启蒙教学？）下面看看，
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" c
on
tent="IE=edge">
<meta name="viewport" c
on
tent="width=device-width, initial-scale=1
.
0">
这个错误通常发生在尝试使用`texImage
2
D`方法加载受污染的画布时，导致无法加载。这通常是由于以下原因之一引起的：
1
.
跨域资源加载限制：如果你尝试加载来自其他域的图像数据，且服务器没有正确配置跨域资源共享（CORS）头部，浏览器会标记画布为污染，并阻止加载。确保服务器在响应中包含适当的CORS头部。
2
.
加载受限的图像数据：某些浏览器对于从`file
:
//`协议加载的本地文件有一些限制。如果你正在从本地文件系统加载图像数据并遇到此错误，请尝试在一个本地服务器上运行你的代码，而不是直接从文件系统打开。
3
.
画布已被标记为污染：如果之前的操作已经将画布标记为污染，后续尝试加载图像数据时会触发此错误。在尝试加载新图像之前，确保清除画布上的任何现有数据和标记。
解决此错误的方法包括：
1
.
确保跨域资源加载正确配置：如果你需要从其他域加载图像数据，请确保服务器响应包含适当的CORS头部。
2
.
检查文件加载方式：如果你正在从本地文件系统加载图像数据，请尝试通过本地服务器运行代码，而不是直接从文件系统打开。
3
.
清除画布数据：在尝试加载新图像之前，确保清除画布上的任何现有数据和标记。
如果以上方法仍然无法解决问题，可能存在其他原因导致错误。在这种情况下，检查浏览器开发者工具中的详细错误信息可能有助于进一步排查问题。
