将 A 框架与 Three.js 相结合

我想知道...

是否可以将 Three.js 元素添加到 A 框架场景中？ 假设 A-frame 是基于 Three.js 构建的，并且

three Version: ^0.74.0

登录到你的控制台这不应该是一件奇怪的事情，对吧？

我在我的 A 框架场景元素上尝试了以下代码：

let scene = document.getElementsByTagName('a-scene');
console.log(scene);

var sphereMaterial = new THREE.MeshLambertMaterial( {  } );
var sphere = new THREE.Mesh( new THREE.SphereGeometry( 15, 10, 10 ), sphereMaterial );
    sphere.position.set(150, 20, -170);
    scene.add( sphere );

但它不起作用，因为场景对象没有添加功能。也许是因为 A 帧场景不是普通 WebGLRenderer 的实例？

有人有这方面的经验吗？那就太棒了！

A-Frame 构建在 Three.js 之上，并公开所有底层功能。

<a-scene>.object3D 使您可以访问THREE.Scene.

Each <a-entity> has an object3D那是一个团体。你用getObject3D(name) and getOrCreateObject3D(name, constructor将内容添加到组中。

要在 A-Frame 框架中添加三个 .js 元素，请使用 A-Frame 提供的实体组件系统。

AFRAME.registerComponent('mythreejsthing', {
  schema: {
    // ... Define schema to pass properties from DOM to this component
  },

  init: function () {
    var el = this.el;  // Entity.
    var mythreejsobject = // ... Create three.js object.
    el.setObject3D('mesh', mythreejsobject);
  }
});

https://aframe.io/docs/0.2.0/core/entity.html#object3d https://aframe.io/docs/0.2.0/core/entity.html#object3d https://aframe.io/docs/0.2.0/core/component.html https://aframe.io/docs/0.2.0/core/component.html