1.在pages.json中配置展示页面（style中添加下面：）
"usingComponents": {
"xr-start": "../../wxcomponents/xr-start"
}
2.manifest.json中配置mp-weixin
"setting" : {
"urlCheck" : false,
"postcss" : true,
"es6" : true,
"minified" : true
},
"usingComponents" : true,
"lazyCodeLoading" : "requiredComponents",
3.pege文件同级依次建立文件wxcomponenrs/xr-start/(index.js、index/json、index/wxml)
4.index.js
// index.js
Component({
properties: {},
data: {},
methods: {},
});
5. index.json
{
"component": true,
"renderer": "xr-frame",
"usingComponents":{}
}
6. index.wxml(页面3d渲染内容，详情参考文档）
<xr-scene>
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
<xr-asset-load type="gltf" asset-id="damage-helmet" src="/static/gltf/lou.gltf" /></xr-assets>
<xr-light type="ambient" color="1 1 1" intensity="1" />
<xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow /><xr-gltf node-id="damage-helmet" model="damage-helmet" />
<xr-gltf model="miku" position="-0.15 0.75 0" scale="0.07 0.07 0.07" rotation="0 180 0" anim-autoplay /><xr-camera
position="0 15 60" target="damage-helmet" background="skybox"
clear-color="0.4 0.8 0.6 1" camera-orbit-control
/>
</xr-scene>
7. 页面.vue
<template>
<view style="display: flex; flex-direction: column">
<xr-start
id="main-frame"
disable-scroll
:width="renderWidth"
:height="renderHeight"
:style="'width:' + width + 'px;height:' + height + 'px;'"
>
</xr-start>
</view>
</template>
<script>
export default {
data() {
return {
width: 300,
height: 300,
renderWidth: 300,
renderHeight: 300,
};
},
onLoad(option) {
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;
},
mounted() {},
methods: {},
};
</script>
