Advice to start a project (optimization)

Hello, want to get advice on technologies to get the most optimized scene, geometry and project overall. I’m not a coder that much, I’m more into 3D modeling and everything related.
I want to make some huge project, that will include character, animations and want to plan everything perfect.
Could you please suggest, should I use React three fiber or start with Vite as the documentation suggest. As far as I understand, three fiber includes different libraries and when you pack all resources - it may include some libraries, that you don’t want to see in your final build (may be wrong).
Regarding model - I don’t really see the difference between usdt and gltf, both can pack textures in .webp, shape keys and animations, so maybe you would say what is more preferable.
Regarding topology and rig itself - that’s obvious, so the only problem I have - before threejs was vanilla, where you just put a link on a library on server and everything was working. Then in docs I saw React, then Vite and I’m confused what to use for build + do I even need something to pack? Thank you, sorry for such primitive explanation

Why do we even need react/vite on top?

You don’t “need” either - they just help in certain (if not most) situations.

But both vite and react will only help you with code structure, neither will do much in terms of performance optimisation.

Optimise assets, use LODs, disable autoUpdates on static objects, compress textures & geometries, use MeshPhongMaterial instead of MeshStandardMaterial if possible, and so on and so on - there’s quite a few ways to optimise 3D worlds, but they often depend on the context of your scene.

These two have nothing in common. Vite is a bundler - it takes multiple JS files and combines them into a static, deployable bundle (incl. dependencies, assets, optional minification etc.)

React is a library that changes the way you code - it uses JSX and reactive code structure to make your code more manageable and predictable (not 100% true statement, but you could say that React renders the scene based on application state at a given moment - allowing you to easier predict how your code will behave, since it becomes more of a state machine.)

I’d mark it as an irrelevant fact when choosing between vanilla JS and React, size of these dependencies is relatively small in modern webdev. Are you familiar (or willing to learn) React? Go with React. Are you not? Go with vanilla JS.

On the other hand, using react-three-fiber will allow you to use drei. Drei is a set of reusable components that can let you build high quality scenes quite fast.

At the current time, GLTF is just way better supported by Three.js (if you filter examples by “gltf” you can see all the features that are supported pretty much out of the box for any GLTF you export out of Blender.)

Ain’t nobody stopping you from doing that - as long as the model / asset is served by a CDN, it’ll work exactly the same as if you’d used Vite (since Vite bundles your assets into a static deployment bundle, making the final thing work like a all-in-one-CDN-and-code.)

4 Likes

Thank you so much for a quick answer, will check everything you attached, thanks