2016-06-29 3 views
2

A 프레임과 Three.js의 결합

A 프레임 장면에 Three.js 요소를 추가 할 수 있습니까? 는 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?

아무도이 경험이 있습니까? 그것은 대단 할 것입니다!

답변

6

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

+0

매우 명확하고 감사 케빈 –

+0

당신은 나에게 스키마 대괄호 안에 어떤 일이 일어나는지의 예를 들어 주실 수 있습니까? 나는 이것을 시도하고 나의 Three.JS 객체를 보지 못한다. –

+0

이것은 Kevins의 대답에 기초한 최소한의 예일 것이다. http://codepen.io/dirkk0/pen/YpNrQR – dirkk0