如何在 Three.js 中显示本地选择的图像？

Question

我总是遇到跨源错误。我怎样才能避免这个问题，或者更好的是，解决它？我需要用户能够拍摄本地图像并让它显示在 PlaneGeometry 中。

我的代码：

this.reader.readAsDataURL(file);
this.reader.onloadend = function( ev ) {
var file = ev.target.result,
//geometry = new THREE.CubeGeometry(1, 1, 0.1),
geometry = new THREE.PlaneGeometry(1, 1, 1, 2),
texture = THREE.ImageUtils.loadTexture(file),
material = new THREE.MeshBasicMaterial({ map: texture }),
mesh = new THREE.Mesh(geometry, material);
mesh.name = "Marker" + mesh.id;
mesh.rotation.x = 90 * ( Math.PI / 180 );
Editor.addObject(mesh);
console.log(Editor.scene.children);
SignalHub.signals.updateScene.dispatch();
SignalHub.signals.markerAdded.dispatch();

几何图形显示出来，但它是空白的！

Answer 1

选项1

使用图片。

var image = document.createElement( 'img' );
image.src = dataurl;

var texture = new THREE.Texture( image );
texture.needsUpdate = true;

看这里。

选项2

html服务器来自哪里？如果它是本地 htm 文件，那么您可以从本地计算机上的 Web 服务器（例如 IIS / apache）提供它。

无论服务器是本地还是远程，您都可以在选择图像后将图像上传到 Web 服务器，并使用 URL 从 Web 服务器检索图像。这将满足跨源策略。

选项3

1. 将图像转换为Base64文本
2. 将其存储在外部 Javascript 文件中
3. 将其链接到您的项目页面
4. 将其加载到您的纹理中

请参阅此处（SO答案）和此处（场外详细信息）。

选项4

为浏览器创建快捷方式，例如：

c:// ... /chrome.exe --allow-file-access-from-files

选项5

使用该.crossOrigin = ''财产。它不起作用，但我认为它现在已经修复了。请参阅此处和此处。