How to access shadow math in Three.js? There is a scene with DirectionalLight objects and light source. You can see the link.

As you can see in the picture there is a house with a white roof, which is represented by a plane (plane 100x45). On the plane falls the shadow of the surrounding objects.

How can I access mathematics shadows? To get a shadow map for the surface and then solve the seemingly trivial task: to determine whether the point of the surface is in the shadow or not? I read about the version with Raycaster (), but it will not work here, because DirectionalLight source.

  • one
    For the first time I meet such a term - "get access to the mathematics of shadows ." - Kromster
  • So do I. What's THREE.Raycaster() with the THREE.Raycaster() ? With THREE.DirectionalLight() this is even easier to do, since it is not necessary to calculate the vector from / to the source. 1) There is a point on the plane in global coordinates, 2) Take the normalized position vector of the light, 3) At Raycaster() create a beam formed from item 1 and item 2 (the start point and direction), 4) We are looking for the intersection of this beam with objects of the scene, 5) If the array of intersected objects is not empty, then the point is in the shadow. - prisoner849
  • @ prisoner849 Thank you. Created on your advice array pointsOfSurface points of the plane, each element of which is the global coordinate of a point in Vector3. Created a normalized light vector LightVector also in Vector3. Tell me, please, how to create a ray from a point and a normalized vector? and how then to get an array of intersected objects? - Alexander Belyakov
  • @AlexanderBelyakov For starters, carefully read the Raycaster () documentation. Beam creation: .set ( origin, direction ) method. Array of intersected objects: .intersectObjects ( objects, recursive ) method .intersectObjects ( objects, recursive ) . - prisoner849

1 answer 1

Given: a point on the pointOnPlane plane, a normalized vector of the position of the light source (it is also the direction) direction and an array of objects in the sceneObjects scene (the intersection with which you need to find). The definition of finding a point in the shadow fits into a small function:

 var raycasterPoint = new THREE.Raycaster(); var direction = new THREE.Vector3();// for re-use function isShaded(pointOnPlane){ direction.copy(light.position).normalize(); raycasterPoint.set(pointOnPlane, direction); // начало луча и направление var retVal = false; var pointIntersects = raycasterPoint.intersectObjects( sceneObjects ); if (pointIntersects.length > 0) retVal = true; return retVal; }

enter image description here

jsfiddle example.