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

Three flowers that represent ReactJS, ThreeJS & ViteJS side by side. Beneath them sits "Starter Project."

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

Step One: Create Vite React & Typescript Project

A screenshot of Terminal showing how to setup a React & Typescript, ViteJS project.

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

yarn create vite

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

A screenshot of the dependencies that we added to the ViteJS project.

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

Step Three: Start the project

A screenshot of the Package.json showing how we updated dev to start.

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

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

Follow the tutorial below to create a ThreeJS scene that exhibits a plane that uses a shader.

Step Five: Update the Shader to GLSL

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

Convert the vertex and fragment shader to GLSL.

Step Six: Update the Imports

A screenshot of VSCode showing how we updated the imports to use .glsl.

In the Scene, update the imports to .glsl.

Step Seven: Update the Vite Config

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

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

Step Eight: Add the GLSL declaration

A screenshot of VSCode showing the index.d.ts file.

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

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.

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

Step Ten: Test

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.

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.