Implementing Projection Mapping using Threejs Shader Material in React

Sam Kaveh
Sam Kaveh
Mar 17 · 2 min read

A very simple implementation of projection mapping done in React using glsl shaders, works on any typer of surface and also moving or spinning!

The final result will look like this

You can check it out in the following sandbox -> https://codesandbox.io/s/czxbw

A breif look at the scene set up in react:

In just a few lines of code I create the scene for our project as a React component:

First I import the necessary libraries, the CameraHelper from threejs so we can show some gizmos on the camera we use to project the texture.

The react-three-fiber and drei are imported to make our life easier, as they provide the components from three js library in the best possible way readied for React.

Take a look at the whole code and I will explain under the code section each part.

Line 11 and 21 are definitions for the two nice spheres I texture with an earth and a sky texture(just so the scene won't be empty :) )

The real magic happens on line 31 onwards when I use the component I created below by extending the shaderMaterial class, I bring the code below.

What is important here to note is that we need a camera and its coordinates so I define the camera object on line 55 and update the coordinates in the useFrame handle. This information is then fed to the projectedMaterial component called in line 58.

We also need a simple texture and a color for the base of the mesh for the areas that there is no projection done on and these are defined on lines 35 and 37 respectively.

A simple shader to rule them all

The shaderMaterial class is a gateway to any shader implementation in Three js, you can quite easily give all the components you use in your shader as uniforms in the constructor and then provide a fragment and a vertex shader.

Here we get the coordinates from a camera and change the uv coordinates of our texture according to that on each frame.

I hope this was useful for you, please leave comments if you needed more information!

Sign up for Analytics Vidhya News Bytes

By Analytics Vidhya

Latest news from Analytics Vidhya on our Hackathons and some of our best articles! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Sam Kaveh

Written by

Sam Kaveh

Entrepreneur, wanderer, scientist.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Sam Kaveh

Written by

Sam Kaveh

Entrepreneur, wanderer, scientist.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store