extending lambert material, opacity not working

问题

i would like to create a custom material which extends the lambert shader but setting the mesh translucent doesn't work.

var shaders = { lambert : THREE.ShaderLib['lambert'] }

materials.mylambert = function(parameters){

  var vertexShader = shaders.mylambert.vertexShader
   , fragmentShader = shaders.mylambert.fragmentShader
   , uniforms = shaders.mylambert.uniforms
   , attributes = {}

   var material = new THREE.ShaderMaterial( 
    { vertexShader: vertexShader
    , fragmentShader: fragmentShader
    , uniforms: uniforms
    , lights : true
    , fog : true
    } )

    material.setValues( parameters )
    return material  
}
var material = new materials.mylambert({ opacity : 0.4, transparent : true } )
var mesh = new THREE.Mesh(geom, material)

回答1:

You need to separate properties of the material from the material uniforms. You can get your specific example to work like so:

var shaders = { mylambert : THREE.ShaderLib[ 'lambert' ] };

var materials = {};

materials.mylambert = function( parameters, myUniforms ) {

    var material = new THREE.ShaderMaterial( {

        vertexShader: shaders.mylambert.vertexShader,
        fragmentShader: shaders.mylambert.fragmentShader,
        uniforms: THREE.UniformsUtils.merge( [ shaders.mylambert.uniforms, myUniforms ] ),
        attributes: {}

    } );

    material.setValues( parameters )

    return material;

};

myProperties = {
    lights: true,
    fog: true,
    transparent: true
};

myUniforms = {
    opacity: { type: "f", value: 0.4 },
};

var material = new materials.mylambert( myProperties, myUniforms );

three.js r.58

来源：https://stackoverflow.com/questions/17421575/extending-lambert-material-opacity-not-working

标签

three.js