Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Easily Build 3D Desktop React Apps Using Tauri, Rust, TheatreJS and React Three Fiber

Chris Hay via YouTube

Overview

ThreeFiber - Introduction to WebGL and Web Assembly - Creating a WebGL shader with Tauri as a React 3 Fiber Component This course will introduce the use of Tauri, an open source framework for creating secure, high performance desktop and web applications with Rust, React and WebAssembly. Participants will learn how to install and scaffold a Tauri React app with create-tauri-app and Cargo. Further, they will explore the generated app, compile and run it, and call Rust functions from React. Additionally, they will learn to create a React Three Fiber based app on a desktop with Tauri and hot load it with Tauri, Vite and React. Additionally, using TheaterJS, they will implement a studio editor with which they can make R3F components editable. They will also learn to work with avatars, GLB's and Drei, animate R3F with the timeline, use message dialogs, create a save dialog, save their scene positions as JSON and load their application with saved settings. Finally, they will learn about WebGL and Web Assembly and create a WebGL shader as a React 3 Fiber component.

Syllabus

- Introduction
- Installing Tauri
- Scaffolding a Tauri React App using create-tauri-app and Cargo
- Exploring the scaffolded Tauri app
- Compiling and running my Tauri Desktop based React Application
- Calling Rust functions from React using Tauri
- Creating a React Three Fiber app on the Desktop with Tauri
- Hot Loading with Tauri, Vite and React
- Introduction to TheaterJS
- Installing Theatre with React and Tauri
- Creating a Studio Editor with TheaterJS, Tauri and React
- Making my React Three Fiber components editable in TheaterJS
- Working with Avatars, GLB's with TheatreJS, R3F, Drei and Tauri
- Animating React Three Fiber with TheaterJS animation timeline
- Using a Message Dialog in Tauri
- Creating a Save Dialog with Tauri
- Saving my Scene positions using TheaterJS and Tauri as JSON to a file
- Loading my application with saved editor settings
- Loading my Tauri app as a web application using Vite, TheaterJS and React

Taught by

Chris Hay

Reviews

5.0 rating, based on 1 Class Central review

Start your review of Easily Build 3D Desktop React Apps Using Tauri, Rust, TheatreJS and React Three Fiber

  • Profile image for Marcel Cedric Ebelle
    Marcel Cedric Ebelle
    I really appreciated the quality of sharing knowledge. Personnaly i discovered a lot of functionnalities Theather, Three and Fiber and i want to know more about it. Especially how to connect backend API and animated sequence on studio

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.