I'm having trouble getting my three.js scene to display above some cards and right below my navigation bar. Currently, the scene is rendering under the cards and is not centered. Despite looking at other forum posts for help, I can't seem to figure out what I'm doing wrong.
HTML:
<script src="../static/javascript/three.js"></script>
<script src="../static/javascript/explore3D.js"></script>
<div class="container">
<div class = "row">
<div id="canvas"></div>
</div>
</div>
<div class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card mb-6 shadow-sm">
<div class="card-body">
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-6 shadow-sm">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#canvas {
position: fixed;
outline: none;
}
JS:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( 700, 400 );
document.querySelector('#canvas').appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
Any help would be greatly appreciated! Let me know if more information is needed for a solution.
Edit: I changed
document.body.appendChild( renderer.domElement );document.querySelector('#canvas').appendChild( renderer.domElement );TypeError: null is not an object in the console and nothing is being rendered.
Edit: I also attempted
document.getElementById('canvas').appendChild( renderer.domElement );Edit: Referenced this post: Get Element By Id Not working. Is it possible that because I am calling this function before the page is rendered, the element I am looking for does not exist?