0

我有以下代码，我试图将 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.

4

1 回答 1

1

我对同样的问题感到困惑，事实证明，我可以看到您也在使用的示例代码是错误的。

问题在于“Test REGL”字符串（来自状态）。当它被放入与画布相同的 div 中时，getBoundingClientRect() 调用返回画布元素的高度加上文本字符串的高度。

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

因为画布必须完全填满其父 div，所以将画布设置为 display: "block" 很重要

解决方案：

  • 包含画布的 div，必须只包含画布。

和

  • 画布元素的样式必须为：display: "block"

所以你需要做的是：从除画布元素之外的所有内容中清除容器 div。

例如，从渲染函数中删除这个：{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;");
...
于 2017-09-14T12:38:54.547 回答