My canvas height is stucked

Questions
#1

Hello! I’m currently learning three.js and I have a little problem since the beginning that I thought would be resolving itself during learning. My canvas height is stuck on 150px at each window size and also with responsive. And my inspector tell me just that this parameter come from element.style :sweat:…

So, like I don’t find my mistake, here’s the code in the World.js file and the main.js file :

//---------------------------This is the World.js file---------------------------
import { createCamera } from './components/camera.js';
import { createCube } from './components/cube.js';
import { createLights } from './components/lights.js';
import { createScene } from './components/scene.js';

import { createRenderer } from './systems/renderer.js';

// These variables are module-scoped: we cannot access them from outside the module
let camera;
let renderer;
let scene;

class World {
    constructor() {
        camera = createCamera();
        scene = createScene();
        renderer = createRenderer();
        
        const cube = createCube();
        const light = createLights();
        
        scene.add(cube, light);
        
        this.canvas = renderer.domElement;
    }
    
    render() {
        renderer.render(scene, camera);
    }
    
    setSize(width, height, pixelRatio) {
        camera.aspect = width / height;
        
        // update the camera's frustum
        camera.updateProjectionMatrix();
        
        renderer.setSize(width, height);
        
        renderer.setPixelRatio(pixelRatio);
    }
}

export { World };


//---------------------------This is the main.js file---------------------------
import { World } from './world/World.js';

function main () {
    const world = new World();
    
    const container = document.querySelector('#scene-container');
    
    container.append(world.canvas);
    
    world.setSize(
        container.clientWidth,
        container.clientHeight,
        window.devicePixelRatio,
    );
    
    window.addEventListener('resize', () => {
        world.setSize(
            container.clientWidth,
            container.clientHeight,
            window.devicePixelRatio,
        );
        
        world.render()
    });
    
    world.render();
}

main();

I hope that you’ll help me and sorry if the message is not sufficiently clear. Don’t hesitate to precise the points I’ve badly explain :sweat:

#2

What’s in your CSS file? The size will be set from the size of the #scene-container element.

#3

nothing for the moment, apart from the basic tools box-sizing: border-box; margin: 0; and padding:0;

#4

All that I have about the origin of these 150px of height is what is created (the canvas element) by the main.js in the HTML when loading file on browser :

<div id="scene-container"><canvas width="1896" height="150" style="width: 1896px; height: 150px;"></canvas></div>

The width scales itself depending of the scale of the window but the height remains stuck at 150px

#5

Try removing everything from your CSS file except for this:

body {
  margin: 0;
  overflow: hidden;
}

#scene-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
3 Likes
#6

Wonderful, it’s functioning! But, normally, doesn’t it should functioning without this? (That’s the reason I’ve preferred to don’t do anything in CSS)

#7

You could use window.innerWidth/innerHeight instead of a container (in which case do document.body.append(world.canvas); to take up the full window width. But you still have to make sure the html and body elements take up the full window using CSS.

The advantage of using a container is that you can make the scene any size. If you want to take up a quarter of the window, just change the container width/height to 25% and it’s automatic.

#scene-container {
  position: absolute;
  width: 25%;
  height: 25%;
}
#8

Ow okay, thank you. That help me a lot! :grin: