https://github.com/zyxxie-creator/react-three.js-example
React project using 3D models on the site
https://github.com/zyxxie-creator/react-three.js-example
react threejs
Last synced: 2 months ago
JSON representation
React project using 3D models on the site
- Host: GitHub
- URL: https://github.com/zyxxie-creator/react-three.js-example
- Owner: Zyxxie-creator
- Created: 2024-05-03T12:07:47.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-06T09:38:21.000Z (4 months ago)
- Last Synced: 2025-04-10T00:57:30.259Z (2 months ago)
- Topics: react, threejs
- Language: JavaScript
- Homepage:
- Size: 61.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React: Working with 3D Graphics
This repository explores the integration of 3D graphics into React applications. We will be utilizing the following libraries and tools:
## Libraries
- **Three.js**: A JavaScript library that simplifies the use of WebGL.
- **React Three Fiber**: An abstraction over Three.js for React, providing components for 3D rendering.
- **React Three Drei**: An abstraction over React Three Fiber, offering a set of helpful functions and components.
- **glTF Pipeline**: A command-line interface (CLI) for optimizing glTF files.
- **glTFJSX**: A CLI for converting glTF models into React components.
## Features
- Seamless integration of 3D graphics into React applications.
- Utilization of powerful 3D rendering libraries like Three.js and React Three Fiber.
- Optimization of 3D assets using the glTF Pipeline.
- Conversion of 3D models into reusable React components with glTFJSX.
- Exploration of advanced 3D techniques and interactions.
## Getting Started
### Installation
1. Clone the repository:
- `git clone https://github.com/Zyxxie-creator/react-three.js-example`
2. Install dependencies:
- `cd react-three.js-example`
- `npm install`
3. Start the project:
- `npm start`
4. Access the project in your browser at `http://localhost:3000`.
### Usage
1. Open the project in your preferred code editor.
2. Explore the code and modify it as needed.
3. Run the project using `npm start`.
4. View the project in your browser at `http://localhost:3000`.
## Contacts
#### **Github**
- [@Zyxxie-creator](https://github.com/Zyxxie-creator)
##### **Telegram**
- [@Zyxxie](https://t.me/Zyxxie)