https://github.com/shahramshakiba/particles-p06

Particles ⁞|⁞ Particles are small, individual elements that can be used to create effects like smoke, fire, rain, snow, stars, dust and etc... ⁞|⁞ ⚪Three.js
https://github.com/shahramshakiba/particles-p06

particles threejs

Last synced: 2 days ago
JSON representation

Particles ⁞|⁞ Particles are small, individual elements that can be used to create effects like smoke, fire, rain, snow, stars, dust and etc... ⁞|⁞ ⚪Three.js

• Host: GitHub
• URL: https://github.com/shahramshakiba/particles-p06
• Owner: ShahramShakiba
• Created: 2024-06-20T13:34:38.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T08:12:04.000Z (5 months ago)
• Last Synced: 2024-11-16T03:16:10.070Z (2 days ago)
• Topics: particles, threejs
• Language: JavaScript
• Homepage:
• Size: 42 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#    _Particles_   

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

 


### Introduction to Particles

- Particles are small, individual elements that can be used to create effects like ` smoke `, ` fire `, ` rain `, ` snow `, ` stars `, ` dust ` and other phenomena that involve many small elements interacting in a visually interesting way. 
 

- Particles are often used to simulate systems where it would be _impractical_ or _inefficient_ to use traditional 3D models.

- The good thing with particles is that you can have hundreds of thousands of them on screen with a reasonable frame rate. 
 The downside is that each particle is composed of a plane (two triangles) always facing the camera. 



### Why Do We Need Particles?

Particles are crucial in creating realistic and dynamic effects in 3D scenes. They help in:

1. _Simulating Natural Phenomena_ :

   - Effects like rain, snow, fire, and smoke.

2. _Creating Visual Effects_ :

   - Explosions, magic spells, and other special effects.

3. _Adding Detail_ :

   - Enhancing the visual richness of a scene without heavy computational costs. 




  

### How Particles Work in Three.js

In Three.js, particles are usually created using Points. A particle system involves:

### 1. _`Geometry:`_ 

   - Defines the positions of particles.

~~~~ html

const particlesGeometry = new THREE.BufferGeometry();

const count = 5000;

const positions = new Float32Array(count * 3);

for (let i = 0; i < count * 3; i++) {

  positions[i] = (Math.random() - 0.5) * 10;

}

particlesGeometry.setAttribute(

  'position',

  new THREE.BufferAttribute(positions, 3)

);

~~~~




### 2. _`Material:`_

   - Defines how particles look (color, texture, size).

~~~~ html

const particlesMaterial = new THREE.PointsMaterial({

  size: 0.01,

  sizeAttenuation: true,

  color: '#fdbc08',

});

~~~~




### 3. _`Points:`_

   - Combines the geometry and material to create the particle system.

~~~~ html

const particles = new THREE.Points(particlesGeometry, particlesMaterial);

scene.add(particles);

~~~~





 Feel free to delve into the code as it has been written in a straightforward manner for easy understanding.


 
 

> [!IMPORTANT]

>> ### It is crucial to grasp that Particles:

>> - In Three.js allow you to create stunning visual effects efficiently.

>> - By understanding the basic components—geometry, material, and points — you can build complex and dynamic particle systems to enhance your 3D scenes.

>> - Experiment with different properties and techniques to achieve the desired effects and bring your scenes to life.

 



 

   Simulate 20000 Prticles in a Wave pattern

https://github.com/ShahramShakiba/Particles-Threejs-p06/assets/110089830/392eff23-2b1c-4173-af68-c248666ced0b

  
 

***

 ##  Find me around the Web