Question

我制作了一个应用程序，我在其中动态创建了数据库。除阴影外，一切正常。问题是我甚至不知道问题是什么。它是光还是物体？希望可以有人帮帮我。 here is a picture of my shadows

这是我的灯光代码：

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;

Answer 1

您可能会查看灯光的设置。某些光源类型允许您添加阴影半径，偏差等。这将使您平滑阴影像素。

您有this.shadowLight.shadow.bias = -0.01; 但是阴影半径会为您带来最佳效果，

.radius：浮动将此值设置为大于1的值将使阴影的边缘模糊。较高的值将在阴影中导致不必要的条带效果-较大的mapSize将允许在这些效果可见之前在此处使用较高的值。如果将WebGLRenderer.shadowMap.type设置为PCFSoftShadowMap，则radius无效，建议通过减小mapSize来增加柔度。

请注意，如果将WebGLRenderer.shadowMap.type设置为BasicShadowMap，这将无效。

Threejs像素化阴影

1 个答案: