CODEWITHSUNDEEP
imagethree.jswebgl
MJVDM
MJVDM

Reputation: 3963

How to display a locally selected image in three.js?

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!

Upvotes: 2

Views: 4075

Answers (3)

Vatsal Mandaliya
Vatsal Mandaliya

Reputation: 1

To add a image in background use these 3 lines of code

const textureImage = '../images/star.jpg';
const textureloader = new THREE.TextureLoader();
scene.background = textureloader.load(textureImage)

To add 6 - different images in background use these 5 lines of code

const star = '../images/star.jpeg'
const nebula = '../images/nebula.jpeg'

const cubeTextLoader = new THREE.CubeTextureLoader()
scene.background = 
cubeTextLoader.load([nebula,star,nebula,nebula,nebula,nebula,])

Upvotes: 0

acarlon
acarlon

Reputation: 17274

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

  1. Convert the image into Base64 text
  2. Store it in an external Javascript file
  3. Link it to your project page
  4. 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.

Upvotes: 6

Develoteca
Develoteca

Reputation: 315

I made this example: http://develoteca.com/EjerciosOnline/Exampleplane/, you can load a local image Greetings.

Upvotes: 1

Related Questions