Three.js Particles - Falling Snow
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?!
Nice job @tussiez! :)
@RolandJLevy Thanks!
Really cool! And the background is 3D! Did you use google maps?
How do you make the camera?
@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
@tussiez Yeah but you can't move or anything (I used it when I tried out THREEJS).
Oh, I see you use orbital controls...
@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
@Baconman321 Yeah
@Baconman321 Didn't see your comment until after I wrote the othe r one lol
@tussiez Yeah, it's pretty cool. I think threeJS isn't too hard until you go into the math required for some games...
@Baconman321 Yup!
There is a background to the snowflake image...
@PikachuB2005 Yes, this is a transparency bug in Three.js. Fortunately you can only tell if you look for it..
@tussiez okay, I'll just ignore it =P
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 :)
@geraldgehrke :) Feel free to ask for help!
I wrote this in one hour - not trending-worthy!
@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).
@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.
@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 :)
@geraldgehrke
Cool!
This reminds me of the snowstorm craze last year lol
also, how did ya make it a 360-degree view?
@CyberHacker101 It's 3D
@CyberHacker101 C a n a d a
Cool! (lol I managed to crash my computer in a few seconds)
Awesome job
@CyberHacker101 Thanks!