AFrame에서 Three.js의 접근

1. three.js Scene에 접근

1) a-scene 이용

document.querySelector('a-scene').object3D;

2) entity에서의 접근

document.querySelector('a-entity').sceneEl.object3D; // THREE.Scene

3) Component에서의 접근

AFRAME.registerComponent('foo', {
  init: function () {
    var scene = this.el.sceneEl.object3D;  // THREE.Scene
  }
});

2. Entity의 three.js object 접근

   : 모든 Entity는 다양한 타입의 THREE.Object3D를 포함하는 THREE.Group을 가지고 있음

.object3D를 통해 해당 entity의 루트 THREE.Group에 접근 가능함.

1) THREE.Group 객체의 접근

document.querySelector('a-entity').object3D; // THREE.Group

2) THREE.Group의 다른 타입의 object들을 참조할 때

console.log(entityEl.object3DMap); // {mesh: THREE.Mesh, light: THREE.Light}

3) getObject3D(name)을 이용한 접근

entityEl.getObject3D('mesh'); // THREE.Mesh entityEl.getObject3D('light'); // THREE.light

4) three.js Object의 A-Frame Entity 참조

entityEl.getObject3D ( 'light' ) .el; // entityEl

*getOrCreateOBject3D(name, constructor) : THREE.Mesh, geometry와 material component가 get 혹은 create Mesh를 할 때 주로 사용.

Compnent가 처음 초기화 되었을 때 mesh를 생성하고, 다른 Component는 mesh를 get할 때

6) setObject(name)을 이용한 Component 설정

:Entity의 Group에 Object3D추가

AFRAME.registerComponent('pointlight', {
  init: function () {
    this.el.setObject3D('light', new THREE.PointLight());
  }
});
// <a-entity light></a-entity>