将 A-frame 与 Three.js 结合 [英] Combining A-frame with Three.js

问题描述

我想知道...

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

Is it possible to add Three.js elements to a A-frame scene? Assuming A-frame is built upon Three.js, and

three Version: ^0.74.0

已登录到您的控制台，这应该不是什么奇怪的事情吧?

is logged into your console it shouldn't be a weird thing right?

我在我的 A 帧场景元素上尝试了这段代码:

I tried this code onto my A-frame scene element:

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的实例?

But it doesnt work because the scene object doesnt have a add function.. Maybe because the A-frame scene is not an instance of a normal WebGLRenderer?

有人有这方面的经验吗?会非常棒！

Does anybody have experience with this? It would be very awesome!

推荐答案

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

A-Frame is built on top of three.js and exposes all underlying functionality.

.object3D 可让您访问 THREE.Scene.

<a-scene>.object3D gives you access to the THREE.Scene.

每个 都有一个object3D，它是一个组.您使用 getObject3D(name) 和 getOrCreateObject3D(name,constructor 将内容添加到组中.

Each <a-entity> has an object3D that is a group. You use getObject3D(name) and getOrCreateObject3D(name, constructor to add things to the group.

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

To add three.js elements within the A-Frame framework, use the Entity-Component system that A-Frame provides.

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#object3dhttps://aframe.io/docs/0.2.0/core/component.html

这篇关于将 A-frame 与 Three.js 结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！