Search code examples
three.js3d-modelling

FPS drop when model appears - three.js

When I use three.js to load my Collada file, FPS is only 5-7. I try to optimize it with Blender and Meshlab, I can load it smooth but model becomes worse. Can anyone explain to me why my model is rendered with a low frame rate? You can download my model right here.

Solution

  • Can anyone explain to me why my model is lag when load.

    Your model is rendered with 66011 draw calls. You can see this information by inspecting the WebGLRenderer.info object in your debugger. Such a high amount of draw calls is unfavorable and most likely the main reason for your bad performance.

    So the first thing you should try is to merge geometries in your content creation tool (e.g. Blender). Also avoid the usage of multiple materials per 3D object.

    BTW: Instead of using Collada, export your model as glTF and then load it via GLTFLoader. It's the recommended 3D format of three.js. More information right here:

    https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models