threejs - Displaying a 2D image

Question

Another threejs question. I'm basically trying to get a 2D image display on the screen when I hit a key. I've searched around but I can't find a way to get my image to display properly and some methods I just can't get working at all. Of the times I do manage to get an image showing, it either shows behind my 3d environment container (in html) or causes the entire 3D window to disappear even though the images aren't larger than it. I haven't really messed around with images so I'm not sure what I'd need. I'm not trying to get an image display in 3D space, just an image to pop up on the screen, like a menu or something.

Answer 1

You could also use a THREE.Sprite, very easy to implement and even if it gets created in a 3D space it always face the camera.

Here's a quick implementation example from the documentation:

var map = new THREE.TextureLoader().load( "sprite.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );
var sprite = new THREE.Sprite( material );
scene.add( sprite );

And remember to scale the sprite to match your image dimensions (in addition to setting camera.position.z to something high enough, of course):

sprite.scale.set(imageWidth,imageHeight,1);