How to add a shader to a box geometry in ThreeJS
![Oscar de la Hera Gomez](https://www.delasign.com/CDN/headshots/profile.webp)
![Two flowers that represent ReactJS and ThreeJS side by side, beneath them sits the text "Shader Material in Box Geometry."<br />](https://www.delasign.com/CDN/images/How-to-pass-data-from-a-vertex-shader-to-a-fragment-shader-in-ThreeJS_2023-11-08-155900_pzhv.webp)
A step by step guide on implementing a shader in a 3JS cube using 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/cube-shader-material branch.
git clone git@github.com:delasign/react-redux-starter-project.git
Step One: Setup the Project
![A screenshot of Chrome showing that the plane is now using the shader that we offer in this tutorial.](https://www.delasign.com/CDN/images/Test_2023-11-06-155221_iqgu.webp)
Follow the tutorial below to learn how to create a ThreeJS project that implements a shader on a plane geometry.
Step Two: Update the Code
![A screenshot of VSCode showing the code that we used to display a box geometry in the scene.](https://www.delasign.com/CDN/images/Update-Code.webp)
Update the code to use a Box Geometry.
Step Three: Test
![A screenshot of chrome showing the cube geometry and the shader material.](https://www.delasign.com/CDN/images/Test_2023-11-08-160028_tejp.webp)
Run the code and confirm that the box geometry and shader looks 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.