JavaScript 线性代数：使用 ThreeJS 制作线性变换动画

目标

在本文中，我们将制作一个组件，用于对三维空间的对象的线性变换进行可视化。最终效果如下面的动图所示，或者你也可以在此网页体验。

 

 

 

组件

当我们要在浏览器中制作 3D 动画时，第一个想到的当然就是 three.js 库啦。所以让我们来安装它以及另一个可以让用户移动摄像机的库：

npm install --save three three-orbitcontrols
复制代码

下面构建一个组件，它可以由父组件的属性中接收矩阵，并且渲染一个立方体的转换动画。下面代码展示了这个组件的结构。我们用 styled-components 和 react-sizeme 库中的函数对这个组件进行了包装，以访问颜色主题和检测组件尺寸的变化。

import React from 'react'
import { withTheme } from 'styled-components'
import { withSize } from 'react-sizeme'

class ThreeScene extends React.Component {
  constructor(props) {}
  render() {}

  componentDidMount() {}

  componentWillUnmount() {}

  animate = () => {}

  componentWillReceiveProps({ size: { width, height } }) {}
}

const WrappedScene = withTheme(withSize({ monitorHeight: true })(ThreeScene))
复制代码

在构造函数中，我们对状态进行了初始化，其中包括了视图的大小。因此，我们当接收新的状态值时，可以在 componentWillReceiveProps 方法中与初始状态进行对比。由于需要访问实际的 DOM 元素以注入 ThreeJS 的 renderer，因此需要在 render 方法中用到 ref 属性：

const View = styled.div`
  width: 100%;
  height: 100%;
`
class ThreeScene extends R