我试图渲染一个class LayoutParams场景，其中包含从不同域获得的背景图像。
我收到了tainted canvas error，因为该图片没有获得CORS批准，因此操纵画布会导致安全错误。
阅读this answer后，我将THREE.js设置为允许跨源加载：
THREE.TextureLoader()但是，我现在收到CORS错误：var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var texture = loader.load(
url_to_image,
// Function when resource is loaded
function ( texture ) {
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
map: texture
})
);
backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = false;
// create your background scene
backgroundScene = new THREE.Scene();
backgroundCamera = new THREE.Camera();
backgroundScene.add( backgroundCamera );
backgroundScene.add( backgroundMesh );
},
// Function called when download progresses
function ( xhr ) {},
// Function called when download errors
function ( xhr ) {}
);
来自this answer的评论似乎暗示某些域名不允许在WebGL中使用浏览器中的图像，我该如何判断是否属于这种情况？
如果我从图片中删除图片不是问题，我怎样才能让它工作？
答案 0 :(得分：0)
好吧，根据您收到的错误消息判断，您请求映像的域不支持跨源资源共享。
如果您控制该域上的资源，则需要在响应中添加适当的“Access-Control-Allow-Origin”标头。
如果你不控制域，那么你在浏览器中几乎无法做到（除了使用CORS代理），因为CORS的重点是你的JS应该无法访问结果请求如果托管资源的域未明确启用CORS。
答案 1 :(得分：0)
使用您的服务器将您的图像请求转发到资源域。
就像这样：
您的浏览器===＆gt;你的服务器===＆gt;图像
您目前正在做的是直接在浏览器中获取图像，这意味着您正在跨越两个域（一个是您的服务器，另一个是图像资源域）。但是，通过使用服务器转发您的请求，您的浏览器仅向您的服务器发送请求，这可以避免违反CORS。
大多数浏览器都禁止跨域使用安全和禁止。但是，您可以通过配置浏览器手动禁用CORS限制。例如，在Safari中，您可以在Disable Cross-Origin Restrictions菜单中选择Develop。