How to add lights to a material that uses a shader in ThreeJS

A step by step guide on adding an ambient light to a scene in ThreeJS and learning how they adapt a material that uses a shader on a plane geometry in ReactJS.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 11/06/2023 at 13:19
Last Updated on 11/11/2023 at 10:33
<p>Two flowers that represent ReactJS and ThreeJS side by side. Beneath them sits the text "ReactJS &amp; ThreeJS Lights (Shader Materials)."</p>

A step by step guide on adding an ambient light to a scene in ThreeJS and learning how they adapt a material that uses a shader on a plane geometry in ReactJS.

SubscribeDownload Open Source Starter Project

We recommend that you clone our Open Source React-Redux Starter Project, checking out the tutorial/three-js/plane-shader branch and carrying out the steps below. The changes can be found on the tutorial/three-js/lights-shader-material branch.

git clone git@github.com:delasign/react-redux-starter-project.git
View Repository

Step One: Setup the project

<p>A screenshot of Chrome showing that the plane is now using the shader that we offer in this tutorial.</p>

Follow the tutorial below to setup a responsive ThreeJS, ReactJS project that displays a plane in a scene which implements a material that uses a shader.

How to add a shader to a ThreeJS geometry in ReactJS

Step Two: Add the Light Source

<p>A screenshot of VSCode showing how we added a light to the scene. Code available below.</p>

Add a light to the scene using code similar to the one below.

Please note that it is strongly recommended that you use constants to define the color and position so that these variables can be passed onto the shader and be updated without causing errors due to inconsistent values.

Step Three: Set the Uniforms

<p>A screenshot of VSCode showing how we set the uniforms for the shader.</p>

Within the ShaderMaterial, add uniform values for the light color and position.

Step Four: Update the Vertex and Fragment Shader

<p>A screenshot of VSCode showing the updated code for the vertex and fragment shaders. Code is available below.</p>

Update the vertex and fragment shader to work with the light source.

Vertex Shader

Fragment Shader

If you are looking for a more advanced solution that implements standard GLSL files, please consult the guide below.

How to use GLSL shaders in ReactJS & ThreeJS

Step Five: Test

<p>A screenshot of Chrome showing how the shader takes in the light source.</p>

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.

Search our BlogReact, ThreeJS & GLSL Resources

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe