Casting Shadows and Casting Light in three.js
Last updated: January 15, 2017
Three.js Version: r85
Casting shadows is a little tricky in WebGL because the rendering can become expensive. To cast shadows, you need to choose DirectionalLight
or SpotLight
and enable the renderer, light and objects.
Here’s a great article on lights, cameras and casting shadows from CJ Gammon:
Lights can really make the difference between a seemingly flat scene and a visual masterpiece. Think of any photo-realistic painting or photograph and then imagine it with poor lighting and the impact is just not the same. Cameras change the way we view our scenes altogether, think of the different types of lenses photographers use and how they can influence the perspective and depth of a photo. Lights do not work on all materials. Lights do work with MeshLambertMaterial, MeshPhongMaterial and MeshStandardMaterial.
Get Email Updates
Enter your name and email to be notified when new tutorials and 3D models are available:
How I Made a 3D Ragdoll Game with JavaScript
Tutorials
advanced, physics, featured, sound, lighting, shadows,
Like most people, I love animated violence. It feels good to break things or knock them over. Maybe it’s to assert our dominance. Maybe it’s to destroy the weak making way for the strong. I don’t know, but here’s how I programmed a bird. ...
Getting Started with three.js
Tutorials
beginner,
Using three.js is a great way to incorporate 3D graphics into your browser whether it’s on a ...
Build a Star Wars Droid in three.js
Tutorials
featured,
I just saw Rogue One, so this next example features a Star Wars like droid. BB-8 may be your only hope… ...