Are there limits to how many div's a canvas element can be nested it?
Question
I have some webGL(threejs) rendering in canvas inside a div working exactly as I would think with the following structure...
<body>
<div id='header'></div>
<div id="webGLDiv">
<script></script>
</div>
<div id='someInfo'></div>
</body>
However, when I nest webGLDiv into a parent div like this....
<body>
<div id="websiteContents">
<div id='header'></div>
<div id="webGLDiv">
<script></script>
</div>
<div id='someInfo'></div>
</div>
</body>
In the browser the script information stays inside webGLDiv, but the canvas element gets pushed just above the closing body tag.
Does anyone no why this is happening? In my first example above, the canvas gets placed right after webGLDiv.
1 answers
solution1
4 ACCPTED 2017-04-30 18:26:41
The placement of the <canvas> is controlled by this line in the script:
document.body.appendChild(renderer.domElement);
The renderer.domElement is your <canvas> and the document.body is the parent element it's being placed within. (The position of the <script> element isn't used by Three.js for this.)
To change where it's placed, you'll want to specify a different parent element. To have that be the <div id="webGLDiv"> , you could use:
document.getElementById('webGLDiv').appendChild(renderer.domElement);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.