Incorrect viewport area when using WebGlRenderer.setViewport in ThreeJS

Question

I am trying to integrate a blender-like helper gimble into my project.

Here is an MRE, I just added the grid layout to an existing sandbox, and imported the gimble from threejs examples. https://codesandbox.io/p/sandbox/lively-haze-kf6slt

A breakdown of the code.

I just initialize the helper after importing it from three's examples

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

...

const helper = new ViewHelper(camera, canvas);

// render function

  renderer.render(scene, camera);

  helper.render(renderer);

You can add this to any threejs example apart from the one linked above.

As for the dom structure, I have grid layout.

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

with the following bit of styling

.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;
}

Unfortunately, my project already has a complex layout with toolbars, as depicted by the 44px grid gutters. I determined that the renderer.setViewport() calculation was incorrect. However, I am unable to piece together the correct co-ords. I tried using the offsetTop and offsetLeft of the parent element, but I always get the gimble clipping off the edge.

Answer 1

It seems like for threejs to correctly assign width and height to the nested container with inset: 0 I also needed to add width: 100%; height: 100% to the CSS.

Here is the code sandbox with the corrected CSS. https://codesandbox.io/p/sandbox/staging-brook-4zprvt