I saw this https://renaultespace.littleworkshop.fr/ in the official threejs website. What kind of 3D object is imported here. The object with animation only takes 20 MB. So how to do this import and how the object could be created. And How the surrounding 360 environment is created. While starting the engine by the button, an animation video is also performing. How this is working. Can someone kindly describe this to me?
There are quite a few examples that can help you with this:
- Environment creation: example (You can also just use a 3d model + envMap for environment like the one they use.)
- Animations would probably best be done in Blender (they are complex, coding them will take ages to create and adjust) or using paths (this extended camera control has nice support of complex camera movements.)
Tbh, 100% of the app you linked could be just done in Blender as a single scene with 3D models + animations exported to glb with audio effects added via three’s Audio + AudioLoader. Then in code you just choose which animation should be currently active depending on the state.
Thank you for your kind reply @mjurczyk . Could you please check once again whether the object is glb. Because I couldn’t find any glb here.
I didn’t tell you how they did it (neither did I check) - I told you how you can do it.
Why bother copying someone’s app 1:1 when you can do it faster using just a bit of creativity?
1 Like
Yes you are right @mjurczyk . But, I tried with a glb model like this. But the model size is being high. But here, it takes only 15MB to render this object with door open and wheel movement animation. So only I am trying to know the method used in this
What do you mean by too high? You can decrease size of the 3D model by reducing it’s amount of triangles / texture size etc. Changing model format (from glb to obj etc.) will not make that much difference.
Be sure to pick models that have no more than 10.000 triangles. Often on websites like Sketchfab you have movie-prop-quality models (with 100.000 triangles) mixed with game assets (that will work well with WebGL), be sure to pay attention to that:
-
good (3.1k triangles)
-
not good (1m triangles)
It’s not related to glb, tbh. It’s just the model.
If you have a high-poly model (with a lot of triangles and excessive size), you can try a technique called retopology, or try using the decimate modifier on the model.
You can find plenty of guides online about model simplification - but if the model wasn’t originally created as low-polygon, they may reduce quality a bit.