seriously the best tutorial on particles, and trust me, I watched a lot of them because I was having a tough time getting mine to work how I wanted, this tutorial is top knotch!
18:28 not necessarily 60 times a second. It is more dependant on your screen refresh rate. This is why a lot of libraries include a wrapper for this which provides a delta time since the last repaint.
It'll depend on the device capacity... So, if your device has higher capacity then higher FPS wouldn't be a problem. On the other hand for low config device, the fps will be lower automatically... Also for updating staff, he uses clock so that the animation don't go faster/slower depending on the device's fps capacity.
There's a logic error with the code that rotates the particle system. ElapsedTime continually grows as the program runs, so if you leave it running for a few minutes, even a small mouse movement makes the system rotate ridiculously fast. I solved this by changing stuff around to use clock.getDelta() instead of clock.getElapsedTime() particlesMesh.rotation.y -= (((mouseY + 100) * 0.0002) * deltaTime) Not the exact same effect, but it doesn't change over time. If anyone has a better solution, please do let me know.
I saw your comment thanks. Can you paste the code snippet exactly how you put it? I tried replacing "elapsedTime" with "deltaTime" as well as replacing "clock.getElapsedTime()" with "clock.getDelta" but it doesn't rotate passively at all.
@@quintonnistico9347 you also need to change the line that changes the rotation to use a += or -= instead of an = since we're now using delta time (which should stay roughly the same each frame) you have to add it to the previous value (hence += or -= depending on whether you want it to rotate left or right)
@Tim Wolf Hi Tim. Thanks for providing us this solution. I added some modifications of my own to make 2 things => 1. Run the initial rotation only once in the beginning. 2. Be able to move the particles in all the 4 directions in the same speed. Code => let mouseX = 0, mouseY = 0, flag = 0; function moveParticles(e) { mouseX = e.clientX / canvas.width * 20 - 10; mouseY = e.clientY / canvas.height * 20 - 10; flag = 1; } const tick = () => { const deltaTime = clock.getDelta(); if(flag == 0) { particlesField.rotation.y += deltaTime * 0.05; } particlesField.rotation.x -= mouseY * deltaTime * 0.008; particlesField.rotation.y -= mouseX * deltaTime * 0.008; renderer.render(scene, camera); window.requestAnimationFrame(tick); }; Here is my Codepen link you can check it out if you want. codepen.io/nishit-sarvaiya/full/gORPjwR
by any chance does/can anyone send me a link of the cross.png file he used for this project? i can't find any good quality ones online. the one i am currently using is a little blurry/opaque. would greatly appreciate it
I downloaded using npm and when I opened the HTML file no torus was on the screen. So, I downloaded the ZIP file and the same thing happened. Not sure what I'm missing. ??
I ran into a strange issue! When I do: if (mouseX > 0) { particlesMesh.rotation.x = mouseY * (elapsedTime * 0.00004) particlesMesh.rotation.y = mouseX * (elapsedTime * 0.00004) } What happens is the mouse rotation of particlesmesh speeds up over time. It starts really slow, but as time goes on it gets faster and faster. Any ideas?
Thanks for the tutorial, one quick question: I've used the particles for a background for a scrolling web-page. How do I prevent the page from being able to scroll upwards for eternity? Have tried a conditional on the mousewheel, but it makes the scrollbar get stuck at the top.
Hey, could someone explain to me why at 12:07 using " - 0.5" places the points on the center of the screen? I really like all the topics of your videos, but I find there is sometimes little or no explainations
Math.random() gives you a float value between 0.0 and 1.0. He substracts 0.5 to have a value in the -0.5 to 0.5 range because the origin is in the middle of the torus.
does anyone have a github with the full version of this? Ive been over mine a few times and it still doesnt work, mainly when adding the if statement for the animation.
i get this when i type cd code - - - - cd : Cannot find path 'C:\Users\Oscar\code' because it does not exist. At line:1 char:1 + cd code + ~~~~~~~ + CategoryInfo : ObjectNotFound: (C:\Users\Oscar\code:String) [Set-Location], ItemN otFoundException + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.SetLocationCommand
threejs api changing every month and dont have a stable one, so the code worked a year ago not currently working =(((
3 года назад
You can download the version you want then put it in your main files, this should help you bro , even if the code you used deprecated, your projects is gonna survive, but of course new versions can mean more security and new methods
excuse me to being so honest but; can't you put screens close to each other which you are reading the code from and you are following your code to? your looks between reading screen and coding screen feels me disturb. like you are explaining something but deeply do not know about what or how it is and just reading to tell anothers... not natural.
lmao - does it really matter? There are very few folks on RUclips coding from the top of their head, and if they are, it DEFINITELY doesn't go over as smooth as this does. You calling that out really didn't make him look bad one bit - it just makes you look like the clown shoe of a prick you are. All the main RUclips creators ALL print their project tutorial code or pull it up on screen and use it for reference during the tutorials, and the ones who dont, have like hour long videos of them thinking which is cool two depending on what type of content your looking for. This video wasn't made based on what 'disturbs' you so dont watch it if that's the case - excuse me for being so honest.
You can make your life easier if you do the posArray like this : const posArray = new Float32Array(5000 * 3).fill().map(() => THREE.MathUtils.randFloatSpread(10))
wont change anything. No color, no picture. I even made tiny png with alpha backs. Nothing. h1, p { flex-basis: 0; flex-grow: 1; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } breaks the code. Anyone know why? I've watched through a few times now.
idk If you've already resolved it, but your problem it's in this line: const cross = loader.load('/cross.png'), you forgot a point -> const cross = loader.load('./cross.png'). And h1,p{} looks good to me.
Enjoying the Three.js content? Subscribe up for more!
Love your Three.js content
can I ask, I don't find the cross.png there is a link?
A tip : watch movies on Kaldrostream. Me and my gf have been using them for watching all kinds of movies during the lockdown.
@Chase Ray Yea, I have been watching on KaldroStream for since november myself :)
I can't run the npm i and npm run dev. I kept getting error 😭
The three.js Series is so amazing😍👍🏻
I love particle systems, looking forward to see what you do with it, will watch later today
frankieeeee is here, big fan of yours man!!! subscribed to your channel and learning alot, actually learning tons from you! you rock Frank!!!
seriously the best tutorial on particles, and trust me, I watched a lot of them because I was having a tough time getting mine to work how I wanted, this tutorial is top knotch!
notch*
32 minute video. Yet it takes me 2 hours to finish since I stare if into the particles. Good stuff
And it all comes back down to a donut, the holy grail of frontend programming
This is exactly what I was looking for to prettify a little solar system in my portfolio. Thank you good sir!
I need more! I'm studying that at the university but now finally I'm learning something!
18:28 not necessarily 60 times a second. It is more dependant on your screen refresh rate.
This is why a lot of libraries include a wrapper for this which provides a delta time since the last repaint.
It'll depend on the device capacity... So, if your device has higher capacity then higher FPS wouldn't be a problem. On the other hand for low config device, the fps will be lower automatically... Also for updating staff, he uses clock so that the animation don't go faster/slower depending on the device's fps capacity.
How perfect that I discovered this video! I was literally thinking of making a particle donut as a background for my website.
Please provide more three js content.your contents are amazing
Thank you Sir. I have never seen like this videos onThree.js.👌🏻
It would be so cool to mix particles and some noise/random movements
Thank you! This is very helpful. Looking forward for more Three.js tutorials! :)
Thank you! This is an awesome and easy to follow tutorial. Learned a lot from it.
Can't wait for the next one
Wow - I learned a ton, thank you so much for sharing!
Some very nice effects, thanks ! Would love to see some text exploding into particles or vice versa.
I managed to make a animating text!! Thank you! 😆
Extremely useful and well done. Thanks a lot!!!!!
Thank you a lot, I'm learning this library thanks to you, maybe later I''mma doing my own tutorial to the Spanish community
So interesting! I love ThreeJs 😍👍🏻
The keyboard sounds are satisfying
Using elapsed time makes the particles move faster the more time that passes.
How do we replace the cross.png with a different png?
Please keep this going
Great job ! Can you do a tutorial to explain how to interact with particules on an image ?
love your chanel, thank you!!!!!😍
There's a logic error with the code that rotates the particle system. ElapsedTime continually grows as the program runs, so if you leave it running for a few minutes, even a small mouse movement makes the system rotate ridiculously fast.
I solved this by changing stuff around to use clock.getDelta() instead of clock.getElapsedTime()
particlesMesh.rotation.y -= (((mouseY + 100) * 0.0002) * deltaTime)
Not the exact same effect, but it doesn't change over time. If anyone has a better solution, please do let me know.
Appreciate this!
I saw your comment thanks. Can you paste the code snippet exactly how you put it? I tried replacing "elapsedTime" with "deltaTime" as well as replacing "clock.getElapsedTime()" with "clock.getDelta" but it doesn't rotate passively at all.
@@quintonnistico9347 you also need to change the line that changes the rotation to use a += or -= instead of an = since we're now using delta time (which should stay roughly the same each frame) you have to add it to the previous value (hence += or -= depending on whether you want it to rotate left or right)
@Tim Wolf Hi Tim. Thanks for providing us this solution.
I added some modifications of my own to make 2 things =>
1. Run the initial rotation only once in the beginning.
2. Be able to move the particles in all the 4 directions in the same speed.
Code =>
let mouseX = 0,
mouseY = 0, flag = 0;
function moveParticles(e) {
mouseX = e.clientX / canvas.width * 20 - 10;
mouseY = e.clientY / canvas.height * 20 - 10;
flag = 1;
}
const tick = () => {
const deltaTime = clock.getDelta();
if(flag == 0) {
particlesField.rotation.y += deltaTime * 0.05;
}
particlesField.rotation.x -= mouseY * deltaTime * 0.008;
particlesField.rotation.y -= mouseX * deltaTime * 0.008;
renderer.render(scene, camera);
window.requestAnimationFrame(tick);
};
Here is my Codepen link you can check it out if you want. codepen.io/nishit-sarvaiya/full/gORPjwR
@@nishitsarvaiya1474 this worked for me! thanks!
you're a great teacher!!!! thank you!!!
by any chance does/can anyone send me a link of the cross.png file he used for this project? i can't find any good quality ones online. the one i am currently using is a little blurry/opaque. would greatly appreciate it
so yours actually loaded???? I dont get it smh
great tutorial, thanks !
About time. I waited so long for this.
Keep it coming 😏😏😏😏
I downloaded using npm and when I opened the HTML file no torus was on the screen. So, I downloaded the ZIP file and the same thing happened. Not sure what I'm missing. ??
I ran into a strange issue! When I do: if (mouseX > 0) {
particlesMesh.rotation.x = mouseY * (elapsedTime * 0.00004)
particlesMesh.rotation.y = mouseX * (elapsedTime * 0.00004)
}
What happens is the mouse rotation of particlesmesh speeds up over time. It starts really slow, but as time goes on it gets faster and faster. Any ideas?
Check out my comment above.
Thanks for the tutorial, one quick question:
I've used the particles for a background for a scrolling web-page. How do I prevent the page from being able to scroll upwards for eternity?
Have tried a conditional on the mousewheel, but it makes the scrollbar get stuck at the top.
make a series on react-three-fiber
Would using instancedBufferGeometry have further improved performance here?
Blender Guru,, proud of your donut
how can I make this movements for the particlsesMesh more smoother
BTW absolutely Love your content! Lots of Love from India
Please use bigger font so we can see it.
Agree, VS code seems a bit blurry in this vid so hard to read
I wonder if there will be a course for custom shaders
11:43 I can feel your pain bro
Is there an advantage to adding GSAP CDN and code in html vs the js file?
Great Tut. What if I have an existing project and want to use this on one of my existing pages. Is this possible?
Manually imported dependencies if anyone else is wondering
niceeeee that would look great on my website
"Obviously that doesn't do shit" SUBSCRIBED
Hey, could someone explain to me why at 12:07 using " - 0.5" places the points on the center of the screen?
I really like all the topics of your videos, but I find there is sometimes little or no explainations
Math.random() gives you a float value between 0.0 and 1.0. He substracts 0.5 to have a value in the -0.5 to 0.5 range because the origin is in the middle of the torus.
@@catalin1122 thanks a lot! Love the escape the fate pic heh
@@edenmyson6401 you're welcome. Love your synthwave pic as well!
The CSS/HTML part at the end isnt working for me. Only the line is visible. I cant figure out why...
Does it still work with the newer gsap version?
Do you recommend using shaders or GSAP for animation?
I recommend using both, depending on the objective. So, it all depends on what the goal is!
how can I add a background image to an 3d object
Fantastic :)
which theme for vs code are you using please bro if anybody knows reply me thanks in advancde :D
checkout former videos in last week
material theme
does anyone have a github with the full version of this? Ive been over mine a few times and it still doesnt work, mainly when adding the if statement for the animation.
i get this when i type cd code
-
-
-
-
cd : Cannot find path 'C:\Users\Oscar\code' because it does not exist.
At line:1 char:1
+ cd code
+ ~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:\Users\Oscar\code:String) [Set-Location], ItemN
otFoundException
+ FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.SetLocationCommand
would be great if smbd could share cross.png file,
threejs api changing every month and dont have a stable one, so the code worked a year ago not currently working =(((
You can download the version you want then put it in your main files, this should help you bro , even if the code you used deprecated, your projects is gonna survive, but of course new versions can mean more security and new methods
Wow cool can we use our own images
+1 for the Akron shirt #akronthefup
where is the cross.png ? :")
scam
@@pritishprusty3325 😂😂
too cool
Can we have the source code ?
anyone else got the same problem where you can't add a map of the texture to the PointsMaterial?
yes, i resolve it writing all in one line: const cross = new THREE.TextureLoader().load('./sound-waves.png');
Make three js 3D slide show cloth image
Hairy Gary
mobile responsive?
excuse me to being so honest but;
can't you put screens close to each other which you are reading the code from and you are following your code to? your looks between reading screen and coding screen feels me disturb. like you are explaining something but deeply do not know about what or how it is and just reading to tell anothers... not natural.
lmao - does it really matter? There are very few folks on RUclips coding from the top of their head, and if they are, it DEFINITELY doesn't go over as smooth as this does. You calling that out really didn't make him look bad one bit - it just makes you look like the clown shoe of a prick you are. All the main RUclips creators ALL print their project tutorial code or pull it up on screen and use it for reference during the tutorials, and the ones who dont, have like hour long videos of them thinking which is cool two depending on what type of content your looking for. This video wasn't made based on what 'disturbs' you so dont watch it if that's the case - excuse me for being so honest.
@@unrecited is it your professionality or doing this as a hobby to been so useless like this?
You can make your life easier if you do the posArray like this :
const posArray = new Float32Array(5000 * 3).fill().map(() => THREE.MathUtils.randFloatSpread(10))
Thank you. Looks a lot better
wont change anything. No color, no picture. I even made tiny png with alpha backs. Nothing.
h1,
p {
flex-basis: 0;
flex-grow: 1;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
breaks the code.
Anyone know why? I've watched through a few times now.
idk If you've already resolved it, but your problem it's in this line: const cross = loader.load('/cross.png'), you forgot a point -> const cross = loader.load('./cross.png'). And h1,p{} looks good to me.