As I dive into my university assignment, creating a 3D scene with Three.js is both challenging and exciting. One specific requirement is to add a button that triggers the movement of one of my three vehicle objects.
However, an issue arises as I can't seem to locate the button on my page upon loading. It briefly appears against a white background before seemingly getting hidden by the JavaScript script once it loads. My goal now is to bring this elusive button to the forefront, especially since I can confirm its presence when inspecting the Dev Tool.
This mystery deepens further when I realize that opening or closing the Dev Tool command suddenly causes the button to materialize at the bottom of the page, where it remains visible. For reference, I am utilizing the VS Code live server extension in conjunction with Brave as my default browser.
Here is a snippet of what I believe to be relevant code:
<style>
* { box-sizing: border-box }
#container { width: 100%; height: calc(100% - 50px) }
body {
overflow: hidden;
}
#btnDrive { height: 40px; width: 25%; float: left; margin: 10px 0 0; background-color: orange; color: black; }
</style>
<body onLoad="onLoad()">
<div id="container"></div>
<button id="btnDrive" type="button">Drive Car</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script>
function onLoad()
{
const container = document.getElementById('container');
const width = window.innerWidth, height = window.innerHeight;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87ceeb);
container.appendChild(renderer.domElement);
......</script></body>}