# Three JS rendering blank white screen

**URL:** <https://discourse.threejs.org/t/three-js-rendering-blank-white-screen/37555>\
**Category:** Questions\
**Tags:** getting-started\
**Created:** [April 27, 2022, 8:51pm UTC](https://discourse.threejs.org/t/three-js-rendering-blank-white-screen/37555 "2022-04-27T20:51:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [April 27, 2022, 8:51pm UTC](https://discourse.threejs.org/t/three-js-rendering-blank-white-screen/37555/1 "2022-04-27T20:51:12Z")

</div>

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.

> **[Ray Test - CodeSandbox](https://codesandbox.io/s/ray-test-km2wru?file=%2Fsrc%2FWorld.js)**
>
> Ray Test by michaelnicol using parcel-bundler, three

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?

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

```

---

<div class="post-metadata">

**Author:** ![JuanP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juanp/32/25869_2.png) [@JuanP](https://discourse.threejs.org/u/JuanP)\
**Post date:** [April 27, 2022, 9:57pm UTC](https://discourse.threejs.org/t/three-js-rendering-blank-white-screen/37555/2 "2022-04-27T21:57:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Michael\_Nicol](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michael_nicol/32/14659_2.png) [@Michael\_Nicol](https://discourse.threejs.org/u/Michael_Nicol)\
**Post date:** [April 28, 2022, 3:56am UTC](https://discourse.threejs.org/t/three-js-rendering-blank-white-screen/37555/3 "2022-04-28T03:56:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JuanP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juanp/32/25869_2.png) [@JuanP](https://discourse.threejs.org/u/JuanP)\
**Post date:** [April 28, 2022, 7:14am UTC](https://discourse.threejs.org/t/three-js-rendering-blank-white-screen/37555/4 "2022-04-28T07:14:29Z")

</div>

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.

> **[Ray Test (forked) - CodeSandbox](https://codesandbox.io/s/ray-test-forked-e1mp6e?file=%2Fsrc%2FWorld.js)**
>
> Ray Test (forked) by jimi75 using parcel-bundler, three