Within my JSON model, I am aware of the two settings available for each material: depthTest and depthWrite.
I have set these values to false because some materials contain RGBA textures, and setting them to true causes the alpha channel to match the background color.
Currently, the textures seem to be controlled by a sort of z-index, placing them either above or below other elements.
Is there a way to address this issue?
EDIT:
Check out the page here:
And here's the corresponding code:
var camera, scene, renderer, mesh, loader;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
loader.load( "alisopoli/alisopoli.js", function( geometry, materials ) {
for ( var i = 0; i < materials.length; i ++ ) {
materials[ i ].side = THREE.DoubleSide
//materials[ i ].overdraw = true;
}
//var faceMaterials = new THREE.MeshFaceMaterial( materials );
//faceMaterials.map.magFilter = THREE.NearestFilter;
//mesh = new THREE.Mesh( geometry, faceMaterials );
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.scale.set( 100, 100, 100 );
mesh.rotation.x = 45 * Math.PI / 180;
scene.add( mesh );
} );
var ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.y += 0.005;
renderer.render( scene, camera );
}
Access the model here: