问题
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.
my code:
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:
Option 1
Use an img.
var image = document.createElement( 'img' );
image.src = dataurl;
var texture = new THREE.Texture( image );
texture.needsUpdate = true;
See here.
Option 2
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).
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.
Option 3
- Convert the image into Base64 text
- Store it in an external Javascript file
- Link it to your project page
- Load it into your texture
See here (SO answer) and here (details off-site).
Option 4
Create a shortcut for the browser such as:
c:// ... /chrome.exe --allow-file-access-from-files
Option 5
Use the .crossOrigin = '' property. It was not working, but I think it is now fixed. See here and here.
回答2:
I made this example: http://develoteca.com/EjerciosOnline/Exampleplane/, you can load a local image Greetings.
来源：https://stackoverflow.com/questions/22845141/how-to-display-a-locally-selected-image-in-three-js