Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/modified-materials-p20
Want to add impressive animations to your 3D models without starting from scratch? This project will show you how to enhance your materials easily and enjoyably. ⁞|⁞ ⚪Three.js 🔵GLSL
https://github.com/shahramshakiba/modified-materials-p20
shaders shadow threejs vertex-shaders
Last synced: 2 days ago
JSON representation
Want to add impressive animations to your 3D models without starting from scratch? This project will show you how to enhance your materials easily and enjoyably. ⁞|⁞ ⚪Three.js 🔵GLSL
- Host: GitHub
- URL: https://github.com/shahramshakiba/modified-materials-p20
- Owner: ShahramShakiba
- Created: 2024-07-28T07:12:26.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-28T16:07:30.000Z (4 months ago)
- Last Synced: 2024-07-29T08:37:20.980Z (4 months ago)
- Topics: shaders, shadow, threejs, vertex-shaders
- Language: JavaScript
- Homepage: https://modified-material-shahram.netlify.app/
- Size: 2.46 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
_Modified Materials_ 
### 
_Description_
> To begin with, it is important to note that, this project have been sourced from an exceptional `Three.js Journey` Course.
#### 👤 Instructed by a _proficient_ and _expert educator_ _"Bruno Simon"_ .
## Modified Materials
https://github.com/user-attachments/assets/637cab82-24e5-469d-aea2-80ed418953b2
## Overview
Welcome to the Modified Materials Project! 🚀
- Ever dreamt of adding dazzling animations to your 3D models without starting from scratch? This project will show you how to supercharge your materials in a fun and easy way.
- Ready to transform your creativity into reality? Let's go! 🌟
## The Challenge
> #### Imagine this:
you love the look of your MeshStandardMaterial, but you want to add a cool vertex animation. Do you have to redo everything from the ground up? That sounds exhausting! 😱
### The Solutions
Fortunately, there are two ways to jazz up your material without all that hassle:
> ### 1. Three.js Hooks:
- These nifty hooks let you tinker with shaders and inject your own code seamlessly.
> ### 2. Recreating the Material:
- This involves mimicking the complex Three.js code with includes, extensions, defines, uniform merging, and more. Phew, that's a lot of work!
### Our Approach
We're all about efficiency and fun, so we're choosing the first technique! 🎉
> ### Fun Twist
Picture this: your model's vertices twisting and turning in a delightful way, all while maintaining the default features like light, shadows, textures, normal maps, and more.
By leveraging hooks, we can inject our custom code into the material before it gets compiled. 🌀✨
But wait, there's more! With this approach, you get to keep all the benefits of ` MeshStandardMaterial ` while adding your unique flair. Imagine the possibilities! 🌈
## Why This Project Rocks
Join the Modified Materials Project and unlock:
- #### Hands-On Learning:
Dive deep into Three.js and shader techniques.
- #### Creative Empowerment:
Animate and enhance your 3D models with ease.
- #### Community Collaboration:
Share your work and collaborate with fellow enthusiasts.
### Tech Stack
> #### 1. Three.js:
For rendering 3D graphics and handling complex animations, enabling interactive and visually stunning 3D experiences.
> #### 2. GLSL:
Custom shaders for creating dynamic visual effects and animations, adding a layer of creativity and uniqueness to the models.
> #### 3. HTML/CSS/JavaScript:
Standard web technologies for structuring and styling the project, ensuring it is user-friendly and visually appealing.
### Live Demo
#### Check out the live demo _here_ .
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/coffeesmoke.git
cd coffeesmoke
```
2. Install the dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
## Contributing
#### Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request. Here are the steps to contribute:
### 1. Fork the repository:
+ Click the "Fork" button on the top right of this page to create a copy of this repository in your GitHub account.
### 2. Clone your fork:
```bash
git clone https://github.com/your-username/your-repo.git
cd your-repo
```
### 3. Create a branch:
```bash
git checkout -b my-feature-branch
```
### 4. Make your changes:
+ Implement your feature or fix the bug.
### 5. Commit your changes:
```bash
git add .
git commit -m "Add my new feature"
```
### 6. Push to your fork:
```bash
git push origin my-feature-branch
```
### 7. Create a pull request:
+ Open a pull request on the original repository with a description of your changes.
## Acknowledgements
- Thanks to the Three.js and GLSL communities for their incredible tools and resources.
- Special thanks to all contributors for their time and effort.
### Contact 
> #### If you have any questions or need further assistance, feel free to reach out:
### Support 
> #### If you enjoyed exploring this project, please consider supporting me on GitHub to keep the stars aligned.