Help on adjusting a scene inside a container

Questions
1

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

I have this page: https://www.songnes.com/gift/page3.html
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: http://songnes.com/g/DraggingObjects.html
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
http://songnes.com/gift/page2drag.html
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: https://www.songnes.com/gift/page2drag.txt

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

2

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
3

Hi marquizzo: Works Perfect!!!
Thank you very much… this is the result: http://songnes.com/gift/page2drag.html

It’s perfect!

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

the

  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?

4

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.

5

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