How remove or reset map from material skybox in three js?

Question

I have a ThreeJS scene and I'd like to provide the option of seeing all models in different modes (with or without textures) in the skybox. I used Two kind of function 'getSkyTexture' and 'getSkyColor'. It should work in separately but first, I called getSkyColor function my background sky color change after I called getSkyTexture function my background sky texture change again I called getskyTexture is not worked texture. therefore I reset/ remove my skybox map material. How can do this?

function getSkyTexture(id, objMaterial){ //here objMaterial Texture image

        console.log('sky texture');

//      skyMaterial.map = null;
//      skyMaterial.needsUpdate = true;

//      skyBox.material.map = null;
//      skyBox.material.needsUpdate = true;

        var imagePrefix = objMaterial;
        var directions  = ["xpos","xneg","ypos","yneg","zpos","zneg"];
        var imageSuffix = ".png";

         materialArray = [];
         for (var i = 0; i < 6; i++)
         materialArray.push( new THREE.MeshBasicMaterial({
           map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
           side: THREE.BackSide /*depthWrite: false, fog: false*/
          }));

         var skyGeometry = new THREE.CubeGeometry( 1000, 1000, 1000);
         skyMaterial = new THREE.MeshFaceMaterial( materialArray );
         skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
         scene3D.add( skyBox );

    }

    function getSkyColor(id, objMaterial){   //here objMaterial color

        console.log('sky color');

/*Here remove/reset my skybox map texture.but not working*/     
//      renderer3D.autoClear = false;

//      materialArray.map =null;
//      materialArray.needsUpdate = true;       

//      skyBox.map = null;
//      skyBox.needsUpdate = true;

//      skyBox.material.map = null;
//      skyBox.material.needsUpdate = true;

//      skyMaterial.map = null;
//      skyMaterial.needsUpdate = true;

//      scene3D.remove(skyMaterial);

//      skyBox.MeshFaceMaterial = null;
//      skyBox.needsUpdate = true;

//      skyMaterial = objMaterial;



        var skyGeometry = new THREE.CubeGeometry( 1000, 1000,1000);
        skyMaterial = new THREE.MeshBasicMaterial({color: objMaterial, side: THREE.BackSide});
        skyBox = new THREE.Mesh( skyGeometry, skyMaterial);
        scene3D.add(skyBox);

        //renderer3D.setClearColor(objMaterial);

    }

Just a small remark: `.background` property of `THREE.Scene()` can be set to both `THREE.Color()` and `THREE.CubeTexture()`. — prisoner849, Apr 20 '18 at 07:37
background color first I set in the renderer. after I changed skybox. now I need, How to reset or remove the skybox map material? please give the solution @prisoner849 — karthick1870, Apr 20 '18 at 08:30

score 1 · Accepted Answer · answered Apr 20 '18 at 08:53

There's the example of switching scene's background between a color and a cube texture:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 1);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("purple");
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var path = "https://threejs.org/examples/textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
  path + 'px' + format, path + 'nx' + format,
  path + 'py' + format, path + 'ny' + format,
  path + 'pz' + format, path + 'nz' + format
];
var cubeTexture = new THREE.CubeTextureLoader().load(urls);

var colorTexture = new THREE.Color("purple");

var switcher = true;
btnSwitch.addEventListener("click", function() {
  scene.background = switcher === true ? cubeTexture : colorTexture;
  switcher = !switcher;
}, false);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="btnSwitch" style="position: absolute;">switch</button>

Thank you so much. It's working well my scene texture and color@prisoner849 — karthick1870, Apr 20 '18 at 09:54
You're welcome :) Mark the answer as accepted, it if solved your question. — prisoner849, Apr 20 '18 at 09:55

How remove or reset map from material skybox in three js?

1 Answers1