Description of the problem
In creating a shadow for one scene, the basic processes include creating an available light, a cast shadow object, a receive shadow object. The problem I met is in the light’s part.
I create a spotlight with specifying its target to be a cube, adding the shadow camera to one
camerahelper and then rendering them, but results seem different in two different three.js versions. The grammar and APIs I obeyed is the newest document in three.js website, can be accessed here.
A code snippet in two different three.js version shows here (the same codes with just different three.js version included):
- jsfiddle – r85, scripted loaded via cloudflare’s CDN
- jsfiddle – r84, scripted loaded via cloudflare’s CDN
I also took some screenshots to show the differences between them:
The abnormal one (r85) with shadow doesn’t displayed in the right place, as well as the shadow camera fixed to vec(0,0,0). The shadow camera scope is emphasized with yellow lines in the picture.
The good (r84) one with shadow displayed in the right position, but the shadow camera still fixed to vec(0,0,0), which I think it’s not supposed to be that, since a good shadow camera should follow the position of its belonged light? (such as the following pic)
It seems r85 can’t display shadow in spotlight normally, but there is no problem in r84; on the other hand, these two versions both have a wrong shadow camera position in spotlight environment.
I didn’t test all the browsers but I think it is apparently not the browser internal issues.
- All of them
- Internet Explorer (Not test)
-  All of them
Hardware Requirements (graphics card, VR Device, …)
Just follow the basic requirements of three.js’ runtime environment is enough to catch this problem.