วีดีโอ

Thank YOU for watching and leaving a comment!

Thank you so much for your kind comment! This made my day! It took a while to finish this video, but I’m back with hopefully much more to come soon!

Thank you for your comment! It's quite a bit more difficult to run Stable Diffusion/Fooocus on a Mac OS device and since I don't have an M1 or M2 device, I wasn't able to test it yet. You can refer to this unofficial guide on the official GitHub repository for this. I hope this helps. Al tools that run natively on Mac OS are a bit more rare, but I hope you find something that works for you...! github.com/lllyasviel/Fooocus?tab=readme-ov-file#mac

@@miroxleon thanks man, i followed the steps and im ended up getting this error- fatal: destination path 'Fooocus' already exists and is not an empty directory. can you help out if you can?

Thank you for your comment! No worries, you should only have to wait for the download of the model once! Sometimes there are Fooocus updates that come with new models, so they will download together with the update. But you don’t have to re-download and wait for the model every time you open the app! I hope this helps!

@@miroxleon thankyou

Thank you for your comment! I haven’t worked with React Three Fiber before, but I’m pretty sure that it also supports HDRIs…! You can web search for React Three Fiber HDRI or environment to get specific tutorials! You can still use my full tutorial as a reference and perhaps copy the code from Codepen and let ChatGPT translate it to React. Just in case it doesn’t work, you can first get my Gradient HDR Freebie and only buy the full pack after you test it to make sure that it works! If you need more help, feel free to join our Discord server! The link is under all the latest videos! I hope this helps, and good luck and success on your Three.js journey!

Oh, thank you for your comment and the update! Much appreciated!

@@miroxleon i can fil you in if you need.

Thank you for your comment! The short answer is 'yes', although I cannot verify, as I don't have an Apple Silicon device. However, there is an unofficial guide on how to use Fooocus on M1 and M2 devices. As they say: "You can install Fooocus on Apple Mac silicon (M1 or M2) with macOS 'Catalina' or a newer version. Fooocus runs on Apple silicon computers via PyTorch MPS device acceleration. Mac Silicon computers don't come with a dedicated graphics card, resulting in significantly longer image processing times compared to computers with dedicated graphics cards." Here is the link to the instructions: github.com/lllyasviel/Fooocus?tab=readme-ov-file#mac I wish you the best of luck and success getting this to run on your M1 device! Feel free to let us know how this went!

@@miroxleon Thanks you for your return ! Your video is really interesting

Thank you very much!

Thanks for your comment! The answer is: it depends, but it should work. I did a quick web search which showed that there are different versions of the RTX 3050 Laptop GPU. There are versions from 4GB to 8GB VRAM. Principally, both should work, but it's difficult to estimate without knowing the entire specs. However, you can check the VRAM yourself easily, as described and shown at 2:21 of the video. I would just give it a try to run Fooocus if I were in your situation. My best guess is that it might be slow, but it should work anyway...! Feel free to let us know how it went if you try to run it. Then, if someone else is trying to run Fooocus on a 3050 in the future, they might find value in this info!

Thank you for your kind comment!

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 <!DOCTYPE html> ... and ending with ... </html>. 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 <body> and </body>. 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 <link rel="stylesheet" href="style.css"> before the </head> 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 <script type="module" src="script.js"></script> before the </body> 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

Hey Mau, thank you for your comment! Oh yes... that's a thing... I'm not perfectly sure what the cause of the different colours is, but there have been some major changes across Three.js version over the years. I must confess, at some point, I gave up staying up-to-date with the latest releases and what changed in them. I had some parametric geometry manipulations I used to do, and they stopped working after r136 or somewhere around there, too. I'm sure there are workarounds, and it's not advisable to keep using outdated releases, but yeah, I must confess, I just stayed with older Three.js versions for my creative projects. For client work, I'd probably take the time to adapt a project for newer releases. Anyway, if you are searching for fixes for the colour issue, I'd have two ideas that might help you. Assuming the differing look is caused by the HDR being differently tone mapped by default between releases, you may want to have a look at the renderer (threejs.org/docs/index.html?q=render#api/en/constants/Renderer) and its toneMapping property (threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.toneMapping). Here, you can find a Three.js example demonstrating different tone mapping types (threejs.org/examples/#webgl_tonemapping). The Three.js documentation also has a more extensive explanation of colour management in general and in Three.js in particular, which might be helpful in this context (threejs.org/docs/#manual/en/introduction/Color-management). I hope this helped at least a little bit. If you have any questions, feel free to raise them! If you want to have a more extensive conversation on the issue (or anything else Three.js related), you're very much invited to join our Discord Server! It's usually easier to have a chat there, compared to the TH-cam comments, and other web devs are around that might have some helpful insight as well! discord.gg/dWgeDM9QpB

@@miroxleon Thank you for your response!! Sure it helps a lot, I didn't know where to start. I'll be trying make it look similar to your original result with the latest version, and I'll let you know on the discord if I find something!

@@MauRuizDev That'd be amazing! It's always great if we have a chance to learn from each other as a community! Good luck with your efforts with the latest Three.js version and let us know if you need any help along the way! Looing forward to see your results down the line!

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!

Thank you for your comment! Can you give any information about the error? I never had an issue like that before, but maybe I can figure something out knowing more about the error...!

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 <style></style> tag and the <script></script> 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

Thank you for your comment! I must confess that I just changed my setup, so I cannot easily check the old setup's performance and cannot recall the it/s (or s/it) from the top of my head. What I can say is that Stable Diffusion (whether through Fooocus or A1111) ran decently well on that Razer 14 with the 3080. Sure, the fans start spinning, and doing AI animation work isn't fun, but for single image generation, I'd assume a laptop with a 3080ti laptop edition to be equipped well enough. I'll try to run a test soon and get back to you, though! You can also join our Discord and put your question in the AI channel. Then it'd be easier to get back to you once I did a test (and maybe others can help as well)! discord.com/invite/3xxNV52MCZ

I managed to check the old setup with the Razer 14/3080 Laptop GPU now. I hope this isn't too late and still is helpful for you...! This isn't comprehensive by any means, but on Fooocus, the laptop peaks at around 1.55 it/s. When I do a quick test through A1111, I tend to be at around 1.15 s/it. I haven't spent time optimising or benchmarking this in this setup yet, so these are the out-of-the-box numbers. If you have any further questions, you can still join the conversation on Discord!

Thank you for your comment! I'm not perfectly sure if I understand the question correctly, but I'll try to answer in the best way I can: Since Fooocus comes as an embedded package, you don't have to "install" anything in the common sense of the term. What happens when you first run the .bat file is that the terminal opens, which then downloads the required models so that Stable Diffusion can turn your prompt into an actual image (as a reminder: Fooocus is the user interface; Stable Diffusion is the algorithm; Python is the language). So, once you downloaded all the necessary files, you can run Fooocus via the .bat file. When you close Fooocus by closing the terminal and rebooting your PC, you can start it in the same way that you started it the first time. Simply double-click the .bat file in the original folder. It doesn't have to download everything again. The models are stored automatically in the folder. However, Fooocus is regularly updated, so sometimes it will download updated models as well. You simply have to keep the terminal open for as long as you use Fooocus. If you close the terminal, Fooocus will also close. When you open Fooocus via the .bat file again, it should start the local server itself and automatically open the UI in the browser again. Otherwise you can type the link or ctrl + click the link in the terminal to open the web UI again. So, you just keep that one folder that you originally downloaded and always start Fooocus there. If you want to "uninstall" Fooocus, simply delete that folder. There shouldn't be anything else you have to do to "uninstall" it. Since this is not the same intuitive way to open programs such as Photoshop etc., you can make it a bit easier to start by right-clicking on the .bat file, searching for "Create Shortcut", which might be hidden under "Show more options" and then copy-paste the shortcut to your desktop or pin it to your start menu. Then you can simply double-click that shortcut and it will start the terminal to run the Fooocus UI. Again, the terminal has to stay open for Fooocus to run. When you close the terminal, Fooocus closes as well and probably the browser which started to show the Fooocus UI will also close. I hope my long-winded explanation helped a bit to clarify the usage of Fooocus. If I didn't answer your question, please feel free to ask again. You're also welcome to join our discord if you need any further help or want to exchange more ideas with the community! discord.gg/wxj6YTDuEW

Thank you for your comment! I can surely do another tutorial for more advanced techniques, using models and LoRAs from CivitAI in A1111 and training your own models and LoRAs with Koya. It's good to know that there is demand for this type of video! I'll work on it soon!

@@miroxleon that would be great! personally i'm starting with fooocus, which i find easy to start with but i don't always get the results i want! for example, i'd like to use the same model i created (a person for a sort of comic i'm creating) and i'd like to use poses of other models online, any suggestion?

​@@polgia9314 I understand, Fooocus can be somewhat limited in that regard. To get started, have a look at how to install A1111. For models, I personally had the best quality/time performance with a model called "Cyber Realistic", which you can find on CivitAI. However, I have only little experience with "comic" style models. For controlling poses, you should have a look at ControlNet and OpenPose. With those, you can determine the pose of the character that the AI will render, which then also helps with consistency. There is also the OpenPose Editior for A1111, with which you can easily manipulate a pose and adapt it to your needs (there are also people who post their poses for OpenPose online to download). I'm keen to make a more detailed tutorial about this in the near future, but in the meantime, you are also welcome to join our discord. There, we also have an AI channel where you can chat and ask your questions (although there are many other more specialised AI Discords, too)! discord.gg/4GcfAxJDXc

@@miroxleon thanks a lot for your advice, I’m gonna look into it 😄

Thank you for your comment! It's quite a bit more difficult on Mac OS and since I don't have an M1 or M2 Apple device, I wasn't able to test it yet. You can refer to this unofficial guide on the official GitHub repository for this. I hope this helps. AI tools natively for Mac OS are a bit more rare these days, but I hope you find something that works for you...! github.com/lllyasviel/Fooocus#mac

Thank you so much for your kind comment! These always make my day! Admittedly, this video is still my least favorite one, being my first tutorial here. But I hope - if you get to the more recent videos - you find more value with a better presentation! Hope to see you around then and have a great day!

Thank YOU for your kind comment! I hope you enjoy the full tutorial!

Thank you for your comment! You mean to uninstall Fooocus? Yes, you simply delete the folder to "uninstall". Since the entire "program" is just the execution of Python scripts, and since Python is embedded in the Fooocus folder, once you delete the folder, there shouldn't be any traces left on your hard drive (unless you copy-pasted stuff from the Fooocus folder to other locations on your hard drive). I hope this helps. If you have any further questions, don't hesitate to ask!

Thank you 🙏

Thank you for your kind comment!

Thank you for your kind comment! Greetings from Germany back to Mexico!

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!

Thank you for your kind comment (as always)! It's always such a great pleasure to see names reappear from previous comments! I hope you keep finding value in my videos in the future!

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!

Thank you so much! More to come soon!

Thank you for your comment! The modeling tutorial has been on my to-do list for ages... I will definitely do that in the near future! It's a lot of work for this tutorial in particular, but I'll surely put in the work!

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!

Thank you for your comment! Right? There really is an endless amount of cool new stuff to learn! I'll try to share the few things that I know about in my future tutorials as well!

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

@@miroxleon your welcome

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!

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! :)

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

@@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.

​@@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!

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! :)

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