In this article we will discuss the actual process of visualization of the particles. The particles we are interested in are oriented ellipsoids.
The graphics panel
In the main-panel Vue component introduced in Part 3, we had declared a graphics panel component called three-graphics-panel. A simple Vue template for this component can be written as:
As before, the CSS classes used in this example are from Uikit3. The graphics panel uses four child Vue components, three-renderer, three-scene, three-camera, and three-ellipsoid-particles. The implementation of ThreeGraphicsPanel.ts is also straightforward in this case:
The size property is passed on to the children of three-graphics-panel and determines the default size of the window in which the particles will be displayed. This property can be accessed by the children by using the “passing data with props approach.”
The renderer template
The first component instantiated in three-graphics-panel is the three-renderer component which is passed the size argument using the v-bind directive. Let use first examine the ThreeRenderer.vue code:
The first new aspect to notice is the use of the slot tag. This is needed to make sure that the three-scene, three-camera, and three-ellipsoid-particles from the three-graphics-panel parent components are correctly instantiated and interpolated into the DOM.
The second new aspect is the use of the ref attribute in the div element after the slot. This element is used to create the HTML canvas as a child of the renderer component.
We could add event handlers to this template to handle interactions with the camera. That aspect of the user interface will be discussed in a future article.
The renderer implementation
The renderer component is implemented in ThreeRenderer.ts which contains the following code:
The main thing to note here is that we are using the THREE.WebGLRenderer, and the creation of the canvas element as a child of the renderer div element. The canvas element is created in the mount stage of the instance lifecycle and all the plotting is done on that element.
In the next part of this article we’ll discuss more details of setting up the scene and camera.
If you have questions/comments/corrections, please contact banerjee at parresianz dot com dot zen (without the dot zen).