英文:

Artifacts and problems with shadows of directional light & point light

问题

So I'm using React, Three Fiber as well as the drei library and cannon for physics.

我正在使用React，Three Fiber以及drei库和cannon库来处理物理效果。

I am making an apartment viewer as a personal project in which you can walk around in - so far everything works fine.

我正在制作一个个人项目的公寓浏览器，你可以在其中四处走动，目前一切都正常。

To make it later on possible to load in the apartment model from a database (and make the creation process easier for multiple models), the transformations for the light switches, aktivatable point lights and the apartments collision boxes are copied from objects within the gltf file.

为了以后能够从数据库中加载公寓模型（并使多个模型的创建过程更容易），光开关、可激活点光和公寓的碰撞箱的变换是从gltf文件中的对象复制的。

To prevent the collision boxes from rendering or otherwise affecting the rendering process, they are made invisible. (I also tried to set child.castShadow = false with no effect).

为了防止碰撞箱渲染或以其他方式影响渲染过程，它们被设为不可见（我也尝试过将child.castShadow = false，但没有效果）。

For some reason the shadows are corrupted: unwanted point light shadows.

由于某种原因，阴影出现了问题：不需要的点光阴影。

I also tried to change some properties of the original child: Object3D properties in the Apartment component (the only place where the boxes could affect the shadows), without changing results.

我还尝试了更改Apartment组件中原始child的一些属性：Object3D属性（这是唯一可能影响阴影的地方），但结果没有改变。

Another thing is that there doesn't seem to be any options to adjust shadows anymore. Properties like shadowBias, shadowMapWidth, etc. are deprecated. By hovering over it I get something like @deprecated — Use shadow.mapSize.width instead. At least I couldn't find a solution to that, also because the Three Fiber documentation isn't that extensive. Just using them doesn't work either.

另一件事是似乎没有任何选项来调整阴影了。像shadowBias、shadowMapWidth等属性都已被弃用。当我悬停在上面时，会得到类似@deprecated — Use shadow.mapSize.width instead的消息。至少我找不到解决方案，也因为Three Fiber文档不够详细。仅仅使用它们也无效。

英文:

So I'm using React, Three Fiber as well as the drei library and cannon for physics.

I am making an apartment viewer as a personal project in which you can walk around in - so far everything works fine. To make it later on possible to load in the apartment model from a database (and make the creation process easier for multiple models), the transformations for the light switches, aktivatable point lights and the apartments collision boxes are copied from objects within the gltf file.

To prevent the collision boxes from rendering or otherwise effecting the rendering process, they are made invisible. (I also tried to set child.castShadow = false with no effect).
For some reason the shadows are corrupted: unwanted point light shadows.

I also tried to change some properties of the original child: Object3D properties in the Apartment component (the only place where the boxes could affect the shadows), without changing results.

Another thing is that there doesn't seem to be any options to adjust shadows anymore. Properties like shadowBias, shadowMapWidth etc. are deprecated. By hovering over it I get something like @deprecated — Use shadow.mapSize.width instead. At least I couldn't find a solution to that, also because the Three Fiber documentation isn't that extensive. Just using them doesn't work either.

答案1

得分: 0

好的，以下是翻译好的部分：

"Ok, so for some reason an object with imported materials has problems receiving shadows. By setting shadow-bias={-0.0003} on the pointLight (in kebab case like for every other Three property as well) the shadows now obviously have a slight offset to them, but all the stripes are gone. Thanks also to the redditors that guided me to the fix for this issue!"

英文:

Ok, so for some reason an object with imported materials has problems receiving shadows. By setting shadow-bias={-0.0003} on the pointLight (in kebab case like for every other Three property as well) the shadows now obviously have a slight offset to them, but all the stripes are gone. Thanks also to the redditors that guided me to the fix for this issue!