uniApp中使用小程序XR-Frame创建3D场景（2）加载模型

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用，只完成了简单的环境搭建，这篇文章讲解如何加载3D模型。

1 加入模型加载标签

在XR-Frame框架中，加载资源都是在wxml文件的标签中实现的。下面是wxml中完整的代码

index.wxml

<xr-scene render-system="alpha:true" bind:ready="handleReady"><xr-assets><xr-asset-load type="gltf" asset-id="gltf-model" src="{{url}}" options="ignoreError:-1"/></xr-assets><xr-node><xr-gltf node-id="gltf-model" bind:gltf-loaded="handleGLTFLoaded" model="gltf-model"></xr-gltf></xr-node><xr-light type="ambient" color="1 1 1" intensity="2" /><xr-light type="spot" position="3 3 3" color="1 1 1" range="3" intensity="5" /><xr-camera id="camera" clear-color="0 0 0 0" position="1 1 2" target="gltf-model" camera-orbit-control/>
</xr-scene>

上面代码中，<xr-assets> 标签代表要加载资源，<xr-asset-load>标签是要加载资源具体的属性，

其中 type 属性为要加载的资源格式，这里采用gltf格式比较方便，也是小程序官方推荐的格式，

asset-id 属性是资源的ID，设置设个属性主要是为了后续节点的操作。

options 属性这里设置为-1 是因为模型本身可能会超过小程序的限制，造成无法加载，设置为-1就会强行加载模型，但加载出的模型材质可能会出现意外的错误。所谓这个设置要慎重。

<xr-node> 表示这是一个节点，节点下可能放很多模型或内置的网格，便于统一管理。比如统一将一批node下的模型旋转，缩小，移动等操作。

<xr-gltf> 表示这是一个gltf 模型，model属性赋值为<xr-asset-load>标签的asset-id，代表要显示的就是这个id资源模型。

后面我还加入了两个光源<xr-light>,分别是环境光和聚光灯。

2.动态加载外部模型

在wxml文件中，我们将<xr-asset-load> 标签中属性src的值绑定为一个变量为 url

这样，我们就需要在index.js 文件中给这个变量赋一个初始值

index.js

Component({properties: {url: {type: String,value: ''}},data: {},methods: {handleGLTFLoaded() {console.log('模型加载完成')wx.hideLoading()},}
})

这部分代码比较简单，这里给url赋值为空，然后我们在父组件中给这个变量赋值为对应的模型地址，这样就可以动态的加载模型。

代码中还有一个handleGLTFLoaded()方法，这个方法是在wxml文件中<xr-gltf>标签内绑定的加载模型完成后调用的回调函数。我们可以在这个函数中根据场景再对模型做一些微调。

3.父组件给子组件赋值

通过上面两步，子组件的代码已经编写完成。下面我们只需要在调用xr-frame的页面给子组件的url属性赋值即可。

index.vue

<template><view style="display: flex;flex-direction: column;"><xr-start id="main-frame" disable-scroll:url="url":width="renderWidth":height="renderHeight":style="'width:'+width+'px;height:'+height+'px;'"></xr-start></view>
</template><script>export default {data() {return {url:"https://mp-f8b2202e-3122-48e4-9c72-9407860f72c5.cdn.bspapp.com/newModel/md58/580001.glb",width:300,height:300,renderWidth:300,renderHeight:300,}},onLoad(option){uni.showLoading({title:'模型加载中...'})this.width = uni.getWindowInfo().windowWidththis.height = uni.getWindowInfo().windowHeightconst dpi = uni.getWindowInfo().pixelRatiothis.renderWidth = this.width * dpithis.renderHeight = this.height * dpithis.url = "https://mp-f8b2202e-3122-48e4-9c72-9407860f72c5.cdn.bspapp.com/newModel/md58/580001.glb"},methods: {}}
</script><style>
page{background-color: #303030;background-repeat: no-repeat;background-size: 100%;background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/DWsjgNA1bNhdC11VLBgx2BWNTPV9IpOibepzbDy76xTme7ByunTCCPnafo2Y4I6hWz1PMlQxaSib6pmXu8C0IO5A/640?wx_fmt=jpeg&amp;from=appmsg");
}
</style>

在onLoad()函数中，我们首先根据屏幕大小和pixelRatio重新设置的xr-frame组件的大小。

然后给url赋值为自己服务器中存储的模型链接地址。

这里给大家推荐一个微信小程序 3D模型素材库，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用