This is a React-based project that renders 3D rotating crystals using Three.js. The project includes optimizations to improve performance.

• Installation
• Usage
• Project Structure
• Technologies Used
• Optimization
• License

To install and run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/JohnImril/dnd.git
   cd dnd

2. Install the dependencies:

   npm install

To start the development server, run:

npm start

This will start the webpack-dev-server on http://localhost:3000 with hot module replacement enabled.

To build the project for production, run:

npm run build

dnd/
├── src/
│   ├── assets/
│   │   └── img/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   └── Button.css
│   │   ├── RotatingCrystals/
│   │   │   ├── RotatingCrystals.tsx
│   │   │   └── RotatingCrystals.css
│   ├── textures/
│   │   └── crystal.jpg.dds
│   ├── models/
│   │   └── scene.glb
│   ├── App.tsx
│   ├── App.css
│   ├── index.tsx
│   └── index.html
├── .babelrc
├── .gitignore
├── package.json
├── tsconfig.json
├── webpack.config.js
└── README.md

• React: A JavaScript library for building user interfaces.
• Three.js: A 3D graphics library that makes WebGL simpler.
• Webpack: A module bundler for JavaScript applications.
• Babel: A JavaScript compiler that allows you to use next-generation JavaScript.
• TypeScript: A strongly typed programming language that builds on JavaScript.

The project includes several optimization techniques:

1. Memoization: React components and functions are memoized using React.memo, useCallback, and useMemo to avoid unnecessary re-renders.
2. Webpack Configuration: The Webpack configuration is optimized for production builds, including minification and code splitting.

The RotatingCrystals component is optimized to reduce rendering delays:

const RotatingCrystals: React.FC = React.memo(() => {});

This project is licensed under the MIT License - see the LICENSE file for details.