Whats the latest way to load an image?

Questions
,
1

I’m having a problem loading an image into the scene, I keep getting console log “error”.

I had a very tough time with GLTF loader too but eventually found that code on a random website,

whats the latest format for ImageLoader (it’s a jpg file if that’s necessary)

the code that worked for my GLTF loader was:

var loader = new THREE.GLTFLoader();

loader.load( 'bedroom/scene.gltf', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

   console.error( error );

 } );

So perhaps I need to adjust that slightly to make it an image loader?

All I want to do is load an image so I can use it as a texture for a plane or canvas

2

okay so you need to use TextureLoader, not ImageLoader:

const texture = new THREE.TextureLoader().load( 'Put_In_File_Location' );


// and this is example code to get it to be on a plane
const geometry11 = new THREE.PlaneGeometry( 5, 5, 16, 16 );
const material11 = new THREE.MeshBasicMaterial( { map: texture });
const plane11 = new THREE.Mesh( geometry11, material11 );
plane11.position.set(2.78, 1.6, 2.5);
plane11.rotateY(1.571)
scene.add(plane11);
3

Usually textures are embedded in the glTF file already, but yes you can add them like this. Note that if you’re using glTF, you probably want to set texture.flipY = false to get the right UV orientation.

4

no no, I literally just wanted to upload a flat image on a flat plane. But I kept using ImageLoader rather than TextureLoader, that’s why I couldn’t figure out what to use.

so it’s fine I’ve figured out the problem.