Javascript 如何在ShaderMaterial上获得正确的阴影

我使用了

InstancedBufferGeometry

创建了很多长方体，然后用柏林噪声更新位置。但网格已投射并接收到错误的阴影。如何计算右阴影

顶点着色器

attribute vec3 offset;
attribute vec4 orientation;
attribute vec3 color;

varying vec3 pos;
varying vec3 vNormal;
varying vec3 vWorldPosition;
varying vec3 vColor;

vec3 applyQuaternionToVector( vec4 q, vec3 v ){
    return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );
}

THREE.ShaderChunk["common"]
THREE.ShaderChunk["shadowmap_pars_vertex"]

void main() {
    vColor = color;

    vec3 vPosition = applyQuaternionToVector( orientation, position );
    pos = vPosition + offset;

    vNormal = normalMatrix * vec3(normal + normalize(offset) * 0.3);

    vec4 worldPosition = modelMatrix * vec4(pos, 1.0);
    vWorldPosition = worldPosition.xyz;

    gl_Position = projectionMatrix * modelViewMatrix * worldPosition;
    THREE.ShaderChunk["shadowmap_vertex"]
}

碎片着色器

THREE.ShaderChunk['common']
THREE.ShaderChunk['packing']
varying vec3 pos;
varying vec3 vNormal;
varying vec3 vWorldPosition;
varying vec3 vColor;

uniform vec3 lightPosition;

THREE.ShaderChunk['shadowmap_pars_fragment']
void main() {
    vec3 lightDirection = normalize(lightPosition + pos);

    float c = max(0.0, dot(vNormal, lightDirection)) * 2.;
    gl_FragColor = vec4(.3+c , .3+c , .3+c , 1.);
    THREE.ShaderChunk['shadowmap_fragment']
}

three.js r.106
谢谢

var场景、摄影机、渲染器；
var平面、温度、vnh、点；
var半径=10；
var stats=newstats（）；
var start=Date.now（）；
变量选项={
比例：200，
密度：2.5
}
var currentQ=新的三个四元数（）；
var initedbox=false；
var init=函数（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=25；
var控制装置=新的三个轨道控制装置（摄像机）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
document.body.appendChild（renderer.doElement）；
var gui=new dat.gui({
宽度：300
});
添加（选项，'scale'）。最小值（0）。最大值（200）。名称（'scale'）；
添加（选项，'density'）.min（0）.max（10）.name（'density'）；
//统计数据
统计显示面板（0）；
stats.domeElement.style.position='固定'；
stats.domeElement.style.top=0；
document.body.appendChild（stats.domeElement）；
initLights（）；
initSphere（）；
initbox（）；
renderer.setAnimationLoop（函数（）{
更新（）；
render（）；
});
}
var initLights=函数（）{
var环境光=新的三个环境光（0x555555）；
场景。添加（环境光）；
light1=新的三点聚光灯（0xffffff，2200，10）；
light1.位置设置（-30,30,40）；
light1.castShadow=true；
场景。添加（light1）；
light1Helper=新的三个.SpotLightHelper（light1，0xffffff）；
添加（light1Helper）；
}
var initSphere=function（）{
var几何=新的三面体。二十面体几何（半径，3）；
var材质=新的3.0网格材质({
颜色：0x9999，
线框：错误
});
材料光泽度=0；
球体=新的三个网格（几何体、材质）；
//sphere.castShadow=true；
//sphere.receiveShadow=true；
//场景。添加（球体）；
tempGeo=新的三点几何体（）；
临时复制（几何）；
温度=新的三个网格（温度、材料）；
var pGeo=新的三个平面几何体（100,100,1,1）；
平面=新的三个网格（pGeo，材料）；
plane.receiveShadow=true；
平面位置y=-半径-3；
平面旋转x=-90*Math.PI/180；
场景。添加（平面）；
}
var initbox=函数（）{
initedbox=true；
var bufferGeometry=新的三个.BoxBufferGeometry（1,1,1）；
var geometry=new THREE.InstancedBufferGeometry（）；
geometry.index=bufferGeometry.index；
geometry.attributes.position=bufferGeometry.attributes.position；
//geometry.attributes.normal=bufferGeometry.attributes.normal；
//每实例数据
var抵销=[]；
var方向=[]；
var颜色=[]；
var vector=new THREE.Vector4（）；
变量x，y，z，w；
var cscale=色度刻度（['#ff0000'，'#00ff00'，'#0000ff']）。等级（10）；
对于（变量i=0；i