I am having trouble rendering a threejs object in aframe. What steps should I take to successfully render the object?
html
<a-scene>
<a-entity geometry material id="obje"></a-entity>
<a-entity camera id="cam"></a-entity>
</a-scene>
js
window.addEventListener('load', init);
function init() {
width = document.body.clientWidth;
height = document.body.clientHeight;
camera = new THREE.PerspectiveCamera(100, width / height);
camera.position.set(0, 0, +1000);
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
box = new THREE.Mesh(geometry, material);
const entityEl = document.querySelector('#obje');
entityEl.setObject3D('mesh', box);
const cam = document.querySelector('#cam');
cam.setObject3D('camera', camera);
};