目标
在本文中,我们将制作一个组件,用于对三维空间的对象的线性变换进行可视化。最终效果如下面的动图所示,或者你也可以在此网页体验。
组件
当我们要在浏览器中制作 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