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

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

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

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

注意：(链接)
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。

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

• 父组件wxml部分：

  

  
    通过visible属性控制
    通过layer和cullmask控制
  

• 父组件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部分

•  子组件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图层与显示