Help! my project does not work locally

Bugs
1

I did the following project
https://playground.babylonjs.com/#14KRGG#441
which works without problems in playground but when downloading it and running it locally it just doesn’t work, I don’t know if I should configure the html that it downloads to download add-ons.
when viewing the browser console it throws me 3 errors:

(index): 340 Uncaught (in promise) TypeError: Cannot read property ‘insertBefore’ of null

  1. at setupRenderer ((index): 340)
    // add css3DContainer behind WebGl scene
    webGLContainer.insertBefore (css3DContainer, webGLContainer.firstChild)
  2. at createScene ((index): 299)
    // Setup the CSS css3DRenderer and Youtube object
    let css3DRenderer = setupRenderer (videoViewMesh, UrlYoutube, scene);
  3. at initFunction ((index): 610)
    scene = createScene ();};

I do not know why locally I get these errors, if in playground I do not get any. I hope you can help me, because I am very confused and anguished that I cannot make my project work.

2

Hello and welcome!

Line 264: let webGLContainer = document.getElementById('canvasZone')
The matter is that Playground page has already in it’s code the HTML element “canvasZone”, but your downloaded page has no such element. So document.getElementById('canvasZone') returns undefined.
You need to create this element at your HTML page to run it locally.
<div id="canvasZone">
<canvas id="renderCanvas"></canvas>
</div>

image
image1906×770 408 KB

2 Likes
3

thank you so much.

1 Like