ThreeJS奇怪的条纹阴影 [英] ThreeJS weird stripes shadow

问题描述

我正在尝试让厨房内的房间光线充足 http://bozoou.com/plocice3D/您可以注意到厨房元素上奇怪的水平阴影.

I am trying to make room light inside this kitchen http://bozoou.com/plocice3D/ You can notice wierd horizontal strikes of shadow on kitchen element.

我怀疑在 x、y 和 z 轴顶部的聚光灯中.如果我沿 y 轴仅将光源移动 1 个点(房间为 500x300)，我会在整个地板上看到这种阴影:http://bozoou.com/plocice3D/?moveLight=1如果我将灯光移动 1 或 50，也会发生同样的问题.

I have suspect in spotLight which is in middle of x,y, and top of z axis. If I move source of light for only 1 point along y-axis (room is 500x300), I got this strikes of shadow on whole floor: http://bozoou.com/plocice3D/?moveLight=1 Same problem happens if I move light for 1 or 50.

所有元素投射和接收阴影.

All elements cast and receive shadow.

推荐答案

这个问题通常是由于阴影近点离你的物体太近造成的.为了更好地理解，请尝试执行以下操作:创建灯光后，您可以添加一个相机助手来显示灯光的边界.

This problem is usualy caused by the shadow near point is too close to your object. For better understanding try to do the follow: after you create your light you can add a camera helper to show you the bounderies of the light.

var spotLight = new THREE.SpotLight(0xffffff, 0.3, 0, Math.PI / 2);
spotLight.position.set(0, 100, 0);
sunLight.castShadow = true;

var shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
shadowCameraHelper.visible = true;

Kepp 更改这两个值，直到您达到目标.

Kepp changing these two values untile you reach your goal.

spotLight.shadow.camera.near = 50;
spotLight.shadow.camera.far = 150;

请记住，spotLight.shadow.camera.far 设置得越多，阴影就越模糊.

Keep in mind that the more you set spotLight.shadow.camera.far the more that shadow will be fuzzy and blury.

你可以随时检查这个例子中的threejsthreejs 示例

You can always check the threejs on this example threejs example

这篇关于ThreeJS奇怪的条纹阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！