Using local images for texture?

Questions
,
1

I am trying to use local pictures in my computer to use them as texture but it doesn’t work.
I have tried different ways but I can not make it work,
Some one knows a way to do that?

Thanks in advance…

2

You need to use the TextureLoader to load the texture. Follow these lines:

Whether this will work immediately depends on your setup - I’d advise you to read over the How to Run Things Locally page to get an understanding of how loading local files works.

1 Like
3

This is the codes that I’using, the ‘pan.jpg’ picture is in the same folder but it doesn’t load it ( I tried to use it in an image element src and works fine), I have tried using pictures from the web and works, but not in this case, have I been doing something wrong?

var geometry = new THREE.SphereBufferGeometry( 1000, 80, 80 );
		
	       textureloader = new THREE.TextureLoader();
	       textureloader.load('pan.jpg',function(tx){
	        material = new THREE.MeshBasicMaterial({
    	        map: tx,
   	        wireframe: false
      	  });           
			var sphere = new THREE.Mesh( geometry, material  );
		         sphere.scale.x = -1;
			scene.add( sphere );
		 });
4

You’ll need to set up a server to load files from the local file system. Have you read the ‘How to Run Things Locally’ page?

5

The problem with the local textures I had in the beginning also.

Then I tried and found out that only Firefox works. The fox obviously recognizes when the page is loaded from the same location and allows loading the graphic. Other browsers give an error message!

I use Windows ( 64, Firefox 57)
Try a simple example of me. They all run locally at my place.

http://threejs.hofk.de/BufferGeometry/02_buffer.html
http://threejs.hofk.de/

UPDATE: This no longer applies to Firefox since 2019.
Because there was now a heart for it, attention was drawn.

Other possibility see
https://hofk.de/main/discourse.threejs/
( post Collection of examples from discourse.threejs.org )

read
https://hofk.de/main/discourse.threejs/Local%20use%20of%20the%20examples.pdf

1 Like
6

It’s a chrome thing. Check your console, does it say anything about CORS(cross origin request security), then you need to add an extension on chrome that supports that, i use

There are more if it doesn’t work for you.

1 Like
7

I think the problem will be there in most browsers - FF may be the exception here.

I would advise you to take the opportunity to learn how to set up a simple HTTP server and serve your files that way, it’s something that you will likely need to know at some point anyway.

2 Likes
8

BTW: The three.js repo provides an easy to use HTTP server for development purposes. After installing all dependencies with npm install, you can launch the server via npm run dev. The used npm packages are also useful for custom projects. Just check out the package.json for more information.

2 Likes
9

Thanks guys for your advises and time, still a long way to go for me, I will work on that.

I tried to go around with this using img element anf drawing the image to a canvas and then use it like texture but once I use THREE.Texture or THREE.CanvasTexture doesn’t apply texture, this is my code…
Is something wrong with the codes?

ca=document.createElement("canvas");
  im=document.createElement("img");
    im.setAttribute("src","pan.jpg");
    document.body.appendChild(im);
ctx=ca.getContext("2d");

setTimeout(function(){
ca.setAttribute("width",im.naturalWidth);
ca.setAttribute("height",im.naturalHeight);
ctx.drawImage(im,0,0);
document.body.appendChild(ca);

//loads image right
			init();
			animate();

},100);
//   in init() function
var geometry = new THREE.BoxBufferGeometry( 200, 200, 20 );
 mat=new THREE.MeshBasicMaterial();
//mat.map = new THREE.Texture(ca);

mat.map = new THREE.CanvasTexture(ca);
var object = new THREE.Mesh( geometry, mat );
scene.add( object );
//  it shows a dark box...
10 
var img = new Image()
    var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    url = "http://imageurl"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );

mat.map = new THREE.CanvasTexture(canvas);
var object = new THREE.Mesh( geometry, mat );
scene.add( object );
}
img.src = url;
11

@jauregui, @Waverider quick tip on formatting - when you are sharing large blocks of code here, you can wrap them in three backticks:

    ``` 
    // your long 
    // piece of
    // code
    ```

Anything you paste between the backticks will have its original formatting preserved.
I’ve updated your posts above to use these.

Welcome to the site, glad to have you one board :slightly_smiling_face: