Create this 3D parallax-style SCROLL ANIMATION with THREE.JS! [FREE CODE | CODEPEN]

JOIN OUR DISCORD! / discord In this tutorial, I show you how you can create this super smooth and parallax-style scroll animation for your website with Three.js, where the camera movement is tied to the user's scroll position!
Get my Gradient HDR Pack to support me! miroleon.gumroad.com/l/gradie...
Previous Three.js Parallax Tutorial • Create this 3D PARALLA...
Previous Three.js Tutorial Gradient HDRs • Level Up Your Renderin...
Previous Three.js Tutorial Introduction • Create this 3D WEB REN...
Previous Three.js Surface Imperfection Tutorial • Improve Your THREE.JS ...
Find the code for this scene - codepen.io/miroleon/pen/GRPpVrd
Get 2 Freebies - miroleon.gumroad.com/l/gradie...
Find the GitHub Repo with the Freebies and a Three.js Example - github.com/miroleon/gradient_...
Find my other artwork on Instagram - / miroxleon
Follow me on Twitter - / miroxleon
For all other links and contact, visit my website - miroleon.de/links
Chapters:
0:00 Introduction
1:06 HTML Setup
1:35 CSS Setup
2:16 JS Setup
2:41 HDR Setup
3:08 Parallax Setup
5:42 Update Scroll Function
6:41 Update Camera on Scroll
8:10 Animate Function
8:36 Outro

[@miroxleon]

Here are a few resources from my previous tutorials that I skipped over in this video! If you want to get a better understanding of the code, make sure to check them out as well!
Lengthier parallax effect description
(1) th-cam.com/video/Y5kJFvQtb-U/w-d-xo.html
Camera Animation with sine and cosine functions
(2) th-cam.com/video/l7zkOM4FvZQ/w-d-xo.html
(3) th-cam.com/video/Y5kJFvQtb-U/w-d-xo.html
(4) th-cam.com/video/6x6h9ALZ_-Q/w-d-xo.html [A slightly different approach without a full camera rotation around the object]
General lengthy Three.js setup explanation
(5) th-cam.com/video/l7zkOM4FvZQ/w-d-xo.html
(6) th-cam.com/video/Muq-VpaPzoE/w-d-xo.html
(7) th-cam.com/video/6x6h9ALZ_-Q/w-d-xo.html

[@d_grums]

Leaving a comment for the algorithm 😬Great video !

[@miroxleon]

Thank you so much! It really means the world to me to have you comment just to support the video in particular and the channel at large! Thanks to people like you I stay motivated to keep creating new tutorials despite all the time and effort that go into them! I hope to see you around the channel in the future!

[@bjkang70]

Awesome :)

[@miroxleon]

Thank you for your kind comment!

[@Aman_yadav1419]

Amazing ❤

[@miroxleon]

Thank you so much for taking the time to leave a comment and for the compliment! I really do appreciate it!

[@Aman_yadav1419]

@@miroxleon your welcome

[@serhiipolyvanyi8981]

Thx a lot for this really amazing lesson, could you please tell how I can put on Codepen my own 3d model?

[@miroxleon]

Thank you for your comment! I haven't talked about that for a while, indeed. I last mentioned this in my first tutorial, I believe. You can check out the section where I talk about it here:
th-cam.com/video/l7zkOM4FvZQ/w-d-xo.html
As I mentioned back then, you can either get a premium subscription to CodePen to host your own files or find another way to host it somewhere else where CodePen still allows access. For me, just having a GitHub repository with the files and using the links to the "raw" files through GitHub works best.
If you haven't used GitHub before and struggle to set this up, just let me know. Maybe I find the time to do a dedicated tutorial for that in the future!
I hope this helps for the moment!

[@aluzprodigy209]

Great video man, subbed and looking forward to more content like this. Have you experimented with Spline? Curious to hear your thoughts on that program. I'm getting into 3D and it seems like a great way to integrate 3D into web design.

[@miroxleon]

Thank you for your kind comment and great question! I personally have only briefly used Spline, as I worked a lot with Cinema 4D already and thus took my experience from there to Three.js and other web projects, but Spline is a great way to start working with 3D, too! It probably is the 3D tool with the lowest entry threshold, so I'd definitely recommend it for that reason. If you want to go more into 3D for its own sake (and not just to use it in web projects), I'd probably prefer Blender after all. But one thing I've learned by working in different 3D software is, that the principles are usually very easy to translate. E.g. once you understand how HDRs in 3D software work, you'll quickly find a way to use them, even if you go into a new software (same for box modeling, etc.). So, if Spline seems like the easiest tool to get started with for the moment, go for it! If your preferences change down the line, it won't be the end of the world as long as you understand the fundamental principles of 3D work!
I also thought about showing Spline in some future tutorials to make it easier for people to follow along and to keep the threshold low for beginners.
Anyway, I hope that helps for the moment! If you have any further questions, don't hesitate to ask again! :)

[@aluzprodigy209]

I appreciate the advice. I'll stay tuned, definitely would like to see some Spline tutorials from you,. Especially with the new Webflow integration features just released. @@miroxleon

[@arindam_chowdhury]

@@miroxleon Do make very basic tutorial on how 3D stuffs work, what are the properties, how they work and all. And then how to create a basic 3D model using Spline using the terminologies explained earlier, so that one can understand the basics properly. I tried doing it once, but the tutorials were not that great for a beginner like me.

[@miroxleon]

​@@arindam_chowdhurythank you for jumping into the conversation to express your interest in the matter! It helps to see that there is serious interest in such a tutorial and your outline helps a lot already! It will be a demanding project breaking all the most important tools and terminologies down but I'll try to get to that as soon as possible! Stay tuned!

[@lmaoyoudumb619]

ur pretty good at explaining things thanks alot, but i wanna how do i stop the model from spinning and place it at a certain angel. And doesnt work on actual sites?
thanks

[@miroxleon]

Thank you for your question! The 3D model is not spinning, but the camera is rotating around it. So, as soon as you take the camera position attributes outside of the animation, it will become static (that way, you can set the angle then). Alternatively, you can also change the rotation property of the loaded model. The theta values that change according to the scroll can be used for virtually any property. So, instead of animating the camera position, you could also affect the fog, size of the model, colour of the model etc. etc. Just play around with it and put the theta values into other properties!
I hope this answers your question. If it doesn't, just let me know and I'll try to clear things up! However, in the end, I personally learn best by playing around with the code. So, feel free to just make some changes in Codepen and see where it leads you! :)

[@faez322]

Please provide react code too

[@liorjjj]

i like you , but in this tutorial i didnt get what you do in the end , you dont show what happend in the end ,thanks

[@miroxleon]

Thank you so much for taking the time to leave your feedback! Yeah, I think I get what you mean. This time, I recorded the references (i.e. how the code changes the look of the rendering) last and edited it in. Perhaps, I assumed that viewers already looked at the Codepen in advance to get a better feeling for the website. But next time, I'll approach it the other way around and focus more on the result than the code then...! It's all a learning process, after all, I haven't been doing this style of video for a long time. Your feedback definitely helps to get a better perspective on the editing process from the vantage point of the viewer. So, again, thank you very much!
If you have any other constructive criticism, don't hesitate to let me know!

[@ManojChauhan-kl3dh]

Actually I want on GL TF model when two or three annotation points are added and when click one of them it should shows narration but when I click on another annotation the camera should towards that point that's it

[@ManojChauhan-kl3dh]

the effect discribed In this video " th-cam.com/video/PIgQzkddVFg/w-d-xo.html "an annotation mark is added in gltf model in threejs,I have tried it by myselt but didn't get proper result .if you would try and make tutorial from very start to end or step by step for it , it woud be great full and thanx in advance

[@miroxleon]

Thank you for your comment and thanks for the effort to share the video for extra context! I did this kind of annotation for another project, but that was for a photosphere. I'm sure I can figure out a way to do this with GLTF models as well...! I'll put it on my list of tutorials to make in the future! Thank you for your suggestion!
PS.: Usually it takes me weeks to make these tutorials, so I hope you find some immediate help if this is for an urgent project. Otherwise, I hope I can help you with my tutorial in the future! For the moment, you might ask ChatGPT or another AI chatbot. I'm pretty sure you'll need something vanilla JS + some basic CSS to create the tooltip and then trigger it by a hover or click in the 3D space of Three.js

[@roekuu]

Should show more visuals when talking about the code. IMO will make it easier and more clear to follow along for instance talking about the Math.sin vs -Math.sin also did not show the final result at the end, which you did in the beginning but it wasn't very clear that this was the effect you are going to showcase.
Also don't understand what is parallax about this animation. "Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight and is measured by the angle or half-angle of inclination between those two lines." in your example you are only viewing one object. So we don't experience a parallax.

[@miroxleon]

Thank you for taking the time to share your feedback! This means a lot to me!
I basically agree with all you say. I left out some of the details in this video, as I discussed them multiple times in my previous videos and didn't want to repeat myself over and over. That is why I refer to the other tutorials throughout the video. I simply didn't anticipate this many new viewers for this video, which is a beautiful issue to have!
So, here are the sections where I refer to previous tutorials and where I explained the details before:
Camera Animation with sine and cosine functions
(1) th-cam.com/video/l7zkOM4FvZQ/w-d-xo.html
(2) th-cam.com/video/Y5kJFvQtb-U/w-d-xo.html
(3) th-cam.com/video/6x6h9ALZ_-Q/w-d-xo.html [A slightly different approach without a full camera rotation around the object]
General lengthy Three.js setup explanation
(4) th-cam.com/video/l7zkOM4FvZQ/w-d-xo.html
(5) th-cam.com/video/Muq-VpaPzoE/w-d-xo.html
(6) th-cam.com/video/6x6h9ALZ_-Q/w-d-xo.html
Lengthier parallax effect description
(7) th-cam.com/video/Y5kJFvQtb-U/w-d-xo.html
I surely learned from that and will try to find a better balance of sharing details while not trying to be too repetitive for long-time subscribers! It's quite difficult to strike the right balance while writing these scripts, but I'll take it as a challenge to grow from this tutorial and make better videos in the future!
As for the parallax definition: yes, you're right. This does not fit a strict definition of what parallax really means. That is why I always refer to it as "parallax-style" and not outright "parallax". This stems from my personal impression when I scroll through CodePen and see people use the term. In my experience, people tend to use it more as a mimicking of movement through three-dimensional space (e.g. having elements on different z-axis). Since there is no apparent background here, the main subject has no object to move in reference to. Thus, perhaps, it doesn't qualify for "parallax" outright. But I wanted people who are searching for movement on scroll through a three-dimensional space to be able to find the video, as I hoped they would find value in this. I hope this isn't too misleading.
I think my future videos will go in different directions again, so perhaps that won't be an issue for those. But I'll try to catch the spirit of the video better in the titles of future tutorials!
I hope my comment helped for the moment! Thank you again for your feedback - I'll try to learn from it!