Question

我在div中的一些webGL（threejs）渲染工作正如我想象的那样使用以下结构......

<body>
   <div id='header'></div>
   <div id="webGLDiv">
      <script></script>
   </div>
   <div id='someInfo'></div>
</body>

但是，当我将webGLDiv嵌入到像这样的父div中时......

<body>
   <div id="websiteContents">
      <div id='header'></div>
      <div id="webGLDiv">
         <script></script>
      </div>
   <div id='someInfo'></div>
   </div>
</body>

在浏览器中，脚本信息保留在webGLDiv中，但canvas元素被推到正在关闭的body标记之上。

有没有人不知道为什么会这样？在我上面的第一个例子中，画布正好放在webGLDiv之后。

Answer 1

<canvas>的展示位置由脚本中的这一行控制：

document.body.appendChild(renderer.domElement);

renderer.domElement是您的<canvas>，而document.body是其所在的父元素。（对于此，Three.js不使用<script>元素的位置。）

要更改放置位置，您需要指定其他父元素。要将其作为<div id="webGLDiv">，您可以使用：

document.getElementById('webGLDiv').appendChild(renderer.domElement);

是否可以嵌套多少div的canvas元素？

1 个答案: