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

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

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

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

<!-- index.wxml -->
<!-- 加载静态模型 --><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><!--  options="ignoreError:-1" --><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

<template><view style="display: flex;flex-direction: column;"><xr-start :modelPath="modelPath" id="main-frame" disable-scroll :width="renderWidth" :height="renderHeight":style="'width:'+width+'px;height:'+height+'px;'"></xr-start></view>
</template><script>export default {onLoad(option) {this.modelPath = option.modelPath;this.width = uni.getWindowInfo().windowWidththis.height = uni.getWindowInfo().windowHeightconst dpi = uni.getWindowInfo().pixelRatiothis.renderWidth = this.width * dpithis.renderHeight = this.height * dpi},data() {return {width: 300,height: 300,renderWidth: 300,renderHeight: 300,modelPath: ''}},methods: {}}
</script><style>
</style>