Skip to content
← Back to Community
Three.js Particles - Falling Snow
Profile icon
tussiez

Three.js Particles - Falling Snow

I was trying to figure out how exactly I would implement weather into SortaCraft, and I gave up earlier since I thought I needed a complex particle system. However, I found out recently that Three.js already has a pretty simple particle system (THREE.Points), so I decided to use that, and test it here.

How to use

Use your mouse to look around (click and drag, or right click too), and mess with the snow using the controls. Press Update after making changes.

Please allow a few seconds for the textures to load.
Enjoy!
EDIT: Why is this on Trending?!

image

Voters
Profile icon
DanielWasiluk
Profile icon
LaneMartin
Profile icon
Unclyscam123
Profile icon
LingWu1
Profile icon
BCP
Profile icon
CyberDaDev
Profile icon
CodingGoose
Profile icon
ThatCoolCoder
Profile icon
RolandJLevy
Profile icon
TalinSharma
Comments
hotnewtop
Profile icon
CyberDaDev

Awesome job

Profile icon
tussiez
Profile icon
JBloves27

Really cool!

Profile icon
tussiez

@JBYT27 Thanks!

Profile icon
JBloves27
Profile icon
RolandJLevy

Nice job @tussiez! :)

Profile icon
tussiez

@RolandJLevy Thanks!

Profile icon
LincolnMiddle

Really cool! And the background is 3D! Did you use google maps?

Profile icon
tussiez

@DSAEvan Got a cubemap from OpenGameArt and set a cubetexture for the scene :) Thanks!

Profile icon
Baconman321

How do you make the camera?

Profile icon
tussiez

@Baconman321 camera = new THREE.PerspectiveCamera(fov,aspect,near,far)
fov = field of view, I like 60-70
aspect = aspect ratio, use "width/height" of canvas
near = near plane of camera, usually use .1
far = max render distance of camera, depends (Usually 500-1000) depends on your needs

EDIT:Dunno why it has a newline after new

Profile icon
Baconman321

@tussiez Yeah but you can't move or anything (I used it when I tried out THREEJS).
Oh, I see you use orbital controls...

Profile icon
tussiez

@Baconman321 For controls, I use OrbitControls from
https://threejs.org/examples/jsm/controls/OrbitControls.js (import with: import {OrbitControls} from (the link) and use with controls = new OrbitControls(camera,renderer.domElement)
That's about it

Profile icon
tussiez
Profile icon
tussiez

@Baconman321 Didn't see your comment until after I wrote the othe r one lol

Profile icon
Baconman321

@tussiez Yeah, it's pretty cool. I think threeJS isn't too hard until you go into the math required for some games...

Profile icon
tussiez
Profile icon
FloCal35

Nice, this is awesome. Merry Christmas @tussiez

Profile icon
tussiez

@FloCal35 Thanks, you too!

Profile icon
PikachuB2005

There is a background to the snowflake image...

Profile icon
tussiez

@PikachuB2005 Yes, this is a transparency bug in Three.js. Fortunately you can only tell if you look for it..

Profile icon
PikachuB2005

@tussiez okay, I'll just ignore it =P

Profile icon
geraldgehrke

Why is it on trending? Maybe because lots of other people like me are trying to get Three.js working on Repl.it & struggling with figuring out the right CDN / project directory structure. Seeing a working example helps. Still don't understand the errors I'm getting though. SMH
Good job :)

Profile icon
tussiez

@geraldgehrke :) Feel free to ask for help!
I wrote this in one hour - not trending-worthy!

Profile icon
geraldgehrke

@tussiez Thanks! Think I got it figured out finally. Took me all day; the brain has been very smooth all week. I switched the CDN to unpkg & copied someone else's paths who was also having issues. Made sure the versions matched and were valid version numbers & it worked (so far).

Profile icon
tussiez

@geraldgehrke
What are you trying to get right? The version?
After I wrote this app, three.js pushed an update that broke it, so this is using an outdated version.

Profile icon
geraldgehrke

@tussiez My main issue was just trying to set it up in a cloud development environment vs. locally. Didn't want to have to download/upload all the examples files & replicate the project structure in the tutorial on the three.js fundamentals website. The CDN recommended there was giving me path issues to anything other than the base three.js file. Once I switched to unpkg, it pretty much worked (minus the copypasta headache with the version numbers which was my fault).

I was using multiple model-viewer elements (built with Three.js) to render individual chess pieces, but having 32 3D canvas elements crashed my phone's browser hard. It was using around 1GB of GPU memory! And they were low-poly models only 4KB each.

I'm hoping switching to a single canvas element via using Three.js directly (instead of Google's custom element) will help with performance. It seems like a good skill to have anyway & I got nothing better to do :)

Profile icon
tussiez
Profile icon
LaneMartin

This reminds me of the snowstorm craze last year lol

Profile icon
tussiez
Profile icon
LingWu1

Screen Shot 0003-04-04 at 12.03.34 AM
Tht is fast and why is there a green image of trees in smack center

Profile icon
tussiez

@LingWu1 It's a 3D demo, click and drag :D - that's a cube!

Profile icon
LingWu1

Yea its cool @tussiez

Profile icon
tussiez
Profile icon
CyberDaDev

also, how did ya make it a 360-degree view?

Profile icon
tussiez
Profile icon
CyberDaDev
Profile icon
tussiez

@CyberHacker101 C a n a d a

Profile icon
[deleted]

Unitys paritcle system but customizable

Profile icon
tussiez
Profile icon
SwaroopBappanad

Cool! (lol I managed to crash my computer in a few seconds)

Profile icon
tussiez