在ThreeJS中使用WebGlRenderer.setViewport时视口区域不正确

Question

我正在尝试将类似搅拌机的辅助万向节集成到我的项目中。

这是一个 MRE，我刚刚将网格布局添加到现有的沙箱中，并从 Threejs 示例中导入了 gimble。 https://codesandbox.io/p/sandbox/lively-haze-kf6slt

代码分解。

我只是在从三个示例导入助手后初始化它

import { ViewHelper } from "three/examples/jsm/helpers/ViewHelper";

...

const helper = new ViewHelper(camera, canvas);

// render function

  renderer.render(scene, camera);

  helper.render(renderer);

您可以将其添加到除上面链接之外的任何 Threejs 示例中。

至于dom结构，我有网格布局。

<div id="root">
  <div></div>
  <div></div>
  <div></div>
  <div class="container">
    <canvas class="webgl">
      <script src="src/index.js"></script>
    </canvas>
  </div>
</div>

使用以下一些样式

.container {
  position: relative;
}

.webgl {
  position: absolute;
  inset: 0;
}

#root {
  display: grid;
  grid-template-rows: 44px auto;
  grid-template-columns: 44px auto;
  gap: 2px;
  width: 100dvw;
  height: 100dvh;
}

#root > div {
  background-color: black;
  border: 1px solid red;
}

不幸的是，我的项目已经有一个带有工具栏的复杂布局，如 44px 网格装订线所示。我确定

renderer.setViewport()

计算不正确。但是，我无法拼凑出正确的坐标。我尝试使用父元素的 offsetTop 和 offsetLeft，但我总是将万向节从边缘剪掉。

Answer 1

Threejs 似乎可以使用

inset: 0

正确地将宽度和高度分配给嵌套容器，我还需要将

width: 100%; height: 100%

添加到 CSS。

这是带有更正后的 CSS 的代码沙箱。 https://codesandbox.io/p/sandbox/staging-brook-4zprvt