title: How to set up image background in three.js?
body: <p>I am trying to set up image background for my scene with globe in three.js, but unfortunately, when I did it the main object of my scene also became black (the same colour with background. </p>
  
  <p>I used method:</p>
  
  <pre><code>renderer = new THREE.WebGLRenderer({ antialias: false, alpha:true });
  </code></pre>
  
  <p>Which makes default background transparent. And then I added image-background in CSS part.</p>
  
  <p>My whole script for the scene looks like this:
      </p>
  
  <pre><code>        var container, stats;
          var camera, scene, renderer;
          var group;
          var mouseX = 0, mouseY = 0;
  
          var windowHalfX = window.innerWidth / 2;
          var windowHalfY = window.innerHeight / 2;
  
          init();
          animate();
  
  
          function init() {
  
              container = document.getElementById( 'container' );
  
              camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
              //closer
              camera.position.z = 500;
  
              scene = new THREE.Scene();
  
              group = new THREE.Group();
              scene.add( group );
  
              // earth
  
              var loader = new THREE.TextureLoader();
              loader.load( 'textures/mapnew1.jpg', function ( texture ) {
  
                  var geometry = new THREE.SphereGeometry( 180, 32, 32 );
  
                  var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
                  var mesh = new THREE.Mesh( geometry, material );
                  group.add( mesh );
  
              } );
  
  
  
              // shadow
  
              var canvas = document.createElement( 'canvas' );
              canvas.width = 128;
              canvas.height = 128;
  
              var context = canvas.getContext( '2d' );
              var gradient = context.createRadialGradient(
                  canvas.width / 2,
                  canvas.height / 2,
                  0,
                  canvas.width / 2,
                  canvas.height / 2,
                  canvas.width / 2
              );
              gradient.addColorStop( 0.1, '#000000' );
              gradient.addColorStop( 1, '#000000' );
  
              context.fillStyle = gradient;
              context.fillRect( 0, 0, canvas.width, canvas.height );
  
              var texture = new THREE.CanvasTexture( canvas );
  
              var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );
              var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
  
  
              var mesh = new THREE.Mesh( geometry, material );
              mesh.position.y = - 200;
              mesh.rotation.x = - Math.PI / 2;
              group.add( mesh );
  
  
              renderer = new THREE.CanvasRenderer();
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer = new THREE.WebGLRenderer({ antialias: false, alpha:true });
              renderer.setSize( window.innerWidth, window.innerHeight );
              renderer.setClearColor(0x000000, 0);
              container.appendChild( renderer.domElement );
  
              stats = new Stats();
              container.appendChild( stats.dom );
  
              document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  
              //
  
              window.addEventListener( 'resize', onWindowResize, false );
  
          }
  
          function onWindowResize() {
  
              windowHalfX = window.innerWidth / 2;
              windowHalfY = window.innerHeight / 2;
  
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
  
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
  
          function onDocumentMouseMove( event ) {
  
              mouseX = ( event.clientX - windowHalfX );
              mouseY = ( event.clientY - windowHalfY );
  
          }
  
          //
  
          function animate() {
  
              requestAnimationFrame( animate );
  
              render();
              stats.update();
  
          }
  
  
          function render() {
  
              camera.position.x += ( mouseX - camera.position.x ) * 0.08;
              camera.position.y += ( - mouseY - camera.position.y ) * 0.08;
              camera.lookAt( scene.position );
  
              group.rotation.y -= 0.003;
  
              renderer.render( scene, camera );
  
  
          }
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>body {
    color: #ffffff;
    font-family:'Futura';
    font-size:20px;
    text-align: center;
    background-image: url(textures/starfield.png);
    background-color: black;
    margin: 0px;
    overflow: hidden;
  }
  </code></pre>
  
  <p>Do you have any ideas how to fix it and make globe visible?</p>
  
  <p>Thank you very much!</p>