上篇文章讲述了如何将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().windowWidth
this.height = uni.getWindowInfo().windowHeight
const dpi = uni.getWindowInfo().pixelRatio
this.renderWidth = this.width * dpi
this.renderHeight = this.height * dpi
this.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&from=appmsg");
}
</style>
在onLoad()函数中，我们首先根据屏幕大小和pixelRatio重新设置的xr-frame组件的大小。
然后给url赋值为自己服务器中存储的模型链接地址。
这里给大家推荐一个微信小程序 3D模型素材库，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用
