uniapp微信小程序使用xr加载模型

1.在根目录与pages同级创建如下目录结构和文件：

// index.js
Component({
	properties: {
		modelPath: { // vue页面传过来的模型
			type: String,
			value: ''
		}
	},
	data: {},
	methods: {}
})

{ // index.json
	"component": true,
	"renderer": "xr-frame",
	"usingComponents": {}
}

 <xr-scene render-system="alpha:true" bind:ready="handleReady">
  <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-assets>
		
      <xr-asset-load type="gltf" asset-id="gltf-model" src="{{modelPath}}"/>
    xr-assets>
    <xr-gltf scale="0.7 0.7 0.7" node-id="gltf-model" bind:gltf-loaded="handleGLTFLoaded" model="gltf-model">xr-gltf>
  xr-node>
  <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="gltf-model" camera-orbit-control/>
 xr-scene>

2.pages.json配置

{
				"path": "pages/resource/preview/preview",
				"style": {
					"navigationBarTitleText": "效果预览",
					"enablePullDownRefresh": false,
					"navigationBarBackgroundColor": "#73ceda",
					"usingComponents": {
						"xr-start": "/wxcomponents/xr-start"
					},
					"disableScroll": true
				}
			}

3.manifest.json配置

"mp-weixin": {
		"appid": "自己的appid",
		"setting": {
			"urlCheck": false,
			"postcss": true,
			"es6": true,
			"minified": true,
			"ignoreDevUnusedFiles": false,
			"ignoreUploadUnusedFiles": false
		},
		"usingComponents": true,
		"lazyCodeLoading": "requiredComponents"
	},

4.使用preview.vue

 
<script>
	export default {
		onLoad(option) {
			this.modelPath = option.modelPath;
			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
		},
		data() {
			return {
				width: 300,
				height: 300,
				renderWidth: 300,
				renderHeight: 300,
				modelPath: ''
			}
		},
		methods: {}
	}
script>
 
<style>
style>

不占主包空间(可以忽略)

5.后续出现报错：

需要在app.json添加一行配置"lazyCodeLoading": "requiredComponents"，以下是uniappp中配置