@@pixeljuggler No :) I'm not sure what you mean by event listener being hoisted. Variable and function declarations hoist, there's no declaration at the event listener
You set the same id and class for the text element. It doesn't cause problems because you're not targeting both in JS, but you could have used only one for CSS and JS.
@@RaduCana It is true, that I could have used only one of those, but that's more of an optimization. I use the id for accessing it from JavaScript and the class to style it from CSS. I could indeed use an id or a class for both. Still, that's not the bug I had in mind :)
Thank you! I also just finally invested in a better microphone and learned a bit about how to edit sound properly, so the next one is going to be even better :)
Hiiiiiiiiiiii hunor!! Great and Advanced as usual, Am totally ready for all the maths and physics you're chopping this year.. wishing you a wonderful 2022 Hunor!
Great tutorial! If you want to keep your HTML super clean you can move the script element to the head and add a "defer" attribute. It has the same effect as it loads the script but executes it only after the DOM was parsed.
Question - if the animate function is called recursively , will the browser able to detect the click event of the txt . the toggle works in Chrome , but in Safari the txt toggle click event is not getting called as the animate function is running. any comment ? btw thanks for this video @HunorMartonBorbely
Hmm, that's interesting. Great catch! The animation loop should not interfere with the event handling. The animation loop has a similar behavior to recursion, but it's not synchronous, so event handlers should work without any issue between two animation frames. However, it seems the *click* event handler in Safari does not work on this element for some reason. It works if you replace it with the *mousedown* event. Updated the code on CodePen
Hey Hunor glad to hear you again ? Do you have some project in mind for this channel ? May I suggest you some idea for future video ? I don't know if you have hear of the game monument valley th-cam.com/video/tW2KUxyq8Vg/w-d-xo.html but I think it could be a good video to make a small game Like an M.C. Escher-inspired maze with three.js keep it up
Hi Sonia, I'm glad to hear that. Ideas I have, what I don't have is time really :) I know Monument Valley, but that's actually quite a complex game if you think about it. I have another mobile game in my plans with Three.js, so stay tuned. Hopefully it comes out in January :)
There's a bug in the code in this video. Can you spot it? Why doesn't it cause any trouble?
Does it have something to do with the event listener being hoisted?
@@pixeljuggler No :) I'm not sure what you mean by event listener being hoisted. Variable and function declarations hoist, there's no declaration at the event listener
@@HunorMartonBorbely Yep. Brainfart from me.
You set the same id and class for the text element. It doesn't cause problems because you're not targeting both in JS, but you could have used only one for CSS and JS.
@@RaduCana It is true, that I could have used only one of those, but that's more of an optimization. I use the id for accessing it from JavaScript and the class to style it from CSS. I could indeed use an id or a class for both. Still, that's not the bug I had in mind :)
Not only an excellent tutorial in terms of content presented, but also beautifully produced and narrated.
Thank you! I also just finally invested in a better microphone and learned a bit about how to edit sound properly, so the next one is going to be even better :)
Hiiiiiiiiiiii hunor!! Great and Advanced as usual, Am totally ready for all the maths and physics you're chopping this year.. wishing you a wonderful 2022 Hunor!
Thanks, and happy new year!! I'm slow as usual, but still on the way with new stuff!
Cool example, thnaks for video
Wow! Nice tutorial. Thanks, a lot.
You are welcome. I made a new tutorial site in the meanwhile. Check out SVG-tutorial.com for more :)
Great tutorial! If you want to keep your HTML super clean you can move the script element to the head and add a "defer" attribute. It has the same effect as it loads the script but executes it only after the DOM was parsed.
That is a good point, I forgot about that. Thanks!
Love your tutorials man! :)
Glad to hear it!
Question - if the animate function is called recursively , will the browser able to detect the click event of the txt . the toggle works in Chrome , but in Safari the txt toggle click event is not getting called as the animate function is running. any comment ?
btw thanks for this video @HunorMartonBorbely
Hmm, that's interesting. Great catch! The animation loop should not interfere with the event handling. The animation loop has a similar behavior to recursion, but it's not synchronous, so event handlers should work without any issue between two animation frames.
However, it seems the *click* event handler in Safari does not work on this element for some reason. It works if you replace it with the *mousedown* event. Updated the code on CodePen
Thank you @@HunorMartonBorbely !
Hi Hunor do you plan any video in the next coming month ?
I really appreaciate your video on three.js
Cheers
Hey there, Yes I took a break from this. But I'm planning to come back the next months :)
is is possible to export the animation as video?
I'm not sure. But you can always use a screen recording :)
this project is so cool
Thank you :)
Video very interesting, but it’s a pity that the audio is very low
You mean it is quiet?
🔥🔥🔥
Hey Hunor glad to hear you again ?
Do you have some project in mind for this channel ?
May I suggest you some idea for future video ?
I don't know if you have hear of the game monument valley th-cam.com/video/tW2KUxyq8Vg/w-d-xo.html
but I think it could be a good video to make a small game Like an M.C. Escher-inspired maze with three.js
keep it up
Hi Sonia, I'm glad to hear that. Ideas I have, what I don't have is time really :) I know Monument Valley, but that's actually quite a complex game if you think about it. I have another mobile game in my plans with Three.js, so stay tuned. Hopefully it comes out in January :)
@@HunorMartonBorbely am praying it comes out in January!!
@@stanleychukwu7424 fingers crossed 🤞