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

使用img。

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

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

请参阅here。

选项2

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

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

选项3

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

请参阅here（SO回答）和here（非现场详情）。

选项4

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

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

选项5

使用.crossOrigin = ''属性。它没有用，但我认为现在已经修复了。请参阅here和here。

Answer 2

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

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

2 个答案: