Javascript 三个.js阴影投射在无障碍的面上,引导分辨率低

Javascript 三个.js阴影投射在无障碍的面上,引导分辨率低,javascript,three.js,shadow-mapping,Javascript,Three.js,Shadow Mapping,这是我的问题: 文字上的阴影不应该存在,尽管我更改了阴影贴图的分辨率,但没有任何变化。这是用于生成网格的代码: var materialArray_Flying = [ new THREE.MeshPhongMaterial( { color: 0xff00ff, ambient: 0xff00ff } ), //face new THREE.MeshPhongMaterial( { color: 0x008888, ambient: 0x008888 } )

这是我的问题:

文字上的阴影不应该存在,尽管我更改了阴影贴图的分辨率,但没有任何变化。这是用于生成网格的代码:

var materialArray_Flying = [
        new THREE.MeshPhongMaterial( { color: 0xff00ff, ambient: 0xff00ff } ), //face
        new THREE.MeshPhongMaterial( { color: 0x008888, ambient: 0x008888 } )]; //sides

var textGeom_Flying = new THREE.TextGeometry( "{Flying}",
        {
        size: 4, height: .25, curveSegments: 3,
        font: "helvetiker", weight: "bold", style: "normal",
        bevelThickness: 0.025, bevelSize: 0.05, bevelEnabled: true,
        material: 0, extrudeMaterial: 1
        });
var textMesh_Flying = new THREE.Mesh(textGeom_Flying, new THREE.MeshFaceMaterial(materialArray_Flying));
scene.add(textMesh_Flying);
textMesh_Flying.castShadow = true;
textMesh_Flying.receiveShadow = true;
我的渲染器设置如下:

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;
renderer.setClearColor(0x000000, 1);
renderer.shadowMapWidth = 4096;
renderer.shadowMapHeight = 4096;

欢迎任何帮助。

我相信您看到的是由于对象在单位空间中非常小,阴影贴图技术正在努力将如此小的浮动转换为可用的纹理。此外,对于非常“薄”的几何体,有时即使是最小的shadowCameraNear值也仍然足够大,足以“看到”整个网格

我可以看到两种解决办法

1) 停止接受主网格上的阴影

或者2)增加整个场景的大小/字母的厚度,给阴影算法一些“肉”来玩

注意:您可以尝试使用
shadowCameraNear=0.001
并查看这是否也有帮助


希望这会有所帮助,

我相信您看到的是由于对象在单位空间中非常小,阴影贴图技术正在努力将如此小的浮动转换为可用的纹理。此外,对于非常“薄”的几何体,有时即使是最小的shadowCameraNear值也仍然足够大,足以“看到”整个网格

我可以看到两种解决办法

1) 停止接受主网格上的阴影

或者2)增加整个场景的大小/字母的厚度,给阴影算法一些“肉”来玩

注意:您可以尝试使用
shadowCameraNear=0.001
并查看这是否也有帮助

希望有帮助

textMesh_Flying.receiveShadow = false;