Javascript 三像素阴影

我制作了一个应用程序，在其中我动态创建了shelfs。除了阴影，所有的作品都很好。问题是我甚至不知道问题是什么。是光还是物体？希望有人能帮助我。

这是我的灯光代码：

addLights(){
this.ambientLight = new AmbientLight( 0xffffff, 0.8 );
this.scene.add( this.ambientLight );

this.shadowLight = new THREE.SpotLight( 0xffffff , 0.1 );
this.shadowLight.position.set( 10 , 100 , 10 );

this.shadowLight.target = this.mainGroup;

this.shadowLight.castShadow = true;

this.shadowLight.shadow.mapSize.width = 4096;
this.shadowLight.shadow.mapSize.height = 4096;

this.shadowLight.shadow.camera.near = 1;//500;
this.shadowLight.shadow.camera.far = 1000;//4000;
this.shadowLight.shadow.camera.fov = 30;

this.shadowLight.shadow.bias = -0.01;

this.scene.add( this.shadowLight );

this.spotLight = new THREE.SpotLight( 0xffffff , 0.8 );
this.spotLight.position.set( 10 , 100 , 10 );
this.spotLight.target = this.mainGroup;
this.spotLight.castShadow = false;
this.scene.add( this.spotLight );

}

对于我的白色盒子：

makeBox(elemColor: any, coordinates: [ number, number, number ], size: [ number, number, number ] ) {
// Box
this.geometry = new BoxBufferGeometry(size[0], size[1], size[2]);
this.material = new MeshLambertMaterial({ shading:FlatShading , color: elemColor });
this.mesh = new Mesh(this.geometry, this.material);
this.mesh.material.side = DoubleSide;
this.mesh.position.x = coordinates[0];
this.mesh.position.y = coordinates[1];
this.mesh.position.z = coordinates[2];
this.mesh.receiveShadow = true;
this.mesh.castShadow = true;
return(this.mesh);

}

所有其他部分都是我用ObjectLoader导入的JSON对象。使用Cheetah、Blender和/或Clara.io创建并导出为ThreeJS.json

我希望这是足够的代码，如果您需要更多，请告诉我

感谢您的关注：）

编辑// 我的渲染器：

// RENDERER
this.renderer = new WebGLRenderer( { antialias: true } );
this.renderer.shadowMapType = THREE.PCFSoftShadowMap; // softer shadows
//this.renderer.physicallyCorrectLights = true;
this.renderer.setClearColor( this.scene.fog.color );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( this.renderer.domElement );
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.renderReverseSided = true;

---

您可以查看灯光的设置。某些灯光类型允许您添加阴影半径、偏移等。这将允许您平滑阴影像素

你有这个.shadowLight.shadow.bias=-0.01； 但是阴影半径会给你最好的效果

.半径：浮动 将该值设置为大于1将模糊阴影的边缘。 较高的值将在阴影中产生不必要的带状效果-较大的贴图大小将允许在这些效果可见之前在此处使用较高的值。 如果WebGLRenderer.shadowMap.type设置为PCFSoftShadowMap，则“半径”无效，建议改为通过减小贴图大小来增加柔和度

---

请注意，如果WebGLRenderer.shadowMap.type设置为BasicShadowMap，则此选项无效。

可能与此选项重复：谢谢。我添加了renderer.shadowMapType=THREE.PCFSoftShadowMap；我没有在我的渲染器选项。现在看起来好多了，但还不够好：）截图：