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

【问题标题】：How to display a locally selected image in three.js?如何在three.js中显示本地选择的图像？
【发布时间】：2014-05-15 17:23:47
【问题描述】：

我总是遇到跨域错误。我该如何规避这个，或者更好的是，修复它？我需要用户能够拍摄本地图像并让它显示在 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();

几何图形出现了，但它是空白的！

【问题讨论】：

标签： image three.js webgl

【解决方案1】：

选项 1

使用图片。

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

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

见here。

选项 2

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

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

选项 3

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

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

选项 4

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

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

选项 5

使用.crossOrigin = '' 属性。它不起作用，但我认为它现在已修复。请参阅here 和here。

【讨论】：

@DatProgram - 很高兴为您提供帮助。

【解决方案2】：

我做了这个例子：http://develoteca.com/EjerciosOnline/Exampleplane/，可以加载本地图片问候。

【讨论】：

太好了，我回家看看