前言：控制小程序隐藏与显示有五种方法，感兴趣的可以参考这个 文档，但是本文只赘述两种方法。
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.整体代码以及效果（来源：微信开放文档）文章来源：https://www.toymoban.com/news/detail-484915.html
- 父组件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图层与显示文章来源地址https://www.toymoban.com/news/detail-484915.html
到了这里，关于微信小程序xr-frame图层与显示(五种方法)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
