HQ_yueYue/小程序入口_嵌套展示端/pages/ar/index.js

var sceneReadyBehavior = require('../behavior-scene/scene-ready');
var handleDecodedXML = require('../behavior-scene/util').handleDecodedXML;
var xmlCode = `<xr-scene ar-system="modes:Marker" id="xr-scene" bind:ready="handleReady" bind:arReady="handleARReady" bind:log="handleLog">
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
  <xr-asset-material asset-id="ar-anchor" effect="standrand" uniforms="u_baseColorFactor:0 1 0 1"></xr-asset-material>
</xr-assets>
<xr-node>
  <xr-node node-id="id2" scale="2 2 2" position="0 0 0"></xr-node>
  <xr-ar-tracker mode="Marker" src="{{markerImg}}">
    <xr-mesh geometry="cylinder" material="ar-anchor" />
  </xr-ar-tracker>
  <xr-camera
    id="camera" node-id="camera" position="0.8 2.2 -5" clear-color="0.925 0.925 0.925 1"
    target="id2" background="ar" is-ar-camera
    camera-orbit-control
  ></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>
`;
Page({
  behaviors: [sceneReadyBehavior],
  data: {
    xmlCode: '<div class="codeWrap">' + handleDecodedXML(xmlCode) + '</div>',
    markerImg: 'https://ossxiaoan.4dage.com/hq-eduction-vr/hq-bag.jpg',
    showLoading: true,
    loadingText: '正在初始化相机…',
    loadingProgress: 0,
    _wxLoadingText: ''
  },
  onUnload() {
    if (wx.hideLoading) wx.hideLoading();
  },
  handleLoadState(e) {
    const detail = (e && e.detail) || {};
    const arReady = !!detail.arReady;
    const assetsLoaded = !!detail.assetsLoaded;
    const item1Loaded = !!detail.item1Loaded;
    const item2Loaded = !!detail.item2Loaded;
    const p = typeof detail.assetsProgress === 'number' ? detail.assetsProgress : 0;

    let loadingText = this.data.loadingText;
    if (!arReady) loadingText = '';
    else if (!assetsLoaded) loadingText = '';
    else if (!item1Loaded || !item2Loaded) loadingText = '';
    else loadingText = '';

    const loadingProgress = Math.max(0, Math.min(100, Math.round(p)));
    const showLoading = !(arReady && assetsLoaded && item1Loaded && item2Loaded);

    this.setData({ showLoading, loadingText, loadingProgress });

    if (showLoading) {
      if (wx.showLoading && loadingText !== this.data._wxLoadingText) {
        wx.showLoading({ title: loadingText, mask: true });
        this.setData({ _wxLoadingText: loadingText });
      }
    } else {
      if (wx.hideLoading) wx.hideLoading();
      if (this.data._wxLoadingText) this.setData({ _wxLoadingText: '' });
    }
  },
  handleChangeMarkerImg: function() {
    wx.chooseMedia({
      count: 1,
      sizeType: ['compressed'],
      mediaType: ['image'],
      sourceType: ['album'],
      success: res => {
        const fp = res.tempFiles[0].tempFilePath;
        this.setData({markerImg: fp});
      },
      fail: err => {
        console.error('[xr-demo]chooseImage failed', err);
      }
    });
  }
});