Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/temmmus/moon
This is a simple application that displays a rotating 3D model of the Moon in the browser. The app demonstrates how to integrate Three.js with React for rendering interactive 3D content.
https://github.com/temmmus/moon
react threejs typescript vite
Last synced: 4 days ago
JSON representation
This is a simple application that displays a rotating 3D model of the Moon in the browser. The app demonstrates how to integrate Three.js with React for rendering interactive 3D content.
- Host: GitHub
- URL: https://github.com/temmmus/moon
- Owner: temmmus
- Created: 2024-09-13T04:57:16.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-10-07T04:45:21.000Z (4 months ago)
- Last Synced: 2024-12-07T06:08:10.201Z (2 months ago)
- Topics: react, threejs, typescript, vite
- Language: TypeScript
- Homepage: https://temmmus.github.io/moon/
- Size: 16.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The Moon
This is a simple application that displays a rotating 3D model of the Moon in the browser. The app demonstrates how to integrate Three.js with React for rendering interactive 3D content.
## Features
- 3D Model: Displays a rotating 3D model of the Moon.
- Interactive Scene: Explore the Moon's surface in a web browser.
- Smooth Animation: Uses Three.js to create smooth rotation and rendering.
## Live Demo
You can view the live demo of this project on GitHub Pages: [GitHub Pages Link](https://temmmus.github.io/moon)
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/temmmus/moon.git
```
2. Navigate to the project directory:
```bash
cd moon
```
3. Install the dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm run dev
```
5. Open your browser and go to link from console.
## Technologies
- **[React](https://react.dev/)**: A JavaScript library for building user interfaces, particularly well-suited for creating interactive and dynamic web applications.
- **[Three.js](https://threejs.org/)**: A JavaScript library that simplifies the creation and rendering of 3D graphics in the browser, enabling the development of complex 3D scenes and animations.
- **[TypeScript](https://www.typescriptlang.org/)**: A superset of JavaScript that adds static types.
- **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)**: Markup language for structuring web pages.
- **[CSS](https://www.w3.org/Style/CSS/)**: Stylesheet language for styling web pages.
- **[Vite](https://vitejs.dev/)**: A build tool and development server that provides fast hot module replacement.
## Acknowledgements
This project includes the following third-party resources:
3D Model: "The Moon"
Author: Sebastian Sosnowski
Source: Sketchfab
License: CC-BY-4.0
Credit: This work is based on "The Moon" by Sebastian Sosnowski, licensed under CC-BY-4.0.
gltfjsx
A tool used to convert the GLTF model for use in React. The model was processed with the command npx [email protected] scene.gltf.