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().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&amp;from=appmsg");
}
</style>

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

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

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