Is three.js able to show FEA results?

Question

I’m trying to develop an real-time wind turbine simulation Finite Element Analysis software using three.js to display the caculated 3D FEA results. Like the image one frame of FEA result.the showed 3D wind turbine rotates like the real physical one does. I can generate dozens of VTK format result files per second, i.e. dozens of frame per second. I have two questions here:

• I’m wondering is there any way to display vtk format file or general type FEA file(Like FEA software ANSYS , COMSOL outputs) using three.js? Any file format tranformation is accepted.
• Am I only able to use load function to load 3D FEA files frame by frame? (the size of single FEA result file may be large, and the frame rate may be heavily influenced by the internet quality)Maybe generating animation of several frame in advance can achieve better performance?

Answer 1

three.js has a VTK loader. I don't think it supports animation on its own though, I guess you'd need one VTK file per frame.

That said, in general it's recommended to use glTF/GLB for models in three.js when you can. They are more efficient to parse, work well in a web environment, and support a variety of compression options. I'm not sure what VTK → glTF conversion options are available though.

If you can get a glTF file containing one mesh for each frame, you can convert that to an animation and try different ways of compressing it with gltf transform:

# clean up
gltf-transform dedup tmp_animated.glb

# add animation
gltf-transform sequence input.glb tmp_animated.glb \
    --pattern "mesh_name*" \
    --fps 24

# draco compression (option a)
gltf-transform draco tmp_animated.glb output_draco.glb

# meshopt compression (option b) (apply gzip after this)
gltf-transform meshopt tmp_animated.glb output_draco.glb