Javascript 为什么不渲染？/具有三个object3D的框架

我想在一个框架中使用threejs。 不渲染threejs对象

如何在一帧中渲染三个对象

html

两个主要问题：

给出的THREE.js代码是多余的。已经初始化了一个

THREE.PerspectiveCamera

，并在具有

几何体和
材质的实体上设置了
网格
如果内置组件不提供您需要的功能，您就不必使用它们，我建议您将代码封装在一个新的组件中
谢谢你的回答。我理解aframe和three.js的object3D之间的关系。多亏了你。
<a-scene>
  <a-entity geometry material id="obje"></a-entity>
  <a-entity camera id="cam"></a-entity>
</a-scene>

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);
};