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
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. ??
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.
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?
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
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.
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.
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
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
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 TH-cam 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 TH-cam 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😍👍🏻
And it all comes back down to a donut, the holy grail of frontend programming
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
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.
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!!!
I need more! I'm studying that at the university but now finally I'm learning something!
How perfect that I discovered this video! I was literally thinking of making a particle donut as a background for my website.
This is exactly what I was looking for to prettify a little solar system in my portfolio. Thank you good sir!
Thank you Sir. I have never seen like this videos onThree.js.👌🏻
I managed to make a animating text!! Thank you! 😆
How do we replace the cross.png with a different png?
Thank you! This is very helpful. Looking forward for more Three.js tutorials! :)
Please provide more three js content.your contents are amazing
Can't wait for the next one
Wow - I learned a ton, thank you so much for sharing!
Thank you a lot, I'm learning this library thanks to you, maybe later I''mma doing my own tutorial to the Spanish community
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!
It would be so cool to mix particles and some noise/random movements
Thank you! This is an awesome and easy to follow tutorial. Learned a lot from it.
how can I add a background image to an 3d object
I wonder if there will be a course for custom shaders
Would using instancedBufferGeometry have further improved performance here?
Extremely useful and well done. Thanks a lot!!!!!
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. ??
The keyboard sounds are satisfying
Using elapsed time makes the particles move faster the more time that passes.
So interesting! I love ThreeJs 😍👍🏻
Please use bigger font so we can see it.
Agree, VS code seems a bit blurry in this vid so hard to read
Is there an advantage to adding GSAP CDN and code in html vs the js file?
About time. I waited so long for this.
Keep it coming 😏😏😏😏
Please keep this going
love your chanel, thank you!!!!!😍
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!
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
you're a great teacher!!!! thank you!!!
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.
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 job ! Can you do a tutorial to explain how to interact with particules on an image ?
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.
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.
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?
great tutorial, thanks !
how can I make this movements for the particlsesMesh more smoother
BTW absolutely Love your content! Lots of Love from India
Blender Guru,, proud of your donut
Some very nice effects, thanks ! Would love to see some text exploding into particles or vice versa.
would be great if smbd could share cross.png file,
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!
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
make a series on react-three-fiber
where is the cross.png ? :")
scam
@@pritishprusty3325 😂😂
niceeeee that would look great on my website
11:43 I can feel your pain bro
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
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');
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
Fantastic :)
Can we have the source code ?
Wow cool can we use our own images
Make three js 3D slide show cloth image
"Obviously that doesn't do shit" SUBSCRIBED
+1 for the Akron shirt #akronthefup
too cool
mobile responsive?
Hairy Gary
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 TH-cam 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 TH-cam 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.