In my ThreeJS scene, I am trying to implement different modes for viewing all models in the skybox, with or without textures. I have two functions called 'getSkyTexture' and 'getSkyColor' which are supposed to work separately. However, when I called the 'getSkyColor' function to change the background sky color and then called the 'getSkyTexture' function to change the background sky texture, the texture did not work. As a result, I had to reset/remove the skybox map material. How can I achieve this?
function getSkyTexture(id, objMaterial){ //here objMaterial Texture image
console.log('sky texture');
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');
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);
}