I have a sphere in my scene and I want to change its texture when a click event occurs. However, when I apply the new texture to the sphere using my current code, it rearranges the elements in the scene causing other objects to be hidden behind the sphere. Adjusting the opacity of the sphere allows me to see the obscured elements clearly.
How can I maintain the order of elements in the scene while changing the texture of the sphere?
$("#button").click(function(){
var textureLoader = new THREE.TextureLoader(manager);
var materials = [
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.left), transparent: true, opacity: 1}), // right
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.right), transparent: true, opacity: 1}), // left
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.top), transparent: true, opacity: 1}), // top
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.bottom), transparent: true, opacity: 1}), // bottom
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.back), transparent: true, opacity: 1}), // back
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.front), transparent: true, opacity: 1}) // front
];
mesh.material = new THREE.MultiMaterial(materials);
});
Sphere:
var mesh;
var geometry;
var scene = new THREE.Scene();
function init() {
geometry = new THREE.SphereBufferGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);
var textureLoader = new THREE.TextureLoader(manager);
var materials = [
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.left)}), // right
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.right)}), // left
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.top)}), // top
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.bottom)}), // bottom
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.back)}), // back
new THREE.MeshBasicMaterial({map: textureLoader.load(options.cubic.file.front)}) // front
];
mesh = new THREE.Mesh(new THREE.BoxGeometry(1000, 1000, 1000, 7, 7, 7), new THREE.MultiMaterial(materials));
mesh.scale.x = -1;
scene.add(mesh);
}