How to create a React, Typescript & ThreeJS GLSL Vite Project

A step by step guide on creating a GLSL powered React, Typescript & 3JS ViteJS project.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 11/10/2023 at 21:42
Last Updated on 12/22/2023 at 18:13
<p>Three flowers that represent ReactJS, ThreeJS &amp; ViteJS side by side. Beneath them sits "Starter Project."</p>

A step by step guide on creating a GLSL powered React, Typescript & 3JS ViteJS project.

SubscribeDownload Starter ProjectReact, ThreeJS & GLSL Resources

Step One: Create Vite React & Typescript Project

<p>A screenshot of Terminal showing how to setup a React &amp; Typescript, ViteJS project.</p>

Open Terminal and create a project in the chosen directory using the line:

yarn create vite
Discover ViteJS

Give your project a name, select the React framework with the Typescript variant.

Once its generated, set the current directory to that of the project.

cd starter-project

Step Two: Add Dependencies

<p>A screenshot of the dependencies that we added to the ViteJS project.</p>

Run the following line in terminal

yarn add three; yarn add @types/three; yarn add vite-plugin-glsl; yarn add styled-components; yarn add @types/node
Learn more about the vite-plugin-glsl packageLearn more about the three package

Step Three: Start the project

<p>A screenshot of the Package.json showing how we updated dev to start.</p>

In the Package.json, update the "dev" script to "start."

Then, in Terminal, run the line below:

yarn start

Step Four: Create the first ThreeJS scene

<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 create a ThreeJS scene that exhibits a plane that uses a shader.

How to add a shader to a ThreeJS geometry in ReactJS

Step Five: Update the Shader to GLSL

<p>A screenshot of VSCode showing how we updated the vertex and fragment files to glsl.</p>

Convert the vertex and fragment shader to GLSL.

Step Six: Update the Imports

<p>A screenshot of VSCode showing how we updated the imports to use .glsl.</p>

In the Scene, update the imports to .glsl.

Step Seven: Update the Vite Config

<p>A screenshot of VSCode showing how we updated the vite.config.js file to include the vite glsl plugin.</p>

Update the vite.config.js file to make use of the vite-plugin-glsl.

Step Eight: Add the GLSL declaration

<p>A screenshot of VSCode showing the index.d.ts file.</p>

At the root of the project, create a index.d.ts file and add the declarations for the GLSL files.

Step Nine: Update the TSConfig

<p>A screenshot of VSCode that shows the TSConfig file which highlights that the index.d.ts is now included. On the left side it shows that the error from the import no longer exists.</p>

Update the TSConfig to include the index.d.ts file. This should resolve the error in the Scene imports.

Step Ten: Test

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

Confirm that the scene renders 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