Hello, I am currently working on a project that involves displaying the Earth and I am in need of assistance with positioning some buttons on the screen. Currently, I am facing an issue where the buttons appear either above or below the JavaScript code. I have attached a screenshot as well as the HTML code for reference. Any help would be greatly appreciated. Please let me know if you require any additional information to assist me further.
HTML:
<body>
<div id="webgl"></div>
<script src="js/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/earth.js"></script>
<script type="text/javascript" src="aud.js"></script>
<script type="text/javascript" src="date.js"></script>
<input type="image" id="intro" src="images/icon-intro.png"/>
</body>
</html>
Image:
https://i.stack.imgur.com/9QtNM.jpg
In the provided image, you can see that the button appears outside of the main scene. My goal is to have it positioned directly over the scene instead.