three.js - 扩展朗伯材料，不透明度不起作用

Question

我想创建一个自定义材质来扩展朗伯着色器，但设置网格半透明不起作用。

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)

Answer 1

您需要将材料的属性与材料制服分开。你可以让你的具体例子像这样工作：

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

三.js r.58