https://github.com/shahramshakiba/threejs-journey-part01

Embarking on the exciting journey into the world of 3D development to master the art of becoming an expert 3D developer (⚪Three.js).
https://github.com/shahramshakiba/threejs-journey-part01

3d threejs

Last synced: 2 days ago
JSON representation

Embarking on the exciting journey into the world of 3D development to master the art of becoming an expert 3D developer (⚪Three.js).

• Host: GitHub
• URL: https://github.com/shahramshakiba/threejs-journey-part01
• Owner: ShahramShakiba
• Created: 2024-06-09T07:33:30.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-17T08:14:30.000Z (5 months ago)
• Last Synced: 2024-06-18T08:34:14.934Z (5 months ago)
• Topics: 3d, threejs
• Language: JavaScript
• Homepage: https://material-shahramshakiba.netlify.app/
• Size: 6.95 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#    _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" ` .

 



![image](https://github.com/ShahramShakiba/Threejs-Journey-Part01/assets/110089830/d907c79e-5fc4-4082-b68d-384edf304ca1)




For this project, I craft a _captivating scene_, infuse it with vibrant textures, and sculpt three mesmerizing Meshes using distinct geometries – a `sphere`, a `plane`, and a `torus`. 



With an array of Materials at my disposal, I will paint a masterpiece on each Mesh, culminating in an awe-inspiring 3D world brought to life with the brilliance of _`MeshPhysicalMaterial`_.


 
 

![image](https://github.com/ShahramShakiba/Threejs-Journey-Part01/assets/110089830/cf123afd-7707-4322-95ce-e963648e7ea7)

![image](https://github.com/ShahramShakiba/Threejs-Journey-Part01/assets/110089830/bff448ec-845f-4712-a173-10b2462bfb25)




> [!IMPORTANT]

>> - It is crucial to grasp that the project incorporates _"Three.js"_ to build a visually impressive 3D Environment.





> _Which Concepts Have I Covered_: 


_
01. Prepare our scene with Creating 3 different Meshes.
_

_
02. Explore a diverse range of options like `MeshBasicMaterial`, `MeshNormalMaterial`, `MeshMatcapMaterial`, `MeshDepthMaterial`, `MeshLambertMaterial`, `MeshPhongMaterial`, `MeshToonMaterial`, `MeshStandardMaterial`, and `MeshPhysicalMaterial` to fully comprehend the functionality of various materials in 3D graphics.
_ 

_
03. To enhance the scene, include both `ambientLight` and `pointLight`.
_

_
04. Integrate a debug user interface (UI) with the ` lil-gui ` library to improve the user experience and streamline the optimization of material values.
_

_
05. Enhancing the user interface by incorporating a stunning ` environment map ` with dynamic shadows and realistic light reflections
_

_
06. Incorporate various "Textures" to understand how different "Map" properties, such as the `map` itself, `aoMap`, `displacementMap`, `metalnessMap`, `roughnessMap`, `normalMap`, and `alphaMap`, affect functionality.
_

_
07. Explore additional attributes similar to `clearcoat`, `Sheen`, `Iridescence`, and `Transmission` for "MeshPhysicalMaterial" and understand their functionalities
_

 





#### _Give it a go in real-time and give me a Star_       _Materials_  






https://github.com/ShahramShakiba/Threejs-Journey-Part01/assets/110089830/8320e7ae-bc03-4475-9a33-2369a9de5b7e

  
 

***

 ##  Find me around the Web