A-Frame架构 WebXR 虚拟现实开发：3、Introduction —— A-Frame 和 Three.js 关系

A-Frame Documents

A-Frame 和 Three.js 关系

映射关系

• <a-scene> 和 Three.js 的 scene：1对1

• <a-entity> 和 Three.js 的 object：1对多

• Three.js 的 object 通过 .el 对<a-entity> 进行实体引用

层级关系

• A-Frame

<a-scene>
  <a-box>
    <a-sphere></a-sphere>
    <a-light></a-light>
  </a-box>
</a-scene>

• Three.js

THREE.Scene;
THREE.Mesh;
THREE.Mesh;
THREE.Light;

• 调用 Three.js 的 API

  • 使用 Three.js 全局对象：

    console.log(THREE);
    

  • 访问 Three.js 场景

    // a-scene 访问 Three.js 场景
    document.querySelector("a-scene").object3D;
    // a-entity 访问 Three.js 场景
    document.querySelector("a-entity").sceneEl.object3D;
    // 注册组件时访问 Three.js 场景
    AFRAME.registerComponent("foo", {
      init: function () {
        var scene = this.el.sceneEl.object3D; // THREE.Scene
      },
    });
    

  • 通过 a-entity 访问 Three.js 的对象组（THREE.GROUP）

    document.querySelector("a-entity").object3D; // THREE.Group
    
    // <a-entity geometry light></a-entity>
    console.log(entityEl.object3DMap);
    // {mesh: THREE.Mesh, light: THREE.Light}
    entityEl.getObject3D("mesh"); // THREE.Mesh
    entityEl.getObject3D("light"); // THREE.Light
    

  • 生命周期中使用 Three.js 进行增删改

    // 注册灯光组件
    AFRAME.registerComponent("pointlight", {
      init: function () {
        this.el.setObject3D("light", new THREE.PointLight());
      },
    });
    // <a-entity light></a-entity>
    
    // 访问方式
    entityEl.getObject3D("light");
    
    // 对light实体进行引用
    entityEl.getObject3D("light").el;
    

    // 删除实体组件
    AFRAME.registerComponent("pointlight", {
      init: function () {
        this.el.setObject3D("light", new THREE.PointLight());
      },
      remove: function () {
        // Remove Object3D.
        this.el.removeObject3D("light");
      },
    });
    

• 全局与局部坐标转换（父子对象）

  • Object3D 对象的操作函数：https://threejs.org/docs/#api/en/core/Object3D

  • 调用 Three.js 实现局部转全局坐标

    <a-entity id="foo" position="1 2 3">
      <a-entity id="bar" position="2 3 4"></a-entity>
    </a-entity>
    

    var worldPosition = new THREE.Vector3();
    entityEl.object3D.getWorldPosition(worldPosition);
    
    var worldQuaternion = new THREE.Quaternion();
    entityEl.object3D.getWorldQuaternion(worldQuaternion);
    
    //以及其他
    .localToWorld (vector)
    .getWorldDirection (vector)
    .getWorldQuaternion (quaternion)
    .getWorldScale (vector)
    

  • 调用 Three.js 实现全局转局部坐标

    var worldToLocal = new THREE.Matrix4().getInverse(object3D.matrixWorld);
    anotherObject3D.applyMatrix(worldToLocal);