In this part, we want to make a component that will visualize the linear transformation of object in three-dimensional space. The final result of this part you can see below, also, you can play with it here.
The first library that comes to mind when we think about doing 3D in the browser is three.js. So let’s install it and also, library to allow user move camera.
npm install --save three three-orbitcontrols
We are building a component that will receive matrix in properties from the parent component and will render an animated transformation of the cube. You can see the structure of the component below. We wrap our component with functions from styled-components and react-sizeme to have access to the theme with colors and to detect when the size of the component changed.
In the constructor, we initialize state that contains the size of the view, so that we can compare it with a new one in componentWillReceiveProps method. Since we will need to access the actual DOM element to inject ThreeJS renderer, we are using ref in render method.
In componentDidMount, we initialize everything we need to animate cube transformation. First, we create a scene and position camera. Then we create the renderer, set color and size and append it to View component.
Then we create objects that will be rendered — axes, cube and cube edges. Since we will change matrix by ourselves, we set the matrixAutoUpdate property on cube and edges to false. When we are done with objects creation, we add them to the scene. To allow user move camera with the mouse, we are using OrbitControls.
Then we convert matrices from our library to ThreeJS ones and getting functions that will return color and transformation matrix depending on time. In componentWillUnmount, we cancel the animation frame and remove renderer from the DOM.
Without the animate function, nothing will be rendered. First, we update the transformation matrix of both the cube and its edges and update the color of the cube. Then we render everything and request animation frame.
In componentWillReceiveProps, we receive the current size of the component, and if it differs from the previous one, we update the state, change the size of renderer and camera aspect.
To animate color change and transformation we need to write functions that will return animation functions. Before we cover them let’s look at some converters — functions from StackOverflow that convert RGB to hex and back and functions that convert matrix from our library to ThreeJS one and back.
First, we need to calculate the distances between each part of the colors(red, green, blue). The function that will return new color sets timestamp on the first call. Then by knowing the distances between the pair of colors and time spend from the first call, it calculates a new RGB color.
To animate linear transformation, we are doing the same steps. We find the difference between matrices and in animation function we update each component with relation to time from the first call.
Reach the next level of focus and productivity with increaser.org.