基于微信小程序云开发的 XR 小程序 Demo
原创基于微信小程序云开发的 XR 小程序 Demo
原创
dingdeyang
发布于 2024-11-13 15:31:26
发布于 2024-11-13 15:31:26
基于微信小程序云开发的 XR 小程序 Demo
一、项目背景
随着微信小程序 XR - FRAME 框架的推出，小程序具备了更强大的扩展现实和 3D 能力。本 Demo 旨在展示如何利用微信小程序云开发结合 XR - FRAME 框架，创建一个简单的 XR 小程序，实现 3D 场景展示、资源加载以及交互功能，为开发者提供一个入门示例，以探索 XR 小程序开发的潜力。
二、开发准备
（一）开发环境
- 微信开发者工具：确保已安装最新版本，建议使用 Nightly 版本，以便更好地支持 XR - FRAME 开发。
- 基础库：要求基础库最低 2.27.1 及以上，推荐 2.32.0 及以上，本 Demo 将基于推荐版本进行开发。
（二）项目创建
- 在微信开发者工具中创建一个新的小程序项目，选择 “小程序云开发” 模板，填写相关项目信息，如项目名称、AppID 等。
- 进入项目后，在
project.config.json文件中，确保miniprogramRoot指向正确的小程序代码目录，cloudfunctionRoot指向云函数代码目录。
（三）XR - FRAME 框架引入
- 由于 XR - FRAME 框架在基础库 v2.32.0 开始基本稳定，确保项目的基础库版本符合要求。
- 在小程序页面的
json文件中引入 XR - FRAME 相关组件，例如在index.json中添加：
json
{
"usingComponents": {
"xr-frame": "path/to/xr-frame",
"xr-scene": "path/to/xr-scene",
"xr-assets": "path/to/xr-assets",
"xr-asset-load": "path/to/xr-asset-load",
"xr-light": "path/to/xr-light",
"xr-mesh": "path/to/xr-mesh",
"xr-camera": "path/to/xr-camera"
}
}三、代码实现
（一）页面结构（index.wxml）
- 创建一个 XR 场景，包含灯光、相机、模型等元素：
xml
<xr-frame>
<xr-scene bind:ready="handleReady">
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
<xr-asset-load type="texture" asset-id="waifu" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.mygcloud.com/xr-frame/demo/waifu.png" />
</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-mesh node-id="cube" cast-shadow geometry="cube" uniforms="u_baseColorMap: waifu" />
<xr-mesh position="0 -1 0" scale="4 1 4" receive-shadow geometry="plane" uniforms="u_baseColorFactor: 0.4 0.6 0.8 1" />
<xr-camera position="0 1 4" target="cube" clear-color="0.4 0.8 0.6 1" camera-orbit-control />
</xr-scene>
</xr-frame>- 这里创建了一个包含环境光和方向光的场景，有一个立方体模型（
cube）和一个平面模型（plane），以及一个相机（camera），并为立方体模型指定了纹理（waifu.png）。
（二）页面逻辑（index.js）
- 在
index.js中，实现与 XR 场景交互的逻辑：
javascript
Page({
data: {
scene: null
},
handleReady: function (detail) {
this.scene = detail.value;
// 加载额外的资源，例如用户头像纹理
wx.getUserProfile({
desc: '获取头像',
success: (res) => {
this.scene.assets.loadAsset({
type: 'texture',
assetId: 'avatar',
src: res.userInfo.avatarUrl
}).then(() => {
this.setData({
avatarTextureId: 'avatar'
});
});
}
});
},
handleAssetsProgress: function (detail) {
console.log('assets progress', detail.value);
},
handleAssetsLoaded: function (detail) {
console.log('assets loaded', detail.value);
}
})- 在
handleReady函数中，获取 XR 场景实例，并在获取用户头像成功后，将头像纹理加载到场景中。同时，handleAssetsProgress和handleAssetsLoaded函数用于监听资源加载进度和完成事件。
（三）云开发配置
- 初始化云开发环境：在
app.js中添加云开发初始化代码：
javascript
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
App({
onLaunch: function () {
// 其他初始化逻辑
}
})- 这里使用了动态环境变量来初始化云开发环境，确保小程序在不同环境（如开发、测试、生产）下能够正确连接到对应的云开发环境。
（四）云函数（可选）
- 如果需要在云函数中处理与 XR 小程序相关的数据或逻辑，可以创建云函数。例如，创建一个云函数
getXRData来获取一些与 XR 场景相关的数据：
javascript
// 在云函数目录下创建getXRData文件夹，包含index.js和package.json
// index.js内容
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
// 这里可以编写获取XR数据的逻辑，例如从数据库中查询相关数据
const db = cloud.database()
const result = await db.collection('xrData').get()
return result
}- 在小程序中，可以通过
wx.cloud.callFunction调用云函数，例如在index.js中的某个函数中调用：
javascript
wx.cloud.callFunction({
name: 'getXRData',
success: (res) => {
console.log('云函数返回结果', res.result)
// 根据云函数返回结果进行相应处理
},
fail: (err) => {
console.error('调用云函数失败', err)
}
})（五）样式调整（index.wxss）
- 可以根据需要为 XR 场景中的元素添加样式，例如调整模型的颜色、透明度等。虽然 XR 场景中的元素主要由 3D 模型和材质决定，但可以通过一些 CSS 属性来影响元素的显示效果，如
opacity、transform等：
css
.xr-mesh {
opacity: 0.8;
transform: scale(1.2);
}- 这里将所有
xr-mesh元素的透明度设置为 0.8，并放大 1.2 倍，这只是一个简单的示例，实际开发中可以根据场景需求进行更复杂的样式调整。
（六）调试与优化
- 使用微信开发者工具进行调试，注意在真机调试时，由于目前不支持
wxml自动补全，需要特别仔细检查代码。可以在开发者工具中查看控制台输出，检查资源加载进度、场景准备情况以及云函数调用结果等信息。 - 针对性能优化，由于 XR 小程序对渲染开销较大，需要注意以下几点：
- 优化 3D 模型：尽量减少模型的面数，使用合适的压缩格式，避免使用过高分辨率的纹理。
- 合理使用资源：只加载当前场景需要的资源，避免一次性加载过多资源导致卡顿。
- 优化代码逻辑：避免在主循环中执行复杂计算，尽量将计算任务分散到合适的时机执行。
四、项目总结
本 Demo 展示了如何使用微信小程序云开发结合 XR - FRAME 框架创建一个简单的 XR 小程序，实现了 3D 场景展示、资源加载、用户头像纹理加载以及与云函数的交互（可选）。通过这个 Demo，开发者可以进一步探索 XR 小程序开发的更多可能性，如添加更多交互功能、创建更复杂的 3D 场景、优化性能等。同时，也需要注意 XR 小程序开发面临的挑战，如技术栈差异、渲染开销大等问题，在实际项目中需要不断优化和改进，以提供更好的用户体验。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
