Three.js Shadows Explained | Tutorial for Beginners! (JavaScript)

Follow me on: Patreon: https://www.patreon.com/simondevyt Twitter: https://twitter.com/iced_coffee_dev Instagram: https://www.instagram.com/beer_and_code/ Github: https://github.com/simondevyoutube/ Three JS shadows are really easy to use and enable. In this project we'll explore the different shadow types available in three js, which lights support shadowmapping, and we'll step through the code in JavaScript to add them to a scene. We'll walk through setup at the WebGLRenderer level, choosing the type of shadowing that three js will use, before looking at individual lights, and other options like setting individual mesh instances to cast or receive shadows optionally. This is part in a series of tutorials on Three.js, aimed at helping beginners understand everything from the ground up. This is a beginners course, aimed at people with no background in the subject. We've covered simple setup and basic 3d worlds, and this project should give you a solid understanding of three.js shadow capabilities. The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos. In the video, we cover: * What is shadow mapping, how does it work from a conceptual point of view. * What lights in three js support shadows and which don't. * Mesh shadow configuration. * Breakdown of the shadow types, including BasicShadowMap, PCFShadowMap, PCFSoftShadowMap, and VSMShadowMap * Using castShadow and shadow camera on DirectionalLight, PointLight, SpotLight * How to instantiate and use each in JavaScript. PCF: https://developer.nvidia.com/gpugems/gpugems/part-ii-lighting-and-shadows/chapter-11-shadow-map-antialiasing VSM: http://www.punkuser.net/vsm/