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

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

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

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

{

"component": true,

"renderer": "xr-frame",

"usingComponents": {}

}

index.html

在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中

disable-scroll

id="main-frame"

width="{{renderWidth}}"

height="{{renderHeight}}"

style="width:{{width}}px;height:{{height}}px;"

/>

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

node-id="cube" cast-shadow

geometry="cube" uniforms="u_baseColorFactor:0.8 0.4 0.4 1"

/>

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”

注意这里我们开启的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"

]

}],

相关阅读

 您阅读本篇文章共花了：