Create this 3D PARALLAX-STYLE Landing Page with THREE.JS! [FREE CODE | CODEPEN]
Vložit
- čas přidán 3. 07. 2024
- JOIN OUR DISCORD! / discord In this tutorial, I show you how you can create a 3D parallax-style landing page with Three.js and some interactive typography! Also, let me know in the comments what you think about the new editing style of this video! It's been way too much work, but I hope you enjoy it!
Get my Gradient HDR Pack to support me! miroleon.gumroad.com/l/gradie...
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/MWzxdqr
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
Thanks to the Minneapolis Institute of Art for making the 3D model available in the public domain - skfb.ly/6R7ID
Chapters:
0:00 Introduction
0:40 HTML Setup
1:05 CSS Setup
2:34 JS Setup
2:45 Parallax Effect Setup
3:15 Function updateScale
6:17 Three.js Scene
6:54 Update Camera on Scroll
7:26 Outro
![Level Up Your Renderings with GRADIENT HDRs! [Three.js, Blender, and Co.] [CODEPEN | FREE CODE]](http://i.ytimg.com/vi/Muq-VpaPzoE/mqdefault.jpg)
![Level Up Your Renderings with GRADIENT HDRs! [Three.js, Blender, and Co.] [CODEPEN | FREE CODE]](/img/tr.png)
![FAST, EASY, and FREE Generative AI Tool [Stable Diffusion | Fooocus]](http://i.ytimg.com/vi/RuAuIBCYleY/mqdefault.jpg)
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!
Another parallax-style approach to Three.js
(1) czcams.com/video/oCUlA_aUzHY/video.html
Camera animation with sine and cosine functions
(2) czcams.com/video/l7zkOM4FvZQ/video.html
(3) czcams.com/video/6x6h9ALZ_-Q/video.html [A slightly different approach without a full camera rotation around the object]
General lengthy Three.js setup explanation
(5) czcams.com/video/l7zkOM4FvZQ/video.html
(6) czcams.com/video/Muq-VpaPzoE/video.html
(7) czcams.com/video/6x6h9ALZ_-Q/video.html
I never saw such a detailed, well thought and well presented tutorial ever. You have raised the bar magnitudes above others.
Thank you so so much for your kind comment! I feel like it's way more praise than I deserve, but I won't let that undermine my gratitude for your comment!
As a small sign of gratitude, I want to give a 25% discount on my full Gradient HDR Pack so that you can add some more variation to the scene if you want to fork the code! You can simply use the code "F4WTXGS" at checkout or use the following link! Thanks again, and I hope you enjoy my future work just as much!
miroleon.gumroad.com/l/gradient_hdr_pack/F4WTXGS
@@miroxleon Thanks friend
Astonishing work, these kind of things are what truly make a website unique
Thank you so much for your kind comment! This really means the world to me! Three.js does open so many great opportunities, and I'm keen to keep exploring them in my tutorials in the future!
looks sick, thanks for the work!!
Thank you so much for your kind words! As I say in the video, your support means the world to me!
As a small sign of gratitude, I want to give a 25% discount on my full Gradient HDR Pack, so that you can add some more variation to the scene if you want to fork the code! You can simply use the code "F4WTXGS" at checkout or use the following link! Thanks again and I hope you enjoy my future work just as much!
miroleon.gumroad.com/l/gradient_hdr_pack/F4WTXGS
My man, this is superb content. Can't thank you enough for this.
Thank you so much for your kind comment! This means a lot to me! I hope you find value in my other tutorials as well. More to come soon, so stay tuned!
Totally blown away, such a fantastic detailed tutorial. Thank you so much, and I look forward to learning more from you. Liked and subscribed.
Thank you so much for your kind comment! This really means a lot to me! I'll try to keep creating more helpful and educational content in the future!
You just earned another sub. Keep up the good work!
Thank you, I appreciate it a lot! More to come soon, stay tuned!
Loved this tutorial, Thanks man
Thank you! This means a lot to me! I hope you enjoy my other tutorials just as much!
PS.: a new one just dropped today 👀
brother make a whole video tutorial of three.js man .
Thank you for your feedback! Is there anything in particular that you're interested in? Anything I should focus on in that future tutorial?
In the meantime, you might want to check out my previous Three.js Tutorials, where I focused on different aspects!
In this tutorial, I explain a scene with an animated 3D model and all the basic setup I use in my artwork from Instagram (instagram.com/miroxleon/ ):
czcams.com/video/l7zkOM4FvZQ/video.html
In this tutorial, I explain a bit more about materials in Three.js and how to use surface imperfections:
czcams.com/video/6x6h9ALZ_-Q/video.html
In this tutorial, I explain the Three.js HDR setup in more depth and how you can animate HDRs in Three.js (although HDRs do not natively support the rotation property):
czcams.com/video/Muq-VpaPzoE/video.html
I look forward to creating more tutorials that might answer your questions and needs!
Amazing!
Thank you so much! I hope you find my other tutorials helpful as well!
You just got a new sub 😊 keep the good work up! waiting for your next vids!
Thank you so much! These comments always make my day! I hope you enjoy my other tutorials just as much. A new one just dropped the other day!
@@miroxleon Glad to hear! i will check it :)
thanks for sharing
Thank YOU for your support! I really appreciate it!
subscribed immediately.
Thank you so much! This means a lot to me!
thank you big time
Thank YOU for your kind comment! New tutorials coming soon, so stay tuned!
Amezing brother ❤️ Krishna bless you 🧡🙏🏻
Thank you for your kind comment!
Top!!!
Thank you!
Hi . I purchased your HDR pack but I am not sure how to incorporate it into my project. Great tutorial btw.
Thank you so much for your support! This really means a lot to me! I hope my tutorials help you in finding ways to incorporate them into your own projects. I'll soon publish new tutorials with the Gradient HDRs, too! Basically, any 3D scene (that allows you to use HDRs as light sources) can profit from them. And if you have any further questions, don't hesitate to reach out!
Hi, it would be nice to see what is inside your HDR pack. Could you add some preview on the gumroad page?
Thank you for your feedback! Yeah, adding more visuals has been on my to-do list for a while. I initially wanted to focus on the tutorials to give a bit more context on how to use the Gradient HDRs, but I'll add more visuals to the Gumroad page eventually!
In the meantime, keep in mind that the pack has a 30-day money-back guarantee. So, feel free to try the pack and see whether the HDRs work for you. If they don't, just let me know and I'll refund you!
Hi, thank you for the awesome tutorial you just gained a sub! Can you please tell me how to make it mobile responsive though?
Thank you for your kind comment! Could you specify in what way you want it to be responsive? The code on CodePen should already be reasonably responsive and works on mobile devices in principle (although I'm sure there would be ways to make it nicer for mobile-first projects). You can have a look at the full page view via your mobile device to get an impression of its responsiveness:
codepen.io/miroleon/full/MWzxdqr
But if you're looking for a specific way to make it more responsive, just let me know and I'll try to explain to the best of my abilities!
See pictures like God in Cambodia
Hi @miroleon how are you ! thanks for your tutorial. i would like to know if you can make this easilyw with can and custom code ? have you code an example with webflow please ? thanks you
Thank you for your comment! I must beg your pardon; I haven't used Webflow before and thus cannot give you any solid information on how to do this within the confines of that framework. I did do some quick research now, and principally, you should be able to embed custom code (which inlcudes HTML, CSS, and JS, which I'm also using here). If you head over to the Codepen for this tutorial via the video description, you could copy the HTML and paste it into your custom code embed. The same goes for CSS, which you would have to put into the tag and the tag for the JS code. However, Webflow only seems to allow custom code with a max length of 10,000 characters, which might be too little for this particular project. You can minimise the length of the code by deleting all the comments ("//") from my original code and putting it into a website to get rid of all the empty spaces to cut down the character length (you could use this website, for example codebeautify.org/remove-extra-spaces).
In the end, I'm not sure whether Webflow can handle the relative complexity of this project - this project isn't crazy complex itself, but it might just be a bit too much for a custom code embed. In the end, I think you have to get a bit creative trying to recreate something like this within Webflow. I hope this tutorial at least gives you an idea of the principle of how one can make such a landing page so that you can search for similar ways to implement it into Webflow. Otherwise, I would just encourage you to maybe use the opportunity to try building a site from the ground up, e.g., by forking the code in Codepen and trying to build your website around this tutorial. I know it's a lot of work, but it's helpful to learn the foundation anyway! If you choose to stay with Webflow, I wish you the best of luck and success in making something like this work within that framework. For all the info on the custom code embed, you can check Webflow's documentation, which I also referenced for my reply: university.webflow.com/lesson/custom-code-embed?topics=elements
Lastly, if you want to get more feedback and learn more, you are also welcome to join our Discord!
discord.gg/9JtYAqdWzq
Can you create a video on react three fiber
Thank you for your comment! Yeah, that's definitely something I'm willing to look into! I haven't used Three Fiber for React yet, but I have done some research on it lately. Until then, all the principles I use (like the Gradient HDR, animation, material, etc.) basically stay the same. So, they should be relatively easy to transfer to another Three version or basically any other render engine (the basic steps will be the same in Blender, Cinema 4D, etc.). I try to make sure that I put emphasis on the concepts rather than the plain code so that you're not dependent on this or that Three.js version or render engine. I hope that helps for the moment, but the React tutorial is definitely on my ToDo List!
@@miroxleon thank you very much Also great tutorials
How are you animating the video? Awesome and smooth!
Thank you for your kind comment! Do you mean the editing of the tutorial? I'm working in Adobe Premiere. In this tutorial, I mostly took screen captures from Codepen and added the text highlighting. To get smoother transitions, I primarily use the 'transform' effect and turn up the shutter angle to get the fading effect when stuff is moving around the screen. I hope the info helps! I want to make a tutorial about my editing process at some point, but I'm still learning. My newest tutorial, for example, is better edited than this one I think. If I misunderstood your question or if you have any further questions, don't hesitate to ask again!
@@miroxleon Yup haha. Very cool, thank you! The animations look slick that's why I asked. Keep up the great work!
hi, i'm having problem to run it on my vs code, on codepen it is running. please help!
Thank you for your comment! Do you have any further information? Any error logs? How did you download the code or copy-pasted it into VS Code? Are you using a server plugin for VS Code? I hope I can help you when I have more information!
You can also join our Discord and we can help you there! Here's an invite link:
discord.com/invite/WBnTvFtwNn
@@miroxleon I ran it on codepen then after successfully running the test code for the three js i.e. the green box rotation one, i pasted the code of html css and js but js isn't working. Please help if you don't mind 🙏
@@tarshswarnkar I think I got you...! So, let me try to set this up for you. Generally, if you copy and paste the code from Codepen into local index.html, script.js, and style.css files, they are not correctly formatted or linked with each other yet. The easiest way to do the setup in VS Code is by creating such an index.html file. Then type "html" in the code editor (don't click away or the suggestions will go away and you will have to retype "html"!). While you're typing there should be a list of suggestions that VS Code makes. One of those is "html:5". That's the general setup for a responsive HTML file. Just click on that entry in the suggestion list or navigate there with arrow key down and enter. Then you should get the general outline for an HTML5 document, starting with ... and ending with ... . That's the part that is missing in the Codepen, as Codepen does automatically fill that in itself. Now, you can copy and paste the code from the HTML section on Codepen between and . There are still some minor issues though. Even if you create a script.js file and a style.css file and paste the code from Codepen there, the files don't know that they each exist yet. Your index.html will be the main hub for them to know that they have to work together. Therefore you have to add the line before the tag, so that the HTML knows that it needs the style from the CSS file. Lastly, you'll need to add the script.js file to the mix. For that, simply go down to the end of the document and past the line before the tag. It's important that you use the type="module" here, as we're working with modules in Three.js! Also, make sure that you have saved all files, the index.html with the HTML code, the script.js file with the JavaScript code, and the style.css file with the CSS code. This should be the entire setup, but in order to preview the code, you'll need a live server plugin for VS Code. You could simply open the index.html file in your browser, but if you check the console (usually with ctrl + shift + j) it will show you a CORS error, which is a security thing, and prevents to read from certain files or sources. Anyway, for that purpose we have live servers that run the file on a localhost. If you don't have one setup, click on the "Extensions" icon in the left side bar of VS Code (or press ctrl + shift + x) and search for "Live Server". Any of the top ones should be good. I personally started with "Live Server" by Ritwick Dey and later switched to "Live Server (Five Server)" by Yannick. The first one is super simple but works and the second one has a few more custom options. Simply select one and click on the "Install" button. After the installation, you might have to activate it. When it's fully installed, there should be some kind of "Live" button in the lower right corner of VS Code (the Five Server one is a play icon and "Go Live" next to it). This should start a new local server. Make sure you are in the index.html file when you go live or navigate there when you are live, as only that one will render your scene. If you open the script.js or style.css files with a live server, they will just show you the code. That should be it!
Maybe you already know some of this, but the lengthy description is just to make sure, you can follow along if this is your first time going from Codepen to VS Code! To make it easier for you, I created a quick Github Gist, which turns the Codepen code into the separate and linked files that I just described. You can find it here: gist.github.com/miroleon/2280303bb40394f80a9229a2374281af
There are two ways you can work with the Github Gist. For one, there is a "Dowload ZIP" button in the top right corner. You can simply download the ZIP, unpack it, open the folder in VS Code, and start your Live Server and this should work (I tested it myself to be sure). You also see the three different files in the preview page on Github Gist. So, you can also recreate these files locally on your machine and then copy paste the code there respectively. Your choice!
There's another thing you can do right from Codepen. There is an "Export" button in the right lower corner. If you click on it, you will see the option "Export .zip". This also downloads a zip archive with the code but can be a bit confusing due to the folder structure. If you unzip it, you will get a folder with a LICENSE.txt, a README.md, a "dist" folder and a "src" folder. The "src" folder contains the code in the same form as it's shown on Codepen, so that won't be correctly linked either. However, in the "dist" folder, you will see the correct files with the correct links in the index.html file. Then, you can also open the folder in VS Code and run your Live Server and done!
I hope this helped! If this is your first time doing the whole Codepen -> local VS Code thing, don't worry, I had the exact same questions when I started! It's good to learn it. It helps you understand the document structure and everything better! Let me know if you have any further questions or run into any issues!
@@miroxleon thank you for your very generous reply, but is there a place where I can send you the problem as a video that I'm, if yes that will be the greatest help
@@miroxleon I think 3js is creating a problem, even though I have installed everything
can this be used for like a portfolio?
Sure! You could use the three.js scene as the banner for a portfolio page, for example. Or maybe you turn it into a horizontally scrolling page where the three.js scene is the start of an array of other coding examples or references. The possibilities are almost endless! I hope you find the right implementation for your particular use case! If you have any further concrete questions, just let me know! Maybe I can make a new tutorial about it in the future!
Why not