为什么不渲染？ /aframe 与三个object3D答案

【问题标题】：Why does not render? / Aframe with three object3D为什么不渲染？ /aframe 与三个object3D
【发布时间】：2021-01-02 01:18:02
【问题描述】：

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

如何在一个框架中渲染三个对象？

html

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

【问题讨论】：

标签： javascript three.js aframe

【解决方案1】：

两个主要问题：

提供的 THREE.js 代码是多余的。 camera component 已经初始化了 THREE.PerspectiveCamera 和 geometry 和 material 在带有 geometry 和 material 的实体上设置了 mesh。 See glitch illustrating
如果内置组件不提供您需要的功能，您不必使用它们，我建议将您的代码封装在component 中。 Glitch illustrating

【讨论】：

感谢您的回答。我了解aframe和three.js的object3D之间的关系。多亏了你。