Dive into building 3D desktop applications using Tauri, a Rust-based framework that enables running web applications on Mac, Windows, and Linux. Learn to create a new 3D web application using React Three Fiber (R3F) and Three.JS, while integrating Theatre.JS for scene editing and animation. Explore Tauri's capabilities for desktop interaction, including message dialogs and file system operations. Follow along as the tutorial covers installing Tauri, scaffolding a React app, exploring the app structure, compiling and running the application, calling Rust functions from React, creating a React Three Fiber app, implementing hot loading, and working with Theatre.JS. Gain hands-on experience with avatars, GLB files, animation timelines, and saving/loading editor settings as JSON. Conclude by learning how to load the Tauri app as a web application using Vite, Theatre.JS, and React.
Easily Build 3D Desktop React Apps Using Tauri, Rust, TheatreJS and React Three Fiber
Overview
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
Related Courses
-
The Complete React Bootcamp 2023 (Updated)
-
3D-fying Websites Using React Three Fiber - From Setup to Deployment
-
Build and Deploy a 3D Portfolio with React.js and Three.js - Beginner Tutorial
-
Awesome 3D Shattering Effect Tutorial - Next.js 14 with React Fiber and THREE.js
-
How to Add 3D Models to Website Using React Three Fiber
-
Build and Deploy an AI-Powered 3D Website Using React - 2023 Three JS Course Tutorial for Beginners
Related articles
Reviews
5.0 rating, based on 1 Class Central review
-
Marcel Cedric EbelleI 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
