Kombinieren A-Frame mit Three.js

Question

Ich frage mich ...

Ist es möglich, Three.js Elemente zu einer A-Frame-Szene hinzuzufügen? Annahme, daß A-Rahmen auf Three.js gebaut und

three Version: ^0.74.0 

in der Konsole angemeldet ist es nicht eine seltsame Sache richtig sein soll?

habe ich versucht, diesen Code auf meinem A-Rahmen Szene 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); 

Aber es funktioniert nicht, weil die Szene Objekt tut eine Zusatzfunktion haben .. Vielleicht, weil die A-Frame-Szene nicht eine Instanz ist ein normaler WebGLRenderer?

Hat jemand Erfahrung damit? Es wäre sehr toll!

Answer 1

A-Frame baut auf drei .js auf und macht alle zugrunde liegenden Funktionen verfügbar.

<a-scene> .object3D gibt Ihnen Zugriff auf die THREE.Scene.

Jede <a-entity> hat eine object3D, die eine Gruppe ist. Sie verwenden getObject3D(name) und getOrCreateObject3D(name, constructor, um Dinge zur Gruppe hinzuzufügen.

Verwenden Sie zum Hinzufügen von three.js-Elementen innerhalb des A-Frame-Frameworks das von A-Frame bereitgestellte Entity-Component-System.

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