BabylonJs React 项目 - 调整窗口大小

Question

在 React 中使用 Hooks（功能组件）而不是类来完成 BabylonJs Reactjs 教程，我遇到了调整窗口大小的问题。

// This code block cannot be added in a component...
  onResizeWindow = () => {
    if (this.engine) {
      this.engine.resize();
    }
  };

... so I rewrote it to 
const onResizeWindow = props => {
    if (props.engine) {
      props.engine.resize();
    }
  };

... Then added the listener to the engine hook like below

 useEffect(() => {
    let engine = new BABYLON.Engine(
      canvas,
      true,
      props.engineOptions,
      props.adaptToDeviceRatio
    );

    let scene = new BABYLON.Scene(engine);

    if (typeof props.onSceneMount === "function") {
      props.onSceneMount({
        scene,
        engine,
        canvas
      });
    } else {
      console.error("onSceneMount function not available");
    }

    window.addEventListener("resize", onResizeWindow(props));
  });

这不起作用。我尝试了上述代码的一些变体，但它没有适当地调整屏幕大小。还有其他人遇到过这个问题吗？我四处寻找问过这个问题的其他人，但找不到。

Answer 1

我希望现在回答这个问题还不算太晚。但我确实遇到过几次同样的问题。这是我的解决方案。

我们需要两个部分。

首先，在功能组件中。

 <div id="canvasWrapper">
    <SceneComponent antialias onSceneReady={onSceneReady} observeCanvasResize adaptToDeviceRatio onRender={onRender} id="my-canvas" />
 </div>

我们需要 adaptToDeviceRatio 和 observeCanvasResize 属性。

第二，

对于CSS。我们还需要添加这些以确保它填满整个窗口。

html, body {
  width: 100%;
  height:100%;
  margin: 0px;
  padding: 0px;
}
#canvasWrapper {
  width: 100vw;
  height:100vh;
}
canvas{
  width: 100%;
  height:100%;
  margin: 0px;
  padding: 0px;
  background-color: #000000;
  display: block;
}

通过应用这些。您应该能够按预期获得正确的调整大小行为。