时间戳

首页 > 解决方案 > 在 kepler.gl 中请求渲染新帧

reactjs - 在 kepler.gl 中请求渲染新帧

问题描述

如何在 kepler.gl 中请求渲染新帧？

我创建了一个动画的 deck.gl 图层，就像 vis.academy 教程中的那个：http: //vis.academy/#/custom-layers/5-custom-uniform

我还成功地将该层与 kepler.gl 集成。
但是，仅当我移动鼠标或视口时，kepler.gl 才会更新图层（渲染新帧）。

在deckl.gl中，新帧的请求是在应用程序的初始化中配置的：

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight,
        longitude: -74,
        latitude: 40.7,
        zoom: 11,
        pitch: 30,
        maxZoom: 16
      }
    };
    this._resize = this._resize.bind(this);
    this._animate = this._animate.bind(this);
    this._onViewportChange = this._onViewportChange.bind(this);
  }

……

  _animate() {
    this.setState({});
    this._animation = window.requestAnimationFrame(this._animate);
  }

但是，到目前为止，我无法在 kepler.gl 中找出相应的操作。

标签： reactjsreduxdeck.glkepler.gl

解决方案

实际上，我设法通过以下方式将问题中的代码移植到 kepler.gl app.js 来使动画正常工作：

首先，将以下方法添加到 App 类定义中：

class App extends Component {
  _animate() {
    this.setState({});
    this._animation = window.requestAnimationFrame(this._animate);
  }

然后，添加 componentDidMount() {

this._animate();

add in componentWillMount() { //（此行在deck.gl示例中的App的构造函数中调用。）

this._animate = this._animate.bind(this);

最后在 componentWillUnmount() {

window.cancelAnimationFrame(this._animation);

（我假设）在这里发生了什么：

  • 调用 this.setState({}); 将改变应用程序的内部状态，从而触发新帧的渲染。
  • 将动画调用传递给 window.requestAnimationFrame(this._animate); 将导致浏览器每秒调用 _animate() 60 次的无限循环。
  • 当应用程序（组件）被卸载时，无限循环将被中断。

任何有更深入见解的人，请随时扩展我非常肤浅的解释。

推荐阅读