# Change the background wall of multiple texture

**URL:** <https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320>\
**Category:** Questions\
**Tags:** background, scene\
**Created:** [October 1, 2018, 2:11pm UTC](https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320 "2018-10-01T14:11:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [October 1, 2018, 2:11pm UTC](https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320/1 "2018-10-01T14:11:25Z")

</div>

Hello every one.  
I need to change the wall background image.  
I am working in three js scripting language, I need to change wall background images as dynamic and if scene rotate then wall also be rotate.

=\> I have make the scene wall transparent and apply the background image under the scene, currently scene move but background image does not move.

Please give me suggestion different wall apply different image texture.

thanks.

![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/1/166e62837a2fa0d26260a644d9b04d078474ca35.jpeg)  
 ![image](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/0/05dc57cdced3b9c46a749e939e4d73e3e9fefad9.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 1, 2018, 5:05pm UTC](https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320/2 "2018-10-01T17:05:29Z")

</div>

> [@sandeep](#):
>
> =\> I have make the scene wall transparent and apply the background image under the scene,

Does this mean you are using [scene.background](https://threejs.org/docs/index.html#api/en/scenes/Scene.background)? Can you please show some code that illustrates how you create your “background image”?

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [October 2, 2018, 5:19am UTC](https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320/3 "2018-10-02T05:19:46Z")

</div>

I am using this code.

 three.js webgl - loaders - OBJ loader 

```
</head>

<body>
	<div id="info">

	</div>

	   <script src="http://threejs.org/build/three.min.js"></script>
	<script src="js/loaders/OBJLoader.js"></script>

	<script>
		var container;
		var globalObject;
		var camera, scene, renderer;
		var mouseX = 0, mouseY = 0;
		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = window.innerHeight / 2;
		    var isMoving = false;
        var isUserInteracting = false,
                onMouseDownMouseX = 0, onMouseDownMouseY = 0,
                lon = 180, onMouseDownLon = 0,
                lat = 0, onMouseDownLat = 0,
                phi = 0, theta = 0;
		
	
	

			container = document.createElement( 'div' );
			document.body.appendChild( container );
			camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000 );
	
			
		    camera.target = new THREE.Vector3(0, 0, 0);
			// scene
			var scene = new THREE.Scene();
			
			
			renderer = new THREE.WebGLRenderer({ alpha: true });
			renderer.setClearColor( 0x39CBB9 ); // the default
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );
			
		
			
			var ambientLight = new THREE.AmbientLight( 0x00ff00, 1.2);
			scene.add( ambientLight );
			
			
			
			
				// texture object
			var manager = new THREE.LoadingManager();
			manager.onProgress = function ( item, loaded, total ) {
				console.log( item, loaded, total );
			};
			var textureLoader = new THREE.TextureLoader( manager );
			
			
			 var materia = new THREE.MeshBasicMaterial({
            map: textureLoader.load('images/Living-Room-02.png'),
            alphaTest: 0.5,
			transparent : true
        });
			var mesh = new THREE.Mesh(
                new THREE.SphereBufferGeometry(500, 60, 40).scale(-1, 1, 1),
                materia
                );
			
			scene.add(mesh);
			
			var aluminium_texture = THREE.ImageUtils.loadTexture('img/aluminium.jpg');
			
			var texture = textureLoader.load( 'img/texture11.png' );
			 texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
			texture.repeat.set(10, 10);
			texture.anisotropy = 16;
			// model
			
			
			scene.background=texture;

						
			var onProgress = function ( xhr ) {
				if ( xhr.lengthComputable ) {
					var percentComplete = xhr.loaded / xhr.total * 100;
					console.log( Math.round(percentComplete, 2) + '% downloaded' );
				}
			};
			var onError = function ( xhr ) {};
			
			var loader = new THREE.OBJLoader( manager );
			
			
		document.addEventListener('mousedown', onDocumentMouseDown, false);
        document.addEventListener('mousemove', onDocumentMouseMove, false);
        document.addEventListener('mouseup', onDocumentMouseUp, false);
        document.addEventListener('wheel', onDocumentMouseWheel, false);
			
			
		
		//
		function animate() {
			requestAnimationFrame( animate );
			
			render();
		}
		function render() {
			if (isMoving) {
                lon += 0.2;
            }

            lat = Math.max(-85, Math.min(85, lat));
            phi = THREE.Math.degToRad(90 - lat);
            theta = THREE.Math.degToRad(lon);

            camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
            camera.target.y = 500 * Math.cos(phi);
            camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);

            camera.lookAt(camera.target);

			//camera.lookAt( scene.position );
			renderer.render( scene, camera );
		}
		
		  function onDocumentMouseDown(event) {

            event.preventDefault();

            isUserInteracting = true;

            onMouseDownMouseX = event.clientX;
            onMouseDownMouseY = event.clientY;

            onMouseDownLon = lon;
            onMouseDownLat = lat;

        }

        function onDocumentMouseMove(event) {

            if (isUserInteracting === true) {

                lon = (onMouseDownMouseX - event.clientX) * 0.1 + onMouseDownLon;
                lat = (event.clientY - onMouseDownMouseY) * 0.1 + onMouseDownLat;

            }

        }

        function onDocumentMouseUp(event) {

            isUserInteracting = false;

        }

        function onDocumentMouseWheel(event) {

            var fov = camera.fov + event.deltaY * 0.25;

            camera.fov = THREE.Math.clamp(fov, 10, 75);

            camera.updateProjectionMatrix();

        }
        function movingPlay() {
            if (isMoving === true) {
                isMoving = false;
               // $('#play').text('Play ').removeClass('btn-danger').addClass('btn-success');

            } else {
                isMoving = true;
                //$('#play').text('Pause').addClass('btn-danger').removeClass('btn-success');
            }

        }

        function updateTextureImg(texture_img,intensity) {
      
	  texture=THREE.ImageUtils.loadTexture(texture_img);
				globalObject.traverse( function ( child ) {
					if ( child instanceof THREE.Mesh ) {
						child.material.map = THREE.ImageUtils.loadTexture(texture_img);
						  //child.alphaTest= 0.5;
						child.material.needsUpdate = true;  
					}
				} );
			//ambientLight.intensity=intensity;	
        }
		function rollType(type){
			if(type==1){
			globalObject=inside_object;
			outside_object.traverse( function ( child ) {
					if ( child instanceof THREE.Mesh ) {
						 child.visible = false;
					}
				} );
			}if(type==2){
			globalObject=outside_object;
			inside_object.traverse( function ( child ) {
					if ( child instanceof THREE.Mesh ) {
						 child.visible = false;
					}
				});
			}
			
			globalObject.traverse( function ( child ) {
					if ( child instanceof THREE.Mesh ) {
					child.material.map = texture
						 child.visible = true;
					}
				});
		}
		animate();
	</script>

</body>

```

---

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [October 2, 2018, 5:21am UTC](https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320/4 "2018-10-02T05:21:25Z")

</div>

Yes, I have used  
scene.background=texture;

I think this is not right way?

---

<div class="post-metadata">

**Author:** ![Quan\_Bui](https://avatars.discourse-cdn.com/v4/letter/q/ac91a4/32.png) [@Quan\_Bui](https://discourse.threejs.org/u/Quan_Bui)\
**Post date:** [January 28, 2019, 7:52am UTC](https://discourse.threejs.org/t/change-the-background-wall-of-multiple-texture/4320/5 "2019-01-28T07:52:27Z")

</div>

can U send full source code for me? please!
