Three JS rendering blank white screen

Questions
1

Hello,

I am working on a template codesandbox for me to use for future projects. Its supposed to set up a basic three js scene.

The render clocks seems to be rendering, if I console.log the scene it it appears to have a cube, but I just get a blank white screen.

In this case, I am sending in a pre-made domElement for the renderer to use instead of the renderer.domElement. Is this the issue?

  const container = document.getElementById("app");
  let world = new WorldTemplate(container);
...
2

Hi.

At first view in line 108

renderer.setSize(this._container.innerWidth, this._container.innerHeight);

this._container.innerWidth and this._container.inneheight are undefined so the canvas is 0x0.

3

How would I access the height? container.style.height and innerHeight are both either undefined or empty strings.

4

I see to major problems in you code

  1. The css file is not linked to the html, so, the #app div is 0x0.

Add <link rel="stylesheet" href="src/styles.css" /> to the <head> of your html to solve it

  1. innerWidth & innerHeight are properties of the window object, for HTML elements you should use _container.clientWidth and _container.clientHeight

Did those changes to your example and the canvas appears all black.