[Super Introduction] Easy even for beginners! Build a 3D environment for TypeScript x React Three Fiber with Vite!

The URL has been copied!

Recently, on the web, we have seen more and more interactive and beautiful 3D representations. For example, 3D animation backgrounds, game-style designs, and even next-generation interfaces. At first glance, these things may seem like they require advanced technology, but React Three Fiber , you can create a 3D world with amazing ease just by knowing React.

However, there are still few teaching materials that can be easily learned about 3D development using React Three Fiber and TypeScript.

React Three Fiber is fully compatible with the React ecosystem and is a library that lets you maximize the power of Three.js with React. However, even reading the official documentation is a bit of a hurdle for beginners.
TypeScript is becoming an essential tool for increasing safety and efficiency, but few specific commentary articles can be found in conjunction with React Three Fiber.

carefully explain the combination of React Three Fiber and TypeScript so that even beginners can understand it without any difficulty

We will continue to create lessons and works from TypeScript x React Three Fiber in the future!
We will be making an announcement on YouTube, so please subscribe to our YouTube channel and wait for notifications!

📺 Watch YouTube : You can watch it from this link

YouTube

Hack Lab. 256 Share your videos with friends, family and people all over the world

TypeScript x React Three Fiber

If you'd like to know what React Three Fiber can do, please refer to the following!
We have easy-to-use works available!

Click here for works using React Three Fiber

table of contents

Introducing technical elements: Tools and libraries to use in this project

You can change the tools and libraries you use to one that is easy to use for yourself, but this project will explain this assumption.

VSCode

A free code editor provided by Microsoft.
It doesn't need to be VSCode, but there are many extensions, so I recommend it.
It is also recommended to include ESLint or Prettier.

Node.js

A JavaScript built on Chrome's V8 JavaScript engine .
You can run JavaScript code outside of your browser.
This is explained based on the assumption that it is already installed, so please download it from
https://nodejs.org/ja *We recommend downloading the long-term stable version of LTS.

Vite

A build tool for modern web projects. It is characterized by its fast and lightweight
The previously used "CRA (create-react-app)" is not listed on the official website, and has become an old technology.
From now on, Vite should be the best option when creating apps with React.

React

This is a JavaScript library for building a UI (user interface). It was developed by Facebook and is still used in many web apps today.

Three.js

A JavaScript library for easily creating 3D graphics. It abstracts the complex operations of WebGL and enables intuitive 3D development.
It's easy to create 3D graphics and is easier to use than direct WebGL operations.

React Three Fiber

This is a library that allows Three.js to be used with React. It combines React's component structure with Three.js' 3D engine.
Three.js can be used in the React development style, allowing for intuitive and efficient development.

React Three Drei

A collection of useful utility components for React Three Fiber. It's easy to add the commonly used Three.js features.
Complex Three.js features can be achieved with short code, reducing learning costs.

Build a 3D environment for TypeScript x React Three Fiber with Vite

Create a new React project and build a 3D environment for React ThreeFiber.
The code I will be creating this time is posted on GitHub, so please take a look if you need it.

💾 GitHub Repository : Check the source code at this link

GitHub

GitHub – aazutaku/react-three-fiber-typescript at typescript-x-react-three-fiber-setup Contribute to aazutaku/react-three-fiber-typescript development by creating an account on GitHub.

Building a React x TypeScript environment with Vite

This time I'll be using Vite. If you've been using CRA (create-react-app) a lot, we recommend that you take this opportunity to switch to Vite.

It's easy to do. Run the following under the directory where you want to create the project.

npm create vite@latest

You will be asked to enter and select the project name and framework, so please do the following:

Project name: … react-three-fiber-app Select a framework: › React Select a variant: › TypeScript + SWC

This is the only way to build a React x TypeScript environment.
Try launching the app.

cd react-three-fiber-app npm install npm run dev

I think you can now launch the Vite + React app.

Build a 3D environment for TypeScript x React Three Fiber

Install React Three Fiber in the app you created with Vite.
Use the command below to install the required libraries.

npm install three @react-three/fiber npm install --save-dev @types/three

This alone will allow you to use React Three Fiber, so I'll try displaying the box.
Let's modify App.tsx as follows:

import { Canvas } from "@react-three/fiber"; function App(): JSX.Element { return (<Canvas><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> ) } export default App

You'll see a small box on the left side.

I want to make Canvas the entire screen, so I'll delete App.css and rewrite index.css with the following.

#root { width: 100vw; height: 100vh; } body { margin: 0; }

Now the entire screen is now Canvas.

However, if it continues like this, it won't look like 3D. . .
Let's try modifying the camera position.

The camera shoots a 3D scene from the virtual camera's perspective and displays the results on the screen. Just like with an actual camera, you can set the position , orientation , viewing angle

import { Vector3 } from "three"; import { Canvas } from "@react-three/fiber"; // Constant const INITIAL_CAMERA_POSITION: Vector3 = new Vector3(3, 3, 3); function App(): JSX.Element { return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> ); } export default App;

Do you understand that this makes 3D representation possible?

Introducing React Three Drei

Introducing React Three Drei, a useful collection of utility components for React Three Fiber.
It is a commonly used library because it allows you to easily add the commonly used Three.js functions.

npm install @react-three/drei

That's the only introduction.
I'll try using "OrbitControls." This is a component that allows you to easily move and zoom the camera.

import { Vector3 } from "three"; import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; // Constant const INITIAL_CAMERA_POSITION: Vector3 = new Vector3(3, 3, 3); function App(): JSX.Element { return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } export default App;

Now you should be able to view the box from a free viewpoint like this!

The code I created this time is posted on GitHub, so please check it out too!

💾 GitHub Repository : Check the source code at this link

GitHub

GitHub – aazutaku/react-three-fiber-typescript at typescript-x-react-three-fiber-setup Contribute to aazutaku/react-three-fiber-typescript development by creating an account on GitHub.

If you found this helpful, please subscribe to our channel!

📺 Watch YouTube : You can watch it from this link

YouTube

Hack Lab. 256 Share your videos with friends, family and people all over the world

TypeScript x React Three Fiber

If you'd like to know what React Three Fiber can do, please refer to the following!
We have easy-to-use works available!

Click here for works using React Three Fiber

Share if you like!

The URL has been copied!

Who wrote this article

Taku

This is a blog I started to study information security. As a new employee, I would be happy if you could look with a broad heart.
There is also Teech Lab, which is an opportunity to study programming fun, so if you are interested in software development, be sure to take a look!