Add background to THREE scene

Question

I am trying to add a background to a THREE scene, but I cannot get it to work. I followed the advice given here and here without success.

Here are the lines I added to my (complex) code:

            // Load the background texture
            var loader = new THREE.TextureLoader();
            var texture = loader.load( 'textures/stars_texture2956.jpg' );
            var backgroundMesh = new THREE.Mesh(
                new THREE.PlaneGeometry(2, 2, 0),
                new THREE.MeshBasicMaterial({
                    map: texture
                }));

            backgroundMesh.material.depthTest = false;
            backgroundMesh.material.depthWrite = false;

            // Create your background scene
            backgroundScene = new THREE.Scene();
            backgroundCamera = new THREE.Camera();
            backgroundScene.add(backgroundCamera );
            backgroundScene.add(backgroundMesh );

and the render function looks like this:

function render() {
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render( scene, camera );
}

Still I do not see the background (it is still white), but everything else works as expected. Is there a way to fix this?

score 3 · Answer 1 · answered Nov 19 '15 at 11:06

3

If you wish to add a static background to your scene then the easiest way is to make the background of your scene transparent and place an image under canvas:

var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0xffffff, 0);

If you wish to create panoramic background which changes when you rotate camera then you need to create a skybox - a big mesh around your scene textured with a set of textures which cover 360 degrees of view. Have a look at this example: http://threejs.org/examples/#webgl_materials_envmaps

answered Nov 19 '15 at 11:06

kaigorodov

877
9
15

Your suggestion does not seem to work. I still get the error I mentioned in my question which is probably the reason why the background image is not shown.. – Alex Nov 19 '15 at 11:33
awwwww yeah perfect! I'm just prototyping and learning, and this worked perfect. To summarize, set your CSS, add this setting to render and bam. – Andy Aug 17 '17 at 16:03

Falk Thiele · Answer 2 · 2015-11-19T23:27:07.620

2

The map is undefined because the TextureLoader Constructor expects a manager, not an url.

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
var texture = loader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );

http://threejs.org/docs/#Reference/Loaders/TextureLoader

To solve your problem with the two scenes, you need to disable autoClear. The second renderer call clears the first one. Set after initializing: renderer.autoClear = false;. Now manually clear in your render-function:

function render() {
    renderer.clear(); // <-
    renderer.render(backgroundScene, backgroundCamera);
    renderer.render( scene, camera );
}

edited Nov 19 '15 at 23:27

answered Nov 19 '15 at 11:55

Falk Thiele

4,424
2
17
44

Thanks, that removed the error. But I still do not see a background map, it is still just white...! – Alex Nov 19 '15 at 12:01
1

To completely answer this question I added a fix for the two-scenes-problem. – Falk Thiele Nov 19 '15 at 23:30

score 1 · Answer 3 · answered Aug 15 '17 at 01:34

try to coding like this

    THREE.ImageUtils.crossOrigin = '';
  var img = 'http://bpic.588ku.com/back_pic/03/92/40/4957e29f80d8a4a.jpg!ww650';
  var grass = THREE.ImageUtils.loadTexture(img);
new THREE.MeshLambertMaterial({  map: grass });

it works for me

score 0 · Answer 4 · answered Nov 19 '15 at 12:51

I have found a solution: Instead of creating a different scene and not knowing how to add cameras/whatever so it get rendered correctly, just add the background mesh to the actual scene.

The code then is as follows:

// Load the background texture
var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/messier-41.jpg' );               
var backgroundMesh = new THREE.Mesh( 
    new THREE.PlaneGeometry(2048, 2048,8,8),
    new THREE.MeshBasicMaterial({
         map: texture
    }));


backgroundMesh.material.depthTest = false;
backgroundMesh.material.depthWrite = false;

which must be put before the code that adds the other parts of the scene.

Add background to THREE scene

4 Answers4