SNos SNos - 1 year ago 130
Javascript Question

Change texture on click cause other objects to hide

I am trying to change the texture of a sphere already created in the scene using a click event. In the scene I have also other elements such as text and collada object.

The code I have changes the texture of the sphere however, it changes the order of the elements in the scene causing the other visible objects to hide behind the sphere. If I change the opacity of the sphere I can clearly see the other elements beyond it.

How can I preserve the order of the elements in the scene when I change the texture?

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(, 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);


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(}), // 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;

Answer Source

I assume it could be because of the way how the renderer sorts objects that have some degree of transparency.

try setting the renderer.sortObjects = false // default is true ///