为什么不渲染？ / 带有三个 object3D 的 Aframe

Question

我想将threejs与aframe一起使用。 Threejs 对象不呈现。

如何在aframe中渲染三个对象？

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

Answer 1

两个主要问题：

1. 提供的 THREE.js 代码是多余的。 该相机组件已经初始化THREE.PerspectiveCamera和 几何形状和 材料组中的mesh上用所述实体geometry和material 。 参见故障说明
2. 如果内置组件没有提供您需要的功能，您就不必使用它们，我建议将您的代码封装在一个组件中。 故障说明