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

Question

我想在 aframe 中使用 threejs。 threejs 对象未呈现。

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

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

两个主要问题：

提供的 THREE.js 代码是多余的。 camera component already initializes a THREE.PerspectiveCamera and geometry and material set a mesh on the entity with a geometry and a material. See glitch illustrating
如果 built-in 组件不提供您需要的功能，您不必使用它们，我建议将您的代码封装在 component. Glitch illustrating

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

Why does not render? / Aframe with three object3D

javascript

three.js

aframe