微信小程序xr-frame图层与显示(五种方法)

前言：控制小程序隐藏与显示有五种方法，感兴趣的可以参考这个 文档，但是本文只赘述两种方法。

1.通过visible属性(详见：Three.js模型隐藏或显示)

visible:作用就是控制绑定该材质的模型对象是否可见，默认值是true，LineBasicMaterial、SpriteMaterial、MeshBasicMaterial等材质都会继承基类Material的可见性；

 <xr-node visible="{{visibleIndex}}">
 <xr-gltf model="miku" position="-0.15 0.75 0"  scale="0.21 0.21 0.21" rotation="0 180 0" anim-autoplay />
</xr-node>

注意：(链接)
1).visible=false时node内的子节点也会被隐藏，即使其visible=true
2).此属性可以在xr-node、xr-mesh、xr-light上使用，light隐藏效果为不发光

2.layer属性（详见：Layers 图层的简单介绍和简单实用）
xrframe中可以设置32个layer，每个node都可以关联到一个layer上，通过控制camera的cull-mask属性，来决定某个layer显不显示。 cull-mask可以接受32位无符号整数，其中每一位表示一个layer是否展示。 某个node是否展示，要看他和他所有父组件的layer是否在cull-mask中的对应位是1。 如代码中的圆柱（cylinder）要展示，需要cullMask & 2 === 1 && cullMask & 1 === 1，即cullMask的第1位和第2位都是1。

<xr-node layer="1">
    <xr-mesh node-id="mesh-sphere" position="0 1.25 -5" scale="1.25 1.25 1.25" geometry="sphere" material="standard-mat" uniforms="u_baseColorFactor:0.937 0.176 0.368 1"></xr-mesh>
    <xr-node layer="2">
      <xr-mesh node-id="mesh-cylinder" position="1 0.7 -3.5" scale="1 0.7 1" geometry="cylinder" material="standard-mat" uniforms="u_baseColorFactor:1 0.776 0.364 1"></xr-mesh>
    </xr-node>
  </xr-node>
    <!--layer属性 -->
  <xr-camera
    id="camera" node-id="camera" position="0 1.6 0" clear-color="0.925 0.925 0.925 1"
    target="camera-target" cull-mask="{{cullMask}}"
    camera-orbit-control=""
  ></xr-camera>

3.整体代码以及效果（来源：微信开放文档）

• 父组件wxml部分：

  <xr-basic-visible-layer
    disable-scroll
    id="main-frame"
    width="{{renderWidth}}"
    height="{{renderHeight}}"
    style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"
    visibleIndex="{{visibleIndex}}"
    cullMask="{{cullMask}}"
  />

  <view class="btn-strap">
    <button class="btn" bind:tap="handleChangeVisible" style="background-color: rgb(237, 211, 231)">通过visible属性控制</button>
    <button class="btn" bind:tap="handleChangeCullMask" style="background-color: rgb(214, 226, 243)">通过layer和cullmask控制</button>
  </view>

• 父组件js部分

Page({
  data: {
    xmlCode: '',
    visibleIndex: 1,
    cullMask: 0b011
  },
  handleChangeVisible() {
    this.setData({
      visibleIndex: 3 - this.data.visibleIndex
    });
  },
  handleChangeCullMask() {
    this.setData({
      cullMask: ((this.data.cullMask ^ (((this.data.cullMask & 0b100) >> 2) * 0b111)) << 1) | 0b1
    });
  }
});

• 父组件json部分

{
  "usingComponents": {
    "xr-basic-visible-layer": "../../../components/xr-basic-visible-layer/index"
  },
  "disableScroll": true
}

•  子组件wxml部分

<xr-scene id="xr-scene" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-material asset-id="standard-mat" effect="standard" />
  </xr-assets>
  <xr-node node-id="camera-target" position="0 1.25 -5"></xr-node>
  <xr-node visible="{{visibleIndex === 1}}">
    <xr-mesh node-id="mesh-plane" position="0 -0.05 -4" rotation="0 0 0" scale="5 1 5" geometry="plane" material="standard-mat" uniforms="u_baseColorFactor:0.48 0.78 0.64 1"></xr-mesh>
  </xr-node>
  <!--visible属性  -->
  <xr-node visible="{{visibleIndex === 2}}">
    <xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 -3.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1"></xr-mesh>
  </xr-node>
  <!--layer属性 -->
  <xr-node layer="1">
    <xr-mesh node-id="mesh-sphere" position="0 1.25 -5" scale="1.25 1.25 1.25" geometry="sphere" material="standard-mat" uniforms="u_baseColorFactor:0.937 0.176 0.368 1"></xr-mesh>
    <xr-node layer="2">
      <xr-mesh node-id="mesh-cylinder" position="1 0.7 -3.5" scale="1 0.7 1" geometry="cylinder" material="standard-mat" uniforms="u_baseColorFactor:1 0.776 0.364 1"></xr-mesh>
    </xr-node>
  </xr-node>
    <!--layer属性 -->
  <xr-camera
    id="camera" node-id="camera" position="0 1.6 0" clear-color="0.925 0.925 0.925 1"
    target="camera-target" cull-mask="{{cullMask}}"
    camera-orbit-control=""
  ></xr-camera>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3" />
  </xr-node>
</xr-scene>

•  子组件js部分 

Component({
  properties: {
    visibleIndex: {
      type: Number,
      value: 1,
      observer: function (newVal, oldVal) {
        
      }
    },
    cullMask: {
      type: Number,
      value: 0b001,
      observer: function (newVal, oldVal) {
        
      }
    }
  },
  data: {
    loaded: false
  },
  lifetimes: {},
  methods: {
    handleReady({detail}) {
      const xrScene = this.scene = detail.value;
      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});
    }
  }
})

• 子组件json部分

{
  "component": true,
  "usingComponents": {},
  "renderer": "xr-frame"
}

• 效果

xr-frame图层与显示