uniApp中使用小步伐XR-Frame创建3D场景（1）环境搭建

1.XR-Frame简介

XR-Frame作为微信小步伐官方推出的3D框架，是目前全部小步伐平台中3D结果最好的一个，由于其自己针对微信小步伐做了优化，在性能方面比其他第三方库都要高很多。
2.与Three.js的区别

做3D小步伐的同砚们对Three.js一定不陌生，这是个跨平台的3D前端框架，使用广泛，但是针对微信小步伐的优化并不理想，而且库文件自己比较大，由于小步伐的内存限定，一旦加载的3D文件过多，非常容易造成卡顿。
既然微信小步伐端推出了XR-Frame，我们就应该积极的去熟悉这个框架，做出更好用的小步伐。
3.在uniApp中创建XR-Frame组件

（1）新建wxcomponents文件夹

上图是我的项目目次，起首在与pages同级目次下，创建wxcomponents文件夹，这个文件夹就是要调用的xr-frame组件目次。
（2）在 wxcomponents 文件夹下创建 xr-start 目次

这个目次是我们要在其他页面调用xr-frame时需要使用的组件名称，这里我们先创建好。
（3）在 xr-start 目次下创建 index.js  index.json  index.wxml 三个文件

这三个文件分别代表了xr-frame的逻辑，配置，以及视图文件。下面是分别是这三个文件中的代码
index.js
这个js文件中以后要做一些对于属性的设置以及组件方法的编写。

1. // index.js
2. Component({
3.         properties: {
4.         },
5.     data:{
6.         },
7.         methods: {
8.                
9.         }
10. })

复制代码

index.json
这个json配置文件就是告诉体系要接纳xr-frame框架渲染。

1. {
2.   "component": true,
3.   "renderer": "xr-frame",
4.   "usingComponents":{}
5. }

复制代码

index.wxml
这个wxml文件是我们使用xr-frame的紧张文件，我们先简朴的只添加一个摄像机。

1. <xr-scene>
2.         <xr-camera id="camera" clear-color="0.2 0.4 0.6 1" camera-orbit-control/>
3. </xr-scene>

复制代码

(4) 创建完上面三个文件后，我们还需要修改 manifest.json 文件，切换到源码视图

修改微信干系设置

1. "mp-weixin" : {
2.         "appid" : "你的appid",
3.         "setting" : {
4.             "urlCheck" : false,
5.             "postcss" : true,
6.             "es6" : true,
7.             "minified" : true
8.         },
9.         "usingComponents" : true,
10.                 "lazyCodeLoading" : "requiredComponents"
11.     },

复制代码

（5）修改pages.json文件中的配置

这里就是在你需要调用组件的页面上参加 usingComponents 设置。好比我在页面demo中参加如下配置

1. "pages": [
2.                 {
3.                         "path" : "pages/demo/demo",
4.                         "style" :
5.                         {
6.                                 "navigationBarTitleText" : "",
7.                                 "enablePullDownRefresh" : false,
8.                                 "usingComponents": {
9.                                         "xr-start": "../../wxcomponents/xr-start"
10.                                 },
11.                                 "disableScroll": true
12.                         }
13.                 }
14.         ],

复制代码

到这里环境就配置好了，接下来我们看看怎样在页面中使用XR-Frame
4.在项目中使用XR-Frame

这里我以demo.vue页面为例。
1 在view标签中直接加上xr-start标签即可引入

1. <template>
2.         <view style="display: flex;flex-direction: column;">
3.                 <xr-start id="main-frame" disable-scroll
4.                 :width="renderWidth"
5.                 :height="renderHeight"
6.                 :style="'width:'+width+'px;height:'+height+'px;'">
7.                 </xr-start>
8.         </view>
9. </template>

复制代码

2 在data中设置一下默认的宽高

1. data() {
2.                 return {
3.                         width:300,
4.                         height:300,
5.                         renderWidth:300,
6.                         renderHeight:300,
7.                 }
8. },

复制代码

3 在onLoad函数中获取屏幕大小，将xr-frame设置为全屏大小

1. onLoad(option){
2.                         this.width = uni.getWindowInfo().windowWidth
3.                         this.height = uni.getWindowInfo().windowHeight
4.                         const dpi = uni.getWindowInfo().pixelRatio
5.                         this.renderWidth = this.width * dpi
6.                         this.renderHeight = this.height * dpi
7.         },

复制代码

4 我们运行到小步伐模拟器
这时我们应该能看到一个页面为蓝色的页面（camera中设置的color是蓝色），这说明xr-frame框架可以正常运行了。

下一篇我们讲解，怎样在xr-frame中加载模子以及模子的优化。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。