- Flash-back: The graphics panel
In the previous articles in this series we talked about:
- Part 2: Saving the read-in particle data in a Vuex store
- Part 3: Initialization of a store and the user interface.
- Part 4: Setting up the Three.js renderer
Let us now discuss how we can set up the scene and the camera.
Flash-back: The graphics panel
Recall that the
three-graphics-panel template introduced the components
three-camera in the file
three-scene component is a child of
three-renderer and has two children of its own:
size parameter is passed down from
three-renderer to its children.
three-camera component takes an additional
position property as input.
three-scene component has a slot for the
three-ellipsoid-particles and the corresponding ‘ThreeScene.vue` file contains:
Note that we could have included the scene in
three-renderer instead of creating a new component for it. That choice depends on the use-case, e.g., if there are multiple scenes assigned to a single renderer and we would like to switch between them then it makes sense to make the scene into a component.
The scene component is implemented in
During the creation phase, we add lights to the scene but not the camera(s). This is because the camera component has not been instantiated yet. The camera is added to the scene during the mount stage.
We don’t use the
size property here, but keep it around in case it’s needed by child components.
Now we are ready to create a camera that can be used to view the scene. The template file
ThreeCamera.vue is essentially empty:
template tags look redundant, but if we don’t include them in
ts-loader fails with a compilation error.
The implementation of the camera component in
We use a
THREE.PerspectiveCamera in this example. The four parameters are the field of view angle in degrees, the aspect ratio, the near plane distance, and the far plane distance of the camera frustum. The camera position is determined by the input parameters and not by the positions of the objects in the scene.
The aspect ratio is determined at this stage by the input parameters and not by the actual window dimensions. Also, I recommended that you use the
lookAt method to make sure that the camera is oriented as you would expect.
Don’t forget to update the projection matrix of the
PerspectiveCamera after you change its position.
Now that the scene and the camera have been set up, we can see how ellipsoid are created and displayed 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).