使用XR-frame框架，实现简单AR

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。

在这一章中，用它构建一个XR小程序。

创建小程序项目
在这里插入图片描述
之后先在app.json加上一行配置：“lazyCodeLoading”: “requiredComponents”。然后创建好组件文件夹，新建一个组件，然后修改组件的内容：
index.json

{
  "component": true,
  "renderer": "xr-frame",
  "usingComponents": {}
}

index.html

<xr-scene>
  <xr-camera clear-color="0.4 0.8 0.6 1" />
</xr-scene>

在index.json中，我们指定了这个组件的渲染器是xr-frame；在index.wxml中，我们创建了一个场景xr-scene，并在其下添加了一个相机xr-camera。
在页面中使用这个组件
创建完组件后，便可以在页面中使用它，让我们进入pages/index，修改它的json、wxml和ts文件：

在json中：

{
  "usingComponents": {
    "xr-start": "../../components/xr-start/index"
  },
  "disableScroll": true
}

在ts脚本中

Page({
    
    
  data: {
    
    
    width: 300,
    height: 300,
    renderWidth: 300,
    renderHeight: 300,
  },
  onLoad() {
    
    
    const info = wx.getSystemInfoSync();
    const width = info.windowWidth;
    const height = info.windowHeight;
    const dpi = info.pixelRatio;
    this.setData({
    
    
      width, height,
      renderWidth: width * dpi,
      renderHeight: height * dpi
    });
  },
})

在wxml中

<view>
  <xr-start
    disable-scroll
    id="main-frame"
    width="{
    
    {renderWidth}}"
    height="{
    
    {renderHeight}}"
    style="width:{
    
    {width}}px;height:{
    
    {height}}px;"
  />
</view>

这里我们在脚本中设置了xr-frame组件需要渲染的宽高，然后传入wxml，并在其中使用了json中引用的组件进行渲染，目前效果如下，可见整个画布被xr-camera上设置的清屏颜色清屏了：
在这里插入图片描述
添加物体、颜色和灯光

<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-mesh
  node-id="cube" cast-shadow
  geometry="cube" uniforms="u_baseColorFactor:0.8 0.4 0.4 1"
/>
<xr-mesh
  position="0 -1 0" scale="4 1 4" receive-shadow
  geometry="plane" uniforms="u_baseColorFactor:0.4 0.6 0.8 1"
/>

这里我们加入了一个环境光和一个主平行光，调整了亮度和方向，同时加上了一个新的物体，再通过各个组件的caster-shadow和receive-shadow开启了阴影，效果如下：
在这里插入图片描述
这样就实现了简单3维场景的渲染，这个比较简单，也可以添加图片和视频，具体的就参考官网案例吧
接下来就是加载外部的gltf模型，使用内置的AR系统来实现一个AR程序
首先在场景中加载gltf模型，然后使用ar-system和ar-tracker,并修改一下xr-camera的i相关属性is-ar-camera和background=“ar”

<xr-scene ar-system="modes:Plane" bind:ready="handleReady">
  <xr-assets bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="anchor" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/ar-plane-marker.glb" />
    <xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" />
  </xr-assets>

  <xr-env env-data="xr-frame-team-workspace-day" />
  <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-ar-tracker mode="Plane">
    <xr-gltf model="anchor"></xr-gltf>
  </xr-ar-tracker>
  <xr-node node-id="setitem" visible="false">
    <xr-gltf model="miku" anim-autoplay scale="0.08 0.08 0.08" rotation="0 180 0"/>
  </xr-node>

  <xr-camera clear-color="0.4 0.8 0.6 1" background="ar" is-ar-camera />
</xr-scene>

注意这里我们开启的ar-system的模式为Plane，即平面识别，这种模式下相机不能被用户控制，需要将控制器、target等都删掉，同时ar-tracker的mode要和ar-system的完全一致。之后再脚本中写一点简单的逻辑即可：

handleAssetsLoaded: function({
    
    detail}) {
    
    
  wx.showToast({
    
    title: '点击屏幕放置'});
  this.scene.event.add('touchstart', () => {
    
    
    this.scene.ar.placeHere('setitem', true);
  });
}

目前AR系统只能在真机预览时生效，所以我们可以将其提交预览，最终效果如下（AR的案例效果都是P的）：
在这里插入图片描述
【注】在微信开发者工具中目前可以预览，若点击真机调试的时候手机一片空白，可以尝试在app.json中添加分包

"subPackages": [{
    
    
      "root":"packageA",
      "name":"index",
      "pages":[
          "pages"
      ]
  }],

使用XR-frame框架，实现简单AR

猜你喜欢