我编写了一个小的 Three.js 动画，我按照以下方式将其放在我的 HTML 页面中:
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
</div>
我在 main_simulation.js 中处理“mainWindow”的 Three.js 场景的位置
不幸的是，我无法在 </div> 之后添加一些文本或其他 HTML 元素:它们系统地放在 <div id="mainWindow">... </div> 之上 block
您可以在以下链接中看到此问题:
也许这个问题是因为我在 HTML 页面的底部加载了 JS 脚本，但我不确定。
如果我在 <head> 中加载 JS 脚本部分，我无法使 Three.js 场景出现。
谁能给我一个技巧，让我在 Three.js 的主 div 之后放置文本？
问候
更新 1:
我也尝试过:
<div id="mainWindow" class="popup_block"></div>
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
但是问题还是存在
更新 2:
这是我的问题的一个例子:
在 HTML 源代码中，文本位于 three.js div 的下方，但渲染使其位于上方。
更新 3:
最佳答案
首先，这不是 three.js 的问题，但还有一个重要的问题需要解决。
无论你有什么功能，无论是简单的图像定位，还是将渲染器放在 div 中的 three.js，都很容易忘记附加的内容。
当 html 框架相当稀缺时，它可能会发生，因为大部分页面都是在 js 中创建的。除了原始开发人员之外，任何人都不清楚，因此他需要跟踪正在发生的事情。 Imo 这有点不切实际。
我不会在 js 中的 body 中创建元素，我宁愿将它们附加到现有的包装器容器中，这样我就可以使用任何 css 轻松地管理它们:
<div id="mainWindow"></div>
<div id="image"></div>
<div id="below"></div>
如果您将目标 div 从 body 切换到 #image，您可以根据需要重新排列它们，而无需对 js 代码进行任何更改，这可能会导致一系列不可预知的行为。
现在可以使用 position:relative; css 属性进行所需的排列。
关于javascript - 在 <div id ="mainWindow"> 定义的 three.js 场景后设置文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45807705/