/react-three-fiber-learning

Exploration of 3D graphics in React using `react-three-fiber`. This repository serves as a learning journey through various 3D elements and components, enabling a more interactive web experience.

Primary LanguageTypeScript

React Three Fiber Learning

React + TypeScript + Vite + ESLint

Welcome to react-three-fiber-learning, a project aimed at exploring the world of 3D graphics in React using react-three-fiber. This scaffold is powered by Vite, employs react-swc for faster compilation, and is typed with TypeScript. Dive in to discover how to create compelling, interactive 3D web experiences."

Getting Started

  1. Clone the Repository:

    git clone https://github.com/YassineGherbi/react-three-fiber-learning.git

  2. Navigate to the Directory:

    cd react-three-fiber-learning

  3. Install Dependencies:

    npm install

  4. Run the Project:

    npm run dev

For development, the command `npm run dev` will start the Vite server.

Additional Scripts:

  • Build: ```npm run build```` This runs TypeScript compiler followed by Vite's build command.

  • Lint: npm run lint
    Checks your TypeScript files for linting errors.

  • Preview: npm run preview
    Preview the production build locally.

Importing Assets

To import from the public folder, use the following syntax:

import viteLogo from '/vite.svg'

And to import from the src folder, in this case from the assets folder inside src, use the following syntax:

import reactLogo from './assets/react.svg'

Features