In the realm of resizing three.js, perhaps the optimal approach is to code it in a way that allows it to adapt to the size of the canvas set by CSS. This method ensures that your code remains functional regardless of how the canvas is utilized, eliminating the need for modifications based on different scenarios.

When establishing the initial aspect ratio, there's no justification for setting it beforehand because it will be adjusted in accordance with any variances in the canvas size. Setting it twice only serves to create redundant code.

// Aspect ratio is not necessary here since we will be adjusting it dynamically
// to accommodate changing canvas sizes. The default aspect is set to 2, 
// reflecting the canvas default size of 300w/150h = 2.
const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);

Subsequently, a code snippet is required to resize the canvas to match its display dimensions.

function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;

  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    // Update any render target sizes here
  }
}

Call this function in your render loop before rendering the scene.

function animate(time) {
  time *= 0.001;  // Convert time to seconds

  resizeCanvasToDisplaySize();

  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 1;

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Provided are three examples showcasing different CSS configurations and methods for creating the canvas with three.js.

"use strict";

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});

// Aspect ratio is not crucial to set here as it will be updated dynamically
const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
camera.position.z = 400;

// Additional code goes here...

<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>

Example 2 showcases a fullscreen canvas where three.js generates the canvas:

"use strict";

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// Additional code for scene setup...

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>

Example 3 involves an inline canvas:

"use strict";

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector(".diagram canvas")});

// Additional configurations for scene and camera...

<p>Insert your description here.</p>
<span class="diagram"><canvas></canvas></span>

The fourth example presents a canvas with 50% width, resembling a live editor setup:

"use strict";

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});

// Additional setup for camera, scene, and objects...

<div class="frame">
  <div id="result">
    <canvas></canvas>
  </div>
  <div id="editor">
    <p>Illustration of the example on left or the code goes here.</p>
    <p>No need to modify the code to handle this scenario.</p>
    <p>The same code accommodates fullscreen and inline canvas setups.</p>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>

The text emphasizes the versatility of the code and the compatibility with varying scenarios, showcasing different CSS approaches for canvas rendering.

In my opinion, the most effective way to adjust the canvas size differs from the answer provided earlier. Rather than relying on the accepted method, which involves running the function resizeCanvasToDisplaySize at every animation frame, I suggest a different approach.

My suggestion is to implement a window event listener for 'resize' and use a boolean variable to track whether the user has resized the window. Within the animation frame, you can check this boolean value and resize the canvas accordingly if a resize has occurred.

let resized = false

// Event listener for window resize
window.addEventListener('resize', function() {
    resized = true
})

function animate(time) {
    time *= 0.001

    if (resized) resize()

    // Rotate the cube
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    // Render the scene
    renderer.render(scene, camera)

    // Continue the animation
    requestAnimationFrame(animate)
}

function resize() {
    resized = false

    // Update the canvas size
    renderer.setSize(window.innerWidth, window.innerHeight)

    // Update the camera
    const canvas = renderer.domElement
    camera.aspect = canvas.clientWidth / canvas.clientHeight
    camera.updateProjectionMatrix()
}

Could it be that the current suggestions miss the mark by suggesting resizing the canvas within the animation loop?

It's important for the animation loop to be as efficient as possible, running ideally 30+ times a second, and not bogged down with unnecessary tasks. It should be optimized to give the slowest system the maximum frames per second.

I believe there's merit in calling the resize function from the resize event listener, in line with the suggestion made by Meindert Stijfhals.

Here's an example of how it could be done:

var container = renderer.domElement.parentElement;
container.addEventListener('resize', onContainerResize);

function onContainerResize() {
    var box = container.getBoundingClientRect();
    renderer.setSize(box.width, box.height);

    camera.aspect = box.width/box.height
    camera.updateProjectionMatrix()
    // optional animate/renderloop call put here for render-on-changes
}

If you have a render-only-on-changes setup, you can call the render function at the end of the resize function. Otherwise, the next render loop will automatically render with the new settings.

For those who may not have noticed from the previous comments or the API documentation, here's a heads up: When using the renderer's setSize() method to set the canvas size, remember that it takes CSS pixels, not physical device pixels. This means that on high-DPI screens, the number of pixels generated is calculated based on width * window.devicePixelRatio and height * window.devicePixelRatio. This detail is crucial when, for instance, you're attempting to create a specific-sized GIF using frames from three.js. In my case, the solution involved:

camera.aspect = gifWidth / gifHeight;
camera.updateProjectionMatrix();
var scale = window.devicePixelRatio;
renderer.setSize( gifWidth / scale, gifHeight / scale, true );

While this approach may not be perfect, it did the job for me.

While @gman provided a comprehensive answer, it's essential to summarize the possible scenarios to understand why the responses vary significantly.

In the first scenario, if the container is the global(head) object like window, <body>, or <frameset>, the easiest approach would be to utilize

window.addEventListener('resize', onResize()) { ... }

On the other hand, the second scenario, which was originally inquired, involves making the container of Three.js WebGL output responsive. Whether it's a canvas, a section, or a div, resizing can be managed effectively by targeting the container in the DOM and using the renderer.setsize() method with the container's clientWidth and clientHeight. There's no need to use addEventListener in this case; instead, the onResize() function can be invoked in the render loop function as per @gman's detailed implementation.

Below is the solution I used to adjust the size of my canvas rendering:

To start, the scene is displayed within a

<div id="your_scene">

<div class="relative h-512 w-512">
    <div id="your_scene"></div>
</div>

CSS:

.relative {
    position: relative;
}

h-512 {
    height: 51.2rem;
}

w-512 {
    width: 51.2rem;
}

#your_scene {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Next, retrieve the dimensions:

this.mount = document.querySelector('#your_scene');
this.width = document.querySelector('#your_scene').offsetWidth;
this.height = document.querySelector('#your_scene').offsetHeight;

Afterwards, set the renderer background to transparent, adjust pixel ratio, and match the container size with the renderer. Three.js combines the your_scene container with the renderer <canvas> element, hence, finish with appendChild:

this.renderer = new THREE.WebGLRenderer({ alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(this.width, this.height);
this.mount.appendChild(this.renderer.domElement);

By following these steps, you should be able to analyze your scene effectively. The key step is the setSize function, but be sure to have the correct dimensions and camera positioning for optimal results.

If you encounter issues despite following a similar approach, review your camera perspective and confirm the visibility of your scene objects.

Apologies for bringing this back up, but a quick Google search led me to the solution I was looking for. I found a way to resize a canvas to always fit the screen using just CSS.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>minimal threejs</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #canvas-wrapper {
      background-color: grey;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #main-canvas {
      border: 5px solid red;
      max-width: calc(100vh / 3 * 4);
      width: 100%;
      image-rendering: pixelated;
    }
  </style>

  <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d5c9d3c4c4e1918f9094908f91">[email protected]</a>/build/three.module.js"
        }
    }
</script>
</head>

<body>
  <div id="canvas-wrapper">
    <canvas id="main-canvas"></canvas>
  </div>

  <script type="module">
    import * as THREE from 'three';

    const main_canvas = document.getElementById("main-canvas");

    const n = 4
    let cwidth = 640 / n;
    let cheight = 480 / n;
    main_canvas.setAttribute("width", cwidth + "px");
    main_canvas.setAttribute("height", cheight + "px");

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, main_canvas.clientWidth / main_canvas.clientHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer({
      antialias: true,
      canvas: main_canvas,
    });

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();

  </script>
</body>

</html>