Threejs像素阴影
Threejs像素阴影
提问于 2017-05-18 15:52:22
我做了一个应用程序，在其中我动态地创建了搁板。除了阴影之外，所有的效果都很好。问题是我甚至不知道问题出在哪里。是光还是物体？希望有人能帮我。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对象。使用猎豹、搅拌机和/或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;回答 1
Stack Overflow用户
发布于 2020-08-20 23:03:42
您可以查看灯光的设置。某些灯光类型允许您添加阴影半径、偏移等。这将允许您平滑阴影像素。
你有this.shadowLight.shadow.bias = -0.01；但是阴影半径会给你最好的结果，
.radius : Float将此设置为大于1的值将使阴影的边缘变得模糊。较高的值将在阴影中产生不需要的条带效果-较大的mapSize将允许在这些效果可见之前在此处使用较高的值。如果WebGLRenderer.shadowMap.type设定为PCFSoftShadowMap，则半径不起作用，建议改为通过减小mapSize来增加柔和度。
请注意，如果WebGLRenderer.shadowMap.type设置为BasicShadowMap，则此设置不起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44041746
复制相关文章
相似问题
腾讯云开发者
