将A帧与Three.js相结合

Question

我在想...

是否可以将Three.js元素添加到A帧场景中？假设A帧建立在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 );

但它不起作用,因为场景对象没有添加函数..也许是因为A帧场景不是普通WebGLRenderer的实例？

有没有人有这方面的经验？这将是非常棒的!

Answer 1

A-Frame构建在three.js之上,并公开所有底层功能.

<a-scene>.object3D让您访问THREE.Scene.

每个<a-entity>都有object3D一个组.您可以使用getObject3D(name)和getOrCreateObject3D(name, constructor向组中添加内容.

要在A-Frame框架中添加three.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/component.html