Question

我在想......

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

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

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

将A帧与Three.js相结合

1 个答案: