React组件中的REGL呈现

Question

我在下面的代码中尝试将3d seen (使用REGL)呈现到React组件App中。一开始它看起来渲染得很好。但我注意到，如果我调整浏览器窗口的大小，组件呈现的div高度会增加。因此，任何窗口调整都意味着直接转换为高度的增长，直到div比窗口高。我正在尝试理解REGL和REACT是如何协同工作的，所以我不确定应该将这种行为归因于什么。这可能是我对其中任何一种的误解。

import React, {
  Component
} from 'react';
import regl from 'regl';

class App extends Component {
  constructor() {
    super()
    this.state = {
      reglTest: "Test REGL",
    };
  }
  componentDidMount() {
    const rootDiv = document.getElementById('reglTest');
    console.log(rootDiv);

    var reglObj = regl({
      container: rootDiv,
    })

    reglObj.frame(({
      tick
    }) => {
      reglObj.clear({
        color: [(tick % 100 * 0.01), 0, 0, 1],
        depth: 1,
      });

      reglObj({
        frag: `
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }`,
        vert: `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0, 1);
  }`,
        attributes: {
          position: [
            [(tick % 100 * 0.01), -1],
            [-1, 0],
            [1, 1]
          ]
        },
        count: 3
      })()
    });

  }
  render() {
    return ( <div id = "reglTest" > {this.state.reglTest} < /div> );
  }
}

export default App;

编辑：

我能够追踪到REGL文件中的一个resize函数的bug。

 function resize () {
    var w = window.innerWidth;
    var h = window.innerHeight;
    if (element !== document.body) {
      var bounds = element.getBoundingClientRect();
      w = bounds.right - bounds.left;
      h = bounds.bottom - bounds.top;
    }
    canvas.width = pixelRatio * w;
    canvas.height = pixelRatio * h;
    extend(canvas.style, {
      width: w + 'px',
      height: h + 'px'
    });
  }

它最终将h计算为某个较高的值(比如调整了一下浏览器窗口后的1000+ )，而window.innerHeight仍然是320。

Answer 1

我被同样的问题弄糊涂了，事实证明，我可以看到您也在使用的示例代码是错误的。

问题出在"Test REGL“字符串(from state)。当将其放入与画布相同的div中时，getBoundingClientRect()调用将返回画布元素的高度加上文本字符串的高度。

然后将此高度传递给作为结果而增长的画布。

由于canvas必须完全填充其父div，因此将canvas设置为显示"block“非常重要。

解决方案：

• 包含画布的目录只能包含画布。

和

必须将画布元素的样式设置为：display: "block"：

因此，您需要做的是:从除canvas元素以外的所有内容中清除容器div。

例如，从render函数中删除this：{this.state.reglTest}，使其看起来如下所示：

render() {
  return ( <div id = "reglTest" >  < /div> );
}

在componentDidMount函数中，在调用regl()之后。

componentDidMount() {
  var reglObj = regl({
    container: rootDiv,
  })

添加此选项以将画布设置为显示块。

const canvas = document.querySelector("#reglTest > canvas:first-of-type");
canvas.setAttribute("style", "display:block;");

所以它看起来是这样的

componentDidMount() {
...
  var reglObj = regl({
    container: rootDiv,
  })
const canvas = document.querySelector("#reglTest > canvas:first-of-type");
canvas.setAttribute("style", "display:block;");
...