Plane

平面识别模式，不依靠于src和image。

AR系统会标定出一个平面，相机组件开启 isARCamera 之后，相机的三维变换会与AR系统同步。

AR系统每帧会去求和这个平面的交点，之后同步到AR追踪器组件所在元素上，其所有的子节点继而受到影响。

<xr-scene ar-system="modes:Plane;" bind:ready="handleReady" bind:ar-ready="handleARReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="gltf-item" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/just_a_girl/index.glb" />
    <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
    <xr-asset-material asset-id="standard-mat" effect="standard" />
  </xr-assets>
  <xr-node>
    <xr-ar-tracker mode="Plane">
      <xr-gltf model="anchor"></xr-gltf>
    </xr-ar-tracker>
    <xr-node node-id="setitem" visible="false">
      <xr-gltf model="gltf-item" scale="0.006 0.006 0.006"></xr-gltf>
    </xr-node>


    <!-- 坐标系提示，单位1 的坐标轴 -->
    <xr-mesh node-id="mesh-x" position="1 0 0" scale="2 0.02 0.02" geometry="cube" uniforms="u_baseColorFactor:0.7 0.3 0.3 1"></xr-mesh>
    <xr-mesh node-id="mesh-y" position="0 1 0" scale="0.02 2 0.02" geometry="cube" uniforms="u_baseColorFactor:0.3 0.7 0.3 1"></xr-mesh>
    <xr-mesh node-id="mesh-z" position="0 0 1" scale="0.02 0.02 2" geometry="cube" uniforms="u_baseColorFactor:0.3 0.3 0.7 1"></xr-mesh>


    <xr-camera id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
  </xr-node>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="3" />
  </xr-node>
</xr-scene>

Component({
  properties: {
    a: Number,
  },
  data: {
    loaded: false,
    arReady: false,
  },
  lifetimes: {
    async attached() {
      console.log('data', this.data)
    }
  },
  methods: {
    handleReady({ detail }) {
      const xrScene = this.scene = detail.value;
      this.mat = new (wx.getXrFrameSystem().Matrix4)();
      console.log('xr-scene', xrScene);
    },
    handleAssetsProgress: function ({ detail }) {
      console.log('assets progress', detail.value);
    },
    handleAssetsLoaded: function ({ detail }) {
      console.log('assets loaded', detail.value);
      // this.setData({loaded: true});
      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
    },
    handleARReady: function ({ detail }) {
      console.log('arReady', this.scene.ar.arVersion);
    },
    placeNode(event) {
      const { clientX, clientY } = event.touches[0];
      const { frameWidth: width, frameHeight: height } = this.scene;


      if (clientY / height > 0.8 && clientX / width < 0.2) {
        this.scene.getNodeById('setitem').visible = false;
        this.scene.ar.resetPlane();
      } else {
        this.scene.ar.placeHere('setitem', true);
      }


      this.scene.event.addOnce('touchstart', this.placeNode.bind(this));
    }
  }
})