CODEWITHSUNDEEP
javascriptthree.js
Alex
Alex

Reputation: 44405

Add background to THREE scene

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?

Upvotes: 2

Views: 8806

Answers (4)

bbb324
bbb324

Reputation: 11

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

Upvotes: 1

Falk Thiele
Falk Thiele

Reputation: 4494

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 );
}

Upvotes: 2

Alex
Alex

Reputation: 44405

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.

Upvotes: 0

kaigorodov
kaigorodov

Reputation: 897

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

Upvotes: 3

Related Questions