AフレームとThree.jsの組み合わせ

Question

AフレームのシーンにThree.js要素を追加することはできますか？ は、フレームが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); 

しかし、シーンオブジェクトdoesntのはA-フレームシーンはのインスタンスではないかもしれないので...追加機能を持っているので、それは仕事をdoesntの通常のWebGLRendererですか？

誰もこの経験がありますか？それは非常に素晴らしいだろう！

Answer 1

A-Frameはthree.jsの上に構築され、基礎となるすべての機能を公開しています。

<a-scene> .object3Dを使用すると、THREE.Sceneにアクセスできます。

各<a-entity>は、グループであるobject3Dを持ちます。グループに追加するには、getObject3D(name)とgetOrCreateObject3D(name, constructorを使用します。

Aフレームフレームワーク内にthree.js要素を追加するには、Aフレームが提供するEntity-Componentシステムを使用します。

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