three.js set background image

Question

How to create a static background image?

For default background:

scene = new THREE.Scene();

// ...

renderer = new THREE.WebGLRenderer( { antialias:         


        

Answer 1

Use Texture loader to load a any image as texture and then apply that to scene like this:

//Load background texture
const loader = new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
            {
             scene.background = texture;  
            });

Result:

Demo:

See the Pen Flat Earth Three.JS by Hitesh Sahu (@hiteshsahu) on CodePen.