Create Fractal GLASS DISTORTION in THREE.JS! [FREE CODE | CODEPEN]

[@rubenzafratraver6819]

Yes please, more on the orbit controls!! You are amazing, I need more in depth tutorials from you

[@miroxleon]

Thank you so much for your kind words! Yeah, I also want to do something about the orbit controls. I was never really happy with orbit controls + animated camera in Three.js, but the customised version in this scene works pretty well for my taste…! I'll try to do something about this soon; stay tuned!

[@rubenzafratraver6819]

@@miroxleon Thanks so much for the reply and thanks for your effort really. You are my senpai on this

[@prestonxgvcci6697]

beautiful tutorials man , love it keep it up i have always wanted to make this !

[@miroxleon]

Thank you so much for your kind comment! I'm happy to hear that you wanted to make something like this in the past! I hope the tutorial and texture pack help you realise it! If you make something with this, feel invites to join the discord and share your project with us in the #community-projects channel!

[@AndersonMancini]

Awesome work, man! I would like to suggest that you experiment with the Vanruec post-processing with vanilla three.js. That post-processing pipeline can create an Uber shader during render, meaning that all the passes are rendered as a single pass, drastically improving performance for more complex scenes.
I hope it helps.
All the best, and keep up the good work! 👏🏻

[@miroxleon]

Thank you so much for your comment and feedback! You're absolutely right about the performance improvements! Since I'm using Three.js primarily for artistic purposes, I don't spend much time optimising the scenes. For production, I would probably also change the FBX model for a GLB/GLTF model, etc.
I did try to find the Vanruec post-processing pipline, but couldn't find anything. Do you have another reference how I can find that? It sounds super promising and I'd love to look into it!
Also, please feel free to play around with my code and optimise it or improve it further! You can also make a tutorial about it yourself - your videos are amazing! I'd be really curious to see what you make out of this!
If you want to talk about it more, you are welcome to our Discord community as well!
Thank you again for your comments and feedback!

[@deadlysniper9722]

Love the Content Man, I only have Knowledge of HTML, CSS and JS Only Via Chatgpt, ( I cant Write Code )
But your Tutorial is Very Valuable for Improving my Capabilities.
Can you Also Teach How to Replace the Model as Per my Requirement?

[@miroxleon]

Thank you for your comment! I'm glad to hear that my videos are valuable to you!
Are you asking how to change the 3D model or 3D model type? If you want to import a different FBX 3D model, you only have to change the file location in this line:
fbxloader.load( "path/to/file.fbx" ...)
If you want to import a different model type, like GLB/GLTF, OBJ, etc., you will need a different importer. In that case, you could cut the import statement:
import { FBXLoader } from "cdn.skypack.dev/three@0.136.0/examples/jsm/loaders/FBXLoader.js";
Then, you can import a different loader. Unfortunately, the logic of each importer is a bit different, so you cannot just switch "fbx" for "glb" or "obj"; you'd have to rewrite the loader setup. Thus, you'd have to cut the following part and rewrite it according to your desired loader:
const fbxloader = new FBXLoader();
fbxloader.load(
"miroleon.github.io/daily-assets/two_hands_01.fbx",
function (object) {
object.traverse(function (child) {
if (child.isMesh) {
child.material = hands_mat;
}
});
}
);
ChatGPT should be able to do that for you, for the most part. I'd just try to give ChatGPT the lines I showed you here (best you copy-paste them from the Codepen) and prompt something like: "I have this FBXLoader setup in Three.js but want to load a *file type* model with the same settings instead. Please read the reference carefully and make all the necessary changes to import a *file type* model instead".
If you want to learn the different loaders, the Three.js documentation and examples are great to get started. Maybe a mix of ChatGPT and looking in the documentation will get you furthest.
If you have issues in the process or want to share your own results, please feel free to join our Discord and share your progress with the community!
I hope this helped a little bit!

[@irfansaeedkhan7242]

nice nice nice

[@miroxleon]

Thank you so much! It's a great pleasure to welcome you to the Discord as well!