Recently, I created a small Three.js animation and embedded it in my HTML page like this:
<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>
In my main_simulation.js, I manipulate the main "mainWindow" scene in Three.js.
However, I am encountering an issue where any text or additional HTML elements I try to add after the closing </div> tag of "mainWindow" end up appearing above it. You can see the problem in action here.
I suspect that the problem might be related to the fact that I load JS scripts at the bottom of the HTML page, but I'm not entirely sure. When I attempt to move the script loading section to the <head> section, the Three.js scene fails to render.
If anyone has any tips or tricks on how I can solve this issue and successfully append text after the main div of Three.js, I would greatly appreciate it.
Best regards,
UPDATE 1 :
I have also tried the following approach:
<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 ???
Unfortunately, the issue persists despite trying out different methods.
UPDATE 2 :
To better illustrate my problem, check out this image link showing the discrepancy between the placement of text in the HTML source versus its rendering position.
The text should be positioned below the three.js div, but the rendering displays it above instead.
UPDATE 3 :
For further clarification, refer to this image link