How to draw an image on top of everything in Three.js?

Question

JavaScript

How to draw an image on top of the entire scene in threejs so that it does not react to the camera position and always remains in place?

Answer 1

To do this, we need to create another camera that we will not move:

otherCamera = new THREE.PerspectiveCamera( fov, width / height, near, far );

it must be directed directly at the object.
Create another scene:
add an object to this scene, which should always be on top:
you can stretch a texture with a picture on the object.
Next, you need to insert this into the place where the rendering takes place:

enderer.clear();  // отчищаем все буферы
renderer.render(mainScene, camera); // рендерим главную сцену
renderer.clear(false, true, false); // отчищаем только буфер глубины
renderer.render(otherScene, otherCamera);// рендерим статичную сцену

All!
There is another way that is much easier:

var texture = new THREE.ImageUtils.loadTexture( 'images/pic.jpg' );
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 0.5, 0.5 );
  var spriteMaterial = new THREE.SpriteMaterial( {map: texture, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft } );
  sprite = new THREE.Sprite( spriteMaterial );
  sprite.scale.set(100,100,1.0);
  sprite.position.set( 0, 0, -1 );
  mainScene.add( sprite );

dated 08/30/2014, the last method for the latest versions of Three.js, unfortunately, is no longer relevant.