我在 Three.js 中的 SpotLights 和阴影做错了 [英] I'm doing something wrong with SpotLights and shadows in Three.js

问题描述

我有一个非常简单的场景，其中有一个 .dae 网格，网格下方有一个 7000*7000 的平面.我希望它被一个高的 SpotLight 照亮，这样网格就会在地面上投下阴影.但是，好像有什么东西坏了！无论我把 SpotLight 放多高，它都不会点亮飞机！此外，它只会稍微点亮网格，而它位于一个小正方形(周长)中.

I have a really simple scene which has one .dae mesh in it, and a 7000*7000 plane underneath the mesh. I'd like it to be lit by a high SpotLight, so the mesh throws a shadow on the ground. But, something seems to be broken! No matter how high I put the SpotLight, it never lights up the plane! Also, it lights the mesh up only a little, while it is in a small square (perimeter).

你可以在这里看到情况:

You can see the situation here:

只要我移动网格(怪物)，它就不会再亮起来.

As soon as I move the mesh (a monster) around, it wont be lit anymore.

这就是我实例化灯光的方式:

This is how I instantiate the light:

// create a spotlight
self.spotLight = new THREE.SpotLight();

// set its position
self.spotLight.position.y = 1000; //I recon it needs to be relatively high so it lights up everything
self.spotLight.position.x = 0; //(0, 0) are the coordinates where the mesh is spawned, and are the center of the plane
self.spotLight.position.z = 0;
self.spotLight.castShadow = true;

飞机是这样制作的:

//The plane.
self.plane = new THREE.Mesh(new THREE.PlaneGeometry(self.groundSize, self.groundSize), new THREE.MeshLambertMaterial({color: 0x5C8A00}));
self.plane.receiveShadow = true;
self.plane.position.x = 0;
self.plane.position.y = -26;
self.plane.position.z = 0;

另外，这里还有一张图，这次我加了很多PointLights:

Also, here's another picture, this time, I've added a lot of PointLights:

你可以看到阴影是如何消失的！

You can see how the shadow still disappears!

现在，我在这里做错了什么?AFAIK，光应该均匀地分散在各个方向！而且，还有一个问题，我似乎无法在场景中添加多个 SpotLights！如果我这样做，一切都会完全变慢 - 这是故意的吗?也许是因为我对所有这些都启用了阴影...

Now, what am I doing wrong here? AFAIK, light should disperse equally in all directions! And also, there is another problem, I seem to be unable to add multiple SpotLights on the scene! Everything slows down completely if I do so - is this intended? Maybe it's because I enabled shadows on all of them...

@Neil，同样的事情也发生在你的代码中！

@Neil, the same thing happens in your code as well!

推荐答案

我已经创建了一个 jsfiddle展示一个带有 Lambert 材质的平面和一个正在投射阴影的旋转立方体，也许你能看到与你不同的地方.

I have created a jsfiddle showing a plane with Lambert material and a rotating cube that is casting a shadow, maybe you can see what is different to yours.

编辑

尝试使用一些参数，我可以通过以下方式停止剪辑:

Try playing about with some of the params, I can stop the clipping on my demo with:

spotLight.shadowCameraFov = 70;

更新演示并移动演示

这篇关于我在 Three.js 中的 SpotLights 和阴影做错了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！