将A-frame与Three.js结合使用

Question

我想知道...

是否可以将Three.js元素添加到A-frame场景中？ 假设A-frame是建立在Three.js之上的，且...

three Version: ^0.74.0

如果某人登录到您的控制台，这不应该是一件奇怪的事情，对吗？

我将此代码应用于我的 A-frame 场景元素：

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

但是它不起作用，因为场景对象没有 add 函数...也许是因为 A-frame 场景不是普通 WebGLRenderer 的实例吗？

有人有这方面的经验吗？那将非常棒！

- Fabian Tjoe A On

Answer 1

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

每个都有一个object3D，它是一个组。你可以使用getObject3D（name）和getOrCreateObject3D（name，constructor）将物体添加到组中。

通过使用A-Frame提供的实体组件系统，可以在A-Frame框架内添加three.js元素。 <a-scene>.object3D可以让你访问THREE.Scene。

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/component.html

- ngokevin

---

你能给我一个放在模式括号内的例子吗？我尝试了这个，但我没有看到我的Three.JS对象。 - Jonathan Allen Grant

这将是一个基于Kevin答案的最简示例。 http://codepen.io/dirkk0/pen/YpNrQR - dirkk0

我正在使用A-Frame和Three.js在8th Wall上开发一个项目。我正在使用一个名为"text-geometry"的组件来生成挤出文本。但是，当我使用mesh = el.getOrCreateObject3D('mesh', THREE.Mesh)这一行时，它一直给我报错：getOrCreateObject3D已被弃用，请改用setObject3D()和object3dset事件。...那我该怎么做呢？ - Dan