How to add lights to a standard material in ThreeJS


A step by step guide on an ambient light to a scene in ThreeJS and learning how they adapt the standard material on a plane geometry in ReactJS.
We recommend that you clone our Open Source React-Redux Starter Project, checking out the tutorial/three-js/starter branch and carrying out the steps below. The changes can be found on the tutorial/three-js/lights-standard-material branch.
git clone git@github.com:delasign/react-redux-starter-project.git
Step One: Setup the project

Follow the tutorial below to setup a responsive ThreeJS, ReactJS project that displays a plane in a scene.
Step Two: Update the Material

Update the plane material to a MeshLambhertMaterial using code similar to the one below.
Step Three: Add the Light

Add an ambient light to the scene using code similar to the one below.
To learn more about the types of lights that are available, consult the link below - the light options are on the left menu side bar.
Step Four: Test

Run the code and confirm the light works as expected.
Looking to learn more about ReactJS and ThreeJS ?
Search our blog to find educational content on learning how to use ReactJS and ThreeJS.