In Part 2 of this series, we showed how the particle data are saved into a Vuex store. Now we are ready to visualize the data. In this article, we will discuss how three.js can be used to display the particles. Interaction with the particles will be discussed in a future article.
A Vuex store for graphics
To make our manipulations of the data more convenient, we use a store for the graphics state too. The setup is similar to that discussed in Part 2, and we have a state, getters, mutations, and actions. In this case, we implement the state in a file called ThreeGraphicsState.ts:
The state contains the scene, one camera (multiple cameras can be added if necessary), and a flag to indicate whether the store contains objects or not. The associated getters are straightforward, but there are a few more mutation functions in this case:
We can also add functions that can delete objects if needed.
Interacting with Vue
Vue2’s capabilities simplify the development of the user interface, but a significant penalty has to be paid in terms of performance. In this section we will take a glimpse at how Vue makes development of the user interface easier.
Vue2 was designed for business applications and is not the optimal choice for graphics-heavy applications.
In the Main.ts file that acts as the entry point, we declare the following:
In the MainPanel.vue file, we set up the basic components used in the user interface; in this case just a single window for display the particle data. I have used Uikit3 for some of the CSS styling that I refer to in this series, mainly because it is relatively lightweight.
Note that we can specify the source code and the styling in the same file. This has the potential of greatly reducing the complexity of the code.
The MainPanel.ts file is just an entry panel that acts as a container. Therefore, it contains little content, but is useful to illustrate the layout of a typical Vue2 component using av-ts Typescript decorators. Here’s the code
We are now ready to get into the details of the actual graphics components. I’ll discuss how I implemented that in the next part of this series.
If you have questions/comments/corrections, please contact banerjee at parresianz dot com dot zen (without the dot zen).