如何在three.js中显示本地选择的图像? [英] How to display a locally selected image in three.js?

问题描述

我总是会遇到跨域错误.我该如何解决这个问题，或者更好地解决它? 我需要用户能够显示本地图像并将其显示在PlaneGeometry中.

I always get a cross-origin-error. how can I circumvent this, or better yet, fix it? I need the user to be able to pic a local image and let it be displayed in a 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();

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

The geometry shows up but it's blank!

推荐答案

选项1

使用img.

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

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

请参见此处.

选项2

HTML服务器来自哪里?如果它是本地htm文件，则可以改为从本地计算机上的Web服务器(例如IIS/apache)提供该文件.

Where is the html server from? If it is a local htm file, then you could instead serve it from a web server on the local machine (e.g. IIS / apache).

服务器是本地服务器还是远程服务器，您都可以在选择图像后将其上载到Web服务器，并使用URL从Web服务器中检索该图像.这将满足跨域策略.

Whether the server is local or remote, you can upload the image to your web server when they have selected it and use a URL to retrieve it from the web server. This will satisfy the cross-origin policies.

选项3

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

在此处(请参见答案)和

See here (SO answer) and here (details off-site).

选项4

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

Create a shortcut for the browser such as:

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

选项5

使用.crossOrigin = ''属性.它没有工作，但我认为现在已修复.请参见此处和

Use the .crossOrigin = '' property. It was not working, but I think it is now fixed. See here and here.

这篇关于如何在three.js中显示本地选择的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！