Level Up Your Renderings with GRADIENT HDRs! [Three.js, Blender, and Co.] [CODEPEN | FREE CODE]

JOIN OUR DISCORD! / discord Get my Gradient HDR Pack to support me! miroleon.gumroad.com/l/gradie...
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/dyQdzKq
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
The amazing 3D model is by JohnMesplay on Sketchfab - skfb.ly/oy6x6
Chapters:
0:00 Intro
0:38 Gradient HDR Pack
1:35 Basic Code Setup
2:02 Three.js Setup
3:14 Three.js HDR Setup
4:53 Three.js Fog Setup
5:19 Creating Group for HDR Rotation
6:13 Three.js Pointlights
6:30 Three.js Camera
6:38 Three.js Material with HDR Intensity
9:24 Three.js OBJ Loader
10:26 Post-processing
10:41Three.js Bloom
11:15 HDR Rotation Animation
13:04 Outro

[@miroxleon]

Make sure to check my Gradient HDR Pack on Gumroad! miroleon.gumroad.com/l/gradient_hdr_pack Also, check out my previous Three.js tutorials: Introduction to Three.js - kzbin.info/www/bejne/omjdnIKDaaupkLM Surface Imperfections in Three.js - kzbin.info/www/bejne/bKmZmWx3gb-SY7M Let me know what kind of tutorial or content you want to see next!

[@julianvelez6563]

Awesome work ❤❤

[@miroxleon]

Thank you so much! Your work on Instagram looks amazing, too!

[@minhnguyentri4669]

Great tutorial thank you

[@miroxleon]

Thank you so much for your kind comment! I'll make sure to create more helpful tutorials in the future. In the meantime, I want to say thank you for your comment by giving you a 25% discount on the Gradient HDR Pack! You can use "F4WTXGS" at the checkout to get the discount on Gumroad! miroleon.gumroad.com/l/gradient_hdr_pack

[@atomauro]

awesome thanks

[@miroxleon]

Thank YOU for your comment! These make my day each and every time! Thank you for your support!

[@DaRkExodus7]

N1

[@miroxleon]

Thank you! I appriciate it a lot! If you're interested in the full HDR pack, I want to say thank you for your comment by giving you a 25% discount! You can use the following link or the code "F4WTXGS" during checkout to get the discount. I hope you enjoy the assets and my future tutorials! miroleon.gumroad.com/l/gradient_hdr_pack/F4WTXGS

[@LeoLeenus]

vscode setup?

[@miroxleon]

How much info do you need? For one, you can export the code from Codepen ("Export" button in the lower right corner): codepen.io/miroleon/pen/dyQdzKq Alternatively, you can get the code from GitHub: github.com/miroleon/gradient_hdr_freebie/blob/main/ThreeJS_HDR_Example/ Then in VS Code, you need a live server (although you could also open the HTML file in your browser). For the live server, go to the Extensions section in VS Code, search for "live server", and choose one. There will likely be a button "Go Live" or something similar, which will allow you to view the code/rendering live in your browser. I hope that helped. If you have any more questions, feel free to let me know. I can also create a tutorial on how to do the VS Code setup in the future!

[@user-yi3rq7jk2r]

build a multi page website with rtf

[@xGalasko]

why dont you use react

[@miroxleon]

Thank you for your comment! There is no particular reason why I don't use React, but one explanation lies in the fact that I don't consider myself a Web Dev in the classical sense. I'm an artist who uses different media and one of them happens to be coding - particularly languages that are prevalent in web development. With plain Three.js I was simply able to get most quickly to a look that I was trying to achieve, but perhaps similar things are possible in React and maybe even with better performances. I definitely encourage you and everyone else to apply the concepts I'm using (e.g. the idea of using stylised HDRs with reflective materials) to any other code base or software. If you happen to translate this to React, let me know! I'm curious to see the result! And if you want to see a React tutorial, let me know as well and I'll see what I can do!