reactjs - 缩小浏览器窗口时，React + Three.js Canvas 无法正确调整大小

Question

我正在使用 react 和 three.js 在浏览器中显示一些 3D 模型。只要 three.js 组件是页面上唯一具有可见内容的元素，一切都可以正常工作。 three.js Canvas 将调整大小就好了。您可以将它包裹在其他容器中，它仍然可以正常工作。当另一个元素或组件作为同级添加时，问题就开始了。

我想要一个带有固定宽度侧边栏的视口(viewport)。我正在使用一个 flexbox 行容器来执行此操作，该容器环绕着一个侧边栏组件(一个设置了最小宽度的简单 div)和响应式 three.js 组件。

将窗口大小调整得更大效果很好， Canvas 适本地填充了浏览器窗口。但是，当将窗口调整得更小时， Canvas 不会正确地重新计算它相对于静态宽度侧边栏剩余的可用空间的大小，从而导致 Canvas 无法完全适合浏览器并引入滚动条。

Canvas 确实缩小了一些，但不足以将其完全保留在浏览器窗口中。如果一个组件位于 three.js 组件的上方或下方，垂直方向也会出现同样的问题。如果您在浏览器窗口较小时重新编译应用程序，刷新后的 View 将正确调整 Canvas 的大小。

根据 StackOverflow 上许多答案的建议，three.js react 代码看起来像这样:

export class Viewport extends React.Component {

  componentDidMount() {

    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    window.addEventListener("resize", this.handleWindowResize);

    // setup scene
    this.scene = new THREE.Scene();

    //setup camera
    this.camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
    this.camera.position.set( 0, 5, 10 );

    // setup rendering
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setClearColor('#666666');
    this.renderer.setSize(width, height, false);
    this.mount.appendChild(this.renderer.domElement);

    // setup geo
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: '#433F81' });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
    ...

  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleWindowResize);
    this.mount.removeChild(this.renderer.domElement);
  }

  handleWindowResize = () => {
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;

    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(width, height, false);
  };

  render() {
    return (
      <div className="viewport" style={{display: 'flex', width: "100%", height: "100%"}} ref={(mount) => { this.mount = mount }} />
    );
  }
}

样式是简单的 css flexbox，元素设置为全宽和全高 (100%)，侧边栏设置了最小宽度。

.flex-row-container {
  display: flex;
  flex-flow: row;
  height: 100%;
  width: 100%;
}

.sidebar {
  display: block;
  min-width: 250px;
  background-color: var(--color-mid-gray);
  margin: 3px 4px 3px 4px;
  box-sizing: border-box;
  border: 1px solid var(--color-mid-gray);
  outline: 3px solid var(--color-mid-gray);
}

我错过了什么？

Answer 1

所以在评论之后，我想我已经按照你想要的方式工作了。

基本上，
我删除了视口(viewport)上的设置 display:flex，因为这是一个带有 display:flex 的元素(flex-row-container div)的子元素，它不需要它，但确实需要 flex:1 1 auto 来设置它在 flexbox 中的显示方式(这是我在 css 而不是 JSX 中所做的)。
然后问题变成视口(viewport) div 会扩展，但不会收缩(因为它包含 Canvas )，因此添加 overflow:hidden 解决了这个问题。
进行这些更改后，this.mount.clientWidth 将获得所需的结果，然后可用于设置三个 Canvas 的大小。

参见 This Fiddle .
我在示例中添加了渲染和动画，以便可以轻松查看结果。

希望这对您有所帮助。