javascript - Three.js 中定向灯的阴影范围

标签 javascript three.js

在 Three.js 中,定向光的阴影计算范围是根据定向光源发出的边界框定义的。因此,如果我希望限制计算阴影的距离,我会限制边界框的几何形状。例如:

var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 50, 50, 50 );
directionalLight.intensity = 0.5;
directionalLight.castShadow = true;
directionalLight.shadowCameraLeft = -10;
directionalLight.shadowCameraRight = 10;
directionalLight.shadowCameraTop = 10;
directionalLight.shadowCameraBottom = -10;

shadowCamera 变量可以调整为创建阴影时距光源 FOV 的距离。我希望这个边界框跟随用户相机,以便将阴影渲染到距相机一定的距离。

由于边界框几何形状基于光源相对于场景原点(或目标)的位置,因此不可能仅将边界框移动到相机所在的任何位置来创建我想要的效果。

相反,我尝试用相机移动光源,假设边界几何体相对于相机的位置。这不起作用,因为我似乎无法设置定向光的目标,它总是试图指向原点,所以如果我改变光的位置,它基本上会改变它的方向。

例如,以下内容不执行任何操作:

directionalLight.target.position.set(100,100,100);

如果上述方法有效,理论上我可以相对彼此移动定向灯位置和目标以保持其 Angular 恒定,并且可能实现我想要的效果,但它不起作用。

有什么想法如何创建阴影范围或者为什么上面的方法不起作用吗?

最佳答案

DirectionalLight.target 是灯光的属性,但它不是场景图的一部分,因此目标的矩阵不会更新。

如果场景中有一个对象作为目标,则不会有问题。

light.target = myObject;

三.js r.73

关于javascript - Three.js 中定向灯的阴影范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34571289/

相关文章:

javascript - 三.js、WebGl对象位置

javascript - 如何从 AlloyUI 表单生成器中提取结构?

javascript - 将十进制转换为十六进制缺少填充的 0

javascript - HTML 从文本区域获取输入并将其传递给我的 Javascript 函数

javascript - 类型错误 : pos is undefined error

javascript - THREE.js 从 3D 矢量转换为 2D 像素位置,解释 z 坐标

ios - Safari 在 Three.js 中使用 webgl 的局限性

Javascript 真/假函数

javascript - Three.js - 如何围绕 Vector3 点旋转相机?

javascript - Three.js 三.交互 三.transformControls