Crossfade two materials on a single mesh?

Questions
, , , ,
6 
let firstMaterial = new THREE.MeshStandardMaterial({
        color:'red'});
let secondMaterial = new THREE.MeshBasicMaterial({
        color:"blue",
        transparent:true, // Need this to blend to material behind...
        depthFunc:THREE.EqualDepth, //Need this or depth test will prevent the second material
        opacity:.5, //Fade 50% between the materials...
        })
let thirdMaterial = new THREE.MeshPhongMaterial({
        color:"green",
        transparent:true, // Need this to blend to material behind...
        depthFunc:THREE.EqualDepth, //Need this or depth test will prevent the second material
        opacity:.5, //Fade 50% between the materials...
        })
let bx = new THREE.Mesh(new THREE.SphereGeometry(16,16,16));
scene.add(bx);
bx.geometry.addGroup(0,Infinity,0)
bx.geometry.addGroup(0,Infinity,1)
bx.geometry.addGroup(0,Infinity,2)
bx.material = [firstMaterial,secondMaterial,thirdMaterial ]
setInterval(()=>{
    bx.material[(Math.random()*3)|0].opacity = Math.random()
})

You should be able to crossfade any number/types of materials this way.

5 Likes