Seb Lee-Delisle

Menu

JavaScript HTML5 Canvas Snow in 3D

Snow storm in JS and HTML

Incredibly, the early bird tickets on my HTML5/JS training course sold out in just 20 minutes today! And to celebrate I thought you might like an early Christmas present – JavaScript HTML5 canvas snow in 3D! :-)

If you want to use this effect on your site, please feel free but PLEASE DO NOT HOTLINK TO MY FILES! Copy the files on github to your own server!

I adapted one of the Mr.doob‘s three.js Particle examples. I’ve extended the particle class and added velocity to update it’s position. Anyone that knows me knows that I’ve been making snow for a while now! Most people’s first approach is to make the snow move left and right but actually you don’t need to do that. If there are lots of flakes all moving in different directions it pretty much has the same effect, and it gives much simpler and more uniform effect.

As ever, the code is fully commented and available on github.

[UPDATE: code has been updated now to work in Three.js revision 46]

This entry was posted in HTML5 Canvas, Particles. Bookmark the permalink.

56 Responses to JavaScript HTML5 Canvas Snow in 3D

Newer Comments → Newer Comments →

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *