javascript - ThreeJS怪​​异条纹阴影

标签 javascript three.js shadow

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

我怀疑 SpotLight 位于 x、y 的中间和 z 轴的顶部。 如果我沿 y 轴仅移动光源 1 个点(房间为 500x300),我会在整个楼层上看到阴影:http://bozoou.com/plocice3D/?moveLight=1 如果我移动光线 1 或 50,也会出现同样的问题。

所有元素都会转换和接收阴影。

最佳答案

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

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;

不断改变这两个值,直到达到目标。

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

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

您可以随时检查此示例中的 Threejs threejs example

关于javascript - ThreeJS怪​​异条纹阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29253464/

相关文章:

javascript - 如何使用 Matterjs 制作烟雾粒子

javascript - AFrame:如何将THREE.LineBasicMaterial放入Aframe中

javascript - 根据当前相机确定网格在视口(viewport)上是否可见

jquery - PNG 透明度问题 - 带有黑色阴影的褪色图像 - IE 中的边框

javascript - 有没有办法比较 json 响应的数组名称?

javascript - Facebook 发送对话框回调不起作用

javascript - Threejs : WebGL 3D text to three. js海洋场景

matlab - 无阴影一维不变图像的实现

java - 映射 Java 的接口(interface)方法

javascript - 如何通过 postMessage 或任何类似函数传递文件对象