Help on adjusting a scene inside a container

I got as far as I could. My head hurts trying to solve this. Can someone please help me.

I have this page:
as you can see it works great! The black container is perfect inside my web-page

I’m trying to put this example you guys gave me:
many cubes that I can drag one by one.
inside my normal black scene, like in page3.html

And I got this so far, almost, but I can not get it to be in the right place
as you can see is on the bottom of the page.

And the code I have
container = document.getElementById(“myScene”);
and this in my html

You can see the full code here:

Can someone help me please figure this out. I really hope so. Thank you for all your help

You have the correct append function at the beginning of your init():

container.appendChild( renderer.domElement );

but then a few lines down, after you create the shadowMap, you override this with

document.body.appendChild( renderer.domElement );

So the second one takes it out of container and puts it at the end of the document.

1 Like

Hi marquizzo: Works Perfect!!!
Thank you very much… this is the result:

It’s perfect!

So, just to understand, please tell me if this is correct.


  container.appendChild( renderer.domElement );

is to put the script inside the container…

and the

 document.body.appendChild( renderer.domElement );

is to put the script, on the bottom of the page…
is this correct?

No, you’re not putting the script inside the container. You’re putting the <canvas> element (that the WebGL renderer creates) inside the container. See here for a quick tutorial on how append handles HTMLNodes.

Thank you…
I’m going to study more Javascript… that’s for sure!!