How can I Make my Scene Unscrollable/100% Fitting?

Questions
1

Just started with Three.JS about a week ago, and I’m loving it so far! I’ve just learned how to import 3d models, but there’s this issue that persists throughout all my little projects where my window will always have some part of it that’s not part of the three.JS scene, like this:

Screen Shot 2024-03-05 at 8.49.29 PM
Screen Shot 2024-03-05 at 8.49.29 PM2170×1406 76.8 KB

The white margin that isn’t part of the scene is annoying as it gets in the way of scrolling around with OrbitControls and is just unpleasant to look at. How could I make it so that the scene completely takes up the whole
window?

(Here’s a Fiddle to demonstrate this)

2

Hi Mr.Junk_Mail

It seems that the default margin of the existing unused canvas element and body is doing a bad thing.

I hope this helps

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>

<body>
</body>
<script type="importmap">
    {
        "imports": {
        "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.161.0/three.module.js",
         "three/addons/": "https://unpkg.com/three@v0.161.0/examples/jsm/"
        }
     }
</script>
<style>
body {
  margin: 0;
}
</style>
<script type="module" src="/tetrahedron.js"></script>
</html>
1 Like
3

Yup good tip.

Also… in a resize handler, there is a 3rd boolean parameter to renderer.setSize on the renderer, that when set = false, prevents the renderer from changing the width/height .style of the canvas, and thus lets you fully control the canvas scaling via CSS.
Otherwise when you .setSize on the renderer it can cause a feedback loop where the canvas style changing, causes the canvas to change size, the margin is then applied by css, which makes the document overflow which can trigger another resize.