I have a spiral animation in three.js, where I have to create objects in the animation loop because I am getting object parameters real-time. The performance is not good, it becomes so laggy. How can I optimize the performance ?
jsfiddle : Animating Spiral in THREE.js - JSFiddle - Code Playground
(I am also using different colors but for the sake of the example, spiral will only be black and white)
two ways I am optimizing it:
- I am reusing materials, not creating new one if not necessary
- after drawing 300 lines, I am replacing it with one big geometry with vertex colors
I am new to three js and I know I am making a critical mistake somewhere, any help will be appreciated !