Procedural Clouds Extending Three.js' Sprite

February 5, 2020 · View on GitHub

Learn how to simulate a cloud on a Threejs' Sprite using React-Three-Fiber, by Robert Borghesi

Procedural Clouds featured image

Article on Codrops

Demo

Instructions

  • npm install to install dependencies
  • npm run dev to start the server
  • npm run build to create the build

If you want to understand why I used the Sprite material just add /?debug=true in the URL, it will enable the Orbit Controls and it will add some meshes.

Credits

Threejs — React Three Fiber

This is part of two bigger projects made at LOW, you can see them online on LetGirlsDream and 1955Horsebit

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Robert: Twitter,

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2019