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 …
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