WXXR/miniprogram/pages/ar/scene-ar-osdmarker/index.js

var sceneReadyBehavior = require('../../behavior-scene/scene-ready');
var handleDecodedXML = require('../../behavior-scene/util').handleDecodedXML;
var xmlCode = `<xr-scene ar-system="modes:OSD" id="xr-scene" bind:ready="handleReady" bind:arReady="handleARReady" bind:log="handleLog">
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
  <xr-asset-load type="gltf" asset-id="gltf-burger" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/burger/burger.gltf" />
  <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="OSD" src="{{markerImg}}">
    <xr-mesh id="ar-tracker-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://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/marker/osdmarker-test.jpg'
  },
  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);
      }
    });
  }
});