23a How to make falling snow three.js

Описание

Learn how to make falling snow in three.js using BufferGeometry and Points.
Learn how to set attributes of BufferGeometry in three.js.
Learn how to access attributes and manipulate arrays in BufferGeometry in three.js.

Timestamps:
00:00 Intro/demo
00:08 To do list
00:22 Get snowflake image with transparent background
00:33 Declare global variables and describe BufferGeometry in three.js
02:35 Make snowflake geometry attributes: position and velocity three.js
04:33 Make snowflake material and create Points for snowflakes three.js
05:55 Animate loop
06:07 How to access snowflake position and velocity from arrays in BufferGeometry three.js
06:47 How to change position of snowflakes in BufferGeometry three.js
07:39 How to check if snowflake is below ground and reset position three.js
08:04 How to update BufferGeometry position array using needsUpdate property three.js

Resources:
BufferGeometry doc:
https://threejs.org/docs/?q=buffer#api/en/core/BufferGeometry

BufferAttribute doc:
https://threejs.org/docs/#api/en/core/BufferAttribute

Points doc:
https://threejs.org/docs/#api/en/objects/Points

Points Material doc:
https://threejs.org/docs/#api/en/materials/PointsMaterial

Three.js Snow Sprites Example: (snow does not fall)
https://threejs.org/examples/?q=snow#webgl_points_sprites

Free snowflake images:
http://clipart-library.com/free/snowflake-png-transparent.html
https://www.flaticon.com/
https://commons.wikimedia.org/wiki/Category:Snow_flake_icons