如何在THREE.js中使用ShaderMaterial接收阴影？

Question

我运行了一个简单的代码，它创建了一个着色器材质并将其分配给我的对象，我知道代码缺少阴影部分“但我只是不知道如何制作这个部分！”

这是创建材料的函数：

function createShaderMaterial( id, light, ambientLight ) {

var shader = THREE.ShaderTypes[ id ];

var u = THREE.UniformsUtils.clone( shader.uniforms );

var vs = shader.vertexShader;
var fs = shader.fragmentShader;

var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );

material.uniforms.uDirLightPos.value = light.position;
material.uniforms.uDirLightColor.value = light.color;
material.uniforms.uSpecularColor.value.copy( new THREE.Color(0.8,0.8,0.8) );
material.uniforms.shininess = 100;

material.uniforms.uAmbientLightColor.value = ambientLight.color;

return material;

}

在调用中它是：

var materialColor = new THREE.Color();
materialColor.setRGB( 0.5, 0.5, 0.5 );
gouraudMaterial = createShaderMaterial( "gouraud", light, ambientLight );
gouraudMaterial.uniforms.uMaterialColor.value.copy( materialColor );

并将该材质分配给任何对象，经过一些测试我发现它可以“投射任何其他材料如phong材料”，但它不会收到阴影：S

EDIT1：

好吧它引发了一个错误： [.WebGLRenderingContext] GL错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性2中超出范围的顶点

这是材料功能：

function createShaderMaterial2() {
var ambient = 0x050505, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23;

// normal map shader

var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = false;
uniforms[ "enableSpecular" ].value = false;
uniforms[ "enableReflection" ].value = false;
uniforms[ "enableDisplacement" ].value = false;

//uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
//uniforms[ "tAO" ].value = THREE.ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );

//uniforms[ "tDisplacement" ].value = THREE.ImageUtils.loadTexture( "textures/normal/ninja/displacement.jpg" );
//uniforms[ "uDisplacementBias" ].value = - 0.428408;
//uniforms[ "uDisplacementScale" ].value = 2.436143;

//uniforms[ "uNormalScale" ].value.y = -1;

uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
uniforms[ "uSpecularColor" ].value.setHex( specular );
uniforms[ "uAmbientColor" ].value.setHex( ambient );

uniforms[ "uShininess" ].value = shininess;

//uniforms[ "tCube" ].value = reflectionCube;
uniforms[ "uReflectivity" ].value = 0.1;

uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
uniforms[ "uAmbientColor" ].value.convertGammaToLinear();


var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false };
var material1 = new THREE.ShaderMaterial( parameters );

return material1;}