Create this 3D WEB RENDERING with FREE TOOLS [Three.js & Mixamo] [CODEPEN | FREE CODE]

JOIN OUR DISCORD! / discord Learn how to make this 3D web rendering that you can easily use on any website with free tools such as Mixamo and Three.js. No high-performance hardware is required.
Find the code on Codepen - codepen.io/miroleon/pen/ZEMdZqQ
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:
00:00 Intro
00:10 3D Character
00:51 Introduction to Mixamo
03:10 Basic Setup in Codepen
04:30 Three.js Import
05:35 Three.js Scene Setup
06:39 HDRs in Three.js
07:55 Three.js Camera Setup
08:40 Three.js Material Setup
12:21 Importing Animated FBX in Three.js
14:57 Three.js Fog and FogExp2
17:12 Three.js Post Processing
17:26 Three.js After Image Effect
18:22 Three.js Unreal Bloom Effect
19:53 Camera Animation
22:26 FBX Animation
23:47 Outro

[@miroxleon]

If you enjoyed this tutorial, definitely also check out my latest three.js tutorial, exploring textures and materials!
th-cam.com/video/6x6h9ALZ_-Q/w-d-xo.html

[@goatedkab]

Bro I just found your channel, honestly the value in these videos is off the charts! Thank you so much for your content and the effort you put into making high quality concise content

[@miroxleon]

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!

[@pranaxr]

loved the simple explanation; thanks.

[@miroxleon]

Thank you so much for your kind comment! I really appreciate it a lot! This was my first tutorial, so I think the explanations weren't perfect yet, but I'm working on it. Perhaps you'll also find value in my newer videos!

[@chokdeesam2365]

Just found your channel, I subscribe, because your explanation are so good, and your work seems to be amazing !
Thank you so much :)

[@miroxleon]

Thank you so much for your kind words and for taking the time to leave a comment! Messages like this always make my day! Thank YOU for your support! I hope you enjoy my future tutorials just the same!

[@HuynhLuong227]

🎉🎉🎉wow amazing, hope you make more this tutorial, keeep going 😊

[@miroxleon]

Thank you so much! I appreciate it a lot! It took a while, but I finally published a new tutorial. I hope you'll enjoy that one too! More coming soon!

[@HuynhLuong227]

@@miroxleon wait for you

[@AdventureIsTheLife01]

you got a new subscriber
'

[@miroxleon]

Thank you! I appreciate it a lot! I hope you enjoy the new tutorial and the stuff that is coming in the near future!

[@MauRuizDev]

Amazing work!! I noticed you are using three js version 0.136, I tried to replicate it with the newest version (0.160) but it gets totally wrong colors, do you know why it doesn't work with the new version?

[@miroxleon]

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

[@MauRuizDev]

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

[@miroxleon]

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

[@technologyfact9222]

How to make characters please tail mee

[@miroxleon]

Thank you for your comment! I'll be working on the character tutorial soon! Stay tuned!

[@HuynhLuong227]

@@miroxleonme too, wait for you🎉🎉