编辑：

Question

我有以下代码，我试图将3d（使用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;

编辑：

我能够将错误追溯到resize文件中的REGL函数。

 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”字符串（来自州）。当它与画布放在同一个div中时，getBoundingClientRect（）调用返回画布元素的高度加上文本字符串的高度。

然后将此高度传递给因此增长的画布。

因为canvas必须完全填充其父div，所以将画布设置为display：“block”

非常重要

<强>解决方案：

包含画布的div必须仅包含画布。

和

必须将canvas元素设置为：display: "block"

那么你需要做什么：从canvas元素以外的所有内容中清除容器div。

e.g。从渲染函数中删除此{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;");
...

在React组件中进行REGL渲染

编辑：

1 个答案: