原生微信小程AR序实现模型动画播放只播放一次,且停留在最后一秒

1.效果展示

0868d9b9f56517a9a07dfc180cddecb2


2.微信小程序AR是2023年初发布,还有很多问提(比如glb模型不能直接播放最后一帧;AR识别不了金属、玻璃材质的模型等…有问题解决了的小伙伴记得告诉我一声)
微信官方文档地址
3.代码展示,我用的是微信官方文档案例 demo框架。官方文档demo
在这里插入图片描述
4.代码展示
先创建组件xr-ar-cameraglb
在这里插入图片描述
index.wxml代码

<xr-scene id="xr-scenecameraglb" ar-system bind:ready="handleReady" bind:ar-ready="handleARReady" bind:ar-error="handleARError"><!-- 初始化模型 handleAssetsLoaded初始化模型加载完毕    handleAssetsProgress模型加载进度 1是加载完毕--><xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"><!-- <xr-asset-load type="gltf" asset-id="gltf-table" src="glb模型" /> --><xr-asset-load type="gltf" asset-id="gltf-table" src="要呈现的模型glb" /></xr-assets><xr-env env-data="xr-frame-team-workspace-day" /><xr-node><!-- 跟随手机移动 position="0 0 -1" --><xr-node node-id="table-wrap" position="0 0 -1"><!-- 初始化模型 position:位置调整  x y zscale:缩放调整   x y z
--><xr-gltf wx:if="{{modeShow}}" id="wxball-2" bind:touch-shape="handleTouchWXball" bind:gltf-loaded="handleGLTFLoaded" node-id="mesh-gltf-table" scale="0.25 0.25 0.25" position="0.1 -0.5 -2.9" rotation="-355 0 0" model="gltf-table" animation="animation-key" anim-autoplay /></xr-node><!--不跟随手机移动 position="2 1 10"  near="0.0001" is-ar-camera--><!-- <xr-camera target="gltf-table" is-ar-camera  clear-color="0.925 0.925 0.925 1" background="ar" far="2000"  /> --><!-- 跟随手机移动 --><xr-camera clear-color="0.4 0.6 0.7 1"background="ar" target="table-wrap" far="2000" 
/></xr-node><xr-node node-id="lights"><!-- 初始化模型 --><xr-light type="ambient" color="1 1 1" intensity="1.5" /><!-- 点光源 --><xr-light type="point" position="0 0 0" color="1 1 1" range="20" intensity="10" /></xr-node>
</xr-scene>

index.json代码

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

index.js代码

Component({behaviors: [require('../common/share-behavior').default],data: {loaded: false,modeShow: false},lifetimes: {attached() {// console.log('data.a', this.data.a) // expected 123}},methods: {handleGLTFLoaded({detail}) {let that = this;console.log("初始化模型加载结束");this.triggerEvent('changeShow', {isshows: true});},handleTouchWXball: function () {},handleReady({detail}) {// 显示加载中提示wx.showLoading({title: '加载中',mask: true // 是否显示透明蒙层,防止用户点击其他区域})const xrScene = this.scene = detail.value;},handleAssetsProgress: function ({detail}) {if (detail.value.progress == 1) { //组件加载完毕// console.log('初始化模型相机', detail.value.progress);}},handleAssetsLoaded: function ({detail}) {// console.log('模型加载完毕111', detail.value);// 隐藏加载中提示let that = this;wx.hideLoading();setTimeout(res => {this.setData({modeShow: true, //显示模型loaded: true})this.triggerEvent('changeLoaded', {changeLoaded: true});// 4秒后暂停模型setTimeout(() => {// console.log('模型加载完毕111');const animator1 = that.scene.getElementById('wxball-2').getComponent("animator");animator1.pause();this.triggerEvent('changeShow', {isshows: true});}, 10000)}, 100)},handleARReady: function ({detail}) {console.log('ar-ready', this.scene.ar.arModes, this.scene.ar.arVersion);},handleARError: function ({detail}) {console.log('ar-error', detail);},handleLog: function ({detail}) {const {el,value} = detail;console.log('log', detail.value);},}
})

5.在page创建父组件scene-ar-germanBusiness
在这里插入图片描述
在app.json里注册理由
在这里插入图片描述

"pages/ar/scene-ar-germanBusiness/index",

index.wxml文件代码

<view><!-- 初始化模型 --><xr-demo-viewer><xr-ar-cameraglbbind:changeShow="changeShow"bind:changeLoaded="changeLoaded"disable-scrollid="main-frame1"width="{{renderWidth}}"height="{{renderHeight}}"style="width:{{width}}px;height:{{height}}px;top:{{top}}px;left:{{left}}px;display:block;"/></xr-demo-viewer>
</view>

index.json代码 子组件地址根据自己的路径来 xr-demo-viewer组件在官方文档demo里面有

{"usingComponents": {"xr-demo-viewer": "../../../components/xr-demo-viewer/index","xr-ar-cameraglb": "../../../components/xr-ar-cameraglb/index"},"disableScroll": true
}

index.js代码

var sceneReadyBehavior = require('../../behavior-scene/scene-ready');
var handleDecodedXML = require('../../behavior-scene/util').handleDecodedXML;
Page({
data:{
musicbg: null,//菜单音乐
},onUnload() {this.musicbg.stop();// 清除video定时器// clearTimeout(this.data.time3);},onHide() {this.musicbg.stop();},onLoad(options) {wx.setNavigationBarTitle({title: "AR"})let that = this;// 背景音乐this.musicbg = wx.createInnerAudioContext()this.musicbg.src = "https://cyvideo.i-oranges.com/ar/ds2024/music-1.mp3";//背景音乐线上地址this.musicbg.volume = 0.6;this.musicbg.loop = true;//初始化如果是视频则显示背景音乐;模型则注释该代码this.musicbg.play();// 关闭主页按钮// wx.hideHomeButton();},//关闭初始化模型changeShow: function (e) {// this.closeMusic.play();if (e.detail.isshows) {setTimeout(res => {// 4秒播放完成后展示菜单和最后一帧this.setData({// video1: true,// gestureShow: 3,// tipsTu: true,// loadMeaunShow: true})// this.firstMusic.pause();//关闭初始化模型音乐}, 10000)}},//初始化模型changeLoaded:function(event){console.log('初始化模型=============',event.value);this.musicbg.play();},
})

以上就是我呕心沥血的橙果,家人们记得点赞收藏呀~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/634054.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gazebo路径配置

启动命令&#xff1a; ros2 launch gazebo_ros gazebo.launch.py 必须进行路径配置&#xff0c;否则出错。 路径配置方法&#xff0c;在~/.bashrc中添加一行 source /usr/share/gazebo/setup.sh

软件测试阶段简介_单元测试、集成测试、配置项测试、系统测试

文章目录 前言一、软件测试“V”模型二、单元测试三、集成测试四、配置项测试五、系统测试总结 前言 一般来说&#xff0c;按照软件的研制阶段划分&#xff0c;软件测试可分为单元测试、集成测试、配置项测试、系统测试等。本文将对上述各测试阶段进行逐一介绍。 一、软件测试…

免备案cdn加速服务对网站有哪些好处?-速盾网络

随着互联网的迅速发展&#xff0c;越来越多的网站需要提供高速访问服务&#xff0c;以满足用户的需求。为了提高网站的访问速度和稳定性&#xff0c;很多网站开始使用CDN&#xff08;内容分发网络&#xff09;加速服务。然而&#xff0c;由于中国互联网管理部门的政策要求&…

Redis--Zset使用场景举例(滑动窗口实现限流)

文章目录 前言什么是滑动窗口zset实现滑动窗口小结附录 前言 在Redis–Zset的语法和使用场景举例&#xff08;朋友圈点赞&#xff0c;排行榜&#xff09;一文中&#xff0c;提及了redis数据结构zset的指令语法和一些使用场景&#xff0c;今天我们使用zset来实现滑动窗口限流&a…

Python高级编程之IO模型与协程

更多Python学习内容&#xff1a;ipengtao.com 在Python高级编程中&#xff0c;IO模型和协程是两个重要的概念&#xff0c;它们在处理输入输出以及异步编程方面发挥着关键作用。本文将介绍Python中的不同IO模型以及协程的概念、原理和用法&#xff0c;并提供丰富的示例代码来帮助…

JavaEE之多线程编程:3. 线程的状态(易懂!)

文章目录 一、关于线程的状态二、观察线程的所有状态1. NEW状态2. TERMINATED状态3. RUNNABLE状态4. TIMED_WAITING 一、关于线程的状态 进程最核心的状态&#xff0c;一个是就绪状态&#xff0c;一个是阻塞状态&#xff08;对于线程同样使用&#xff09;。 以线程为单位进行调…

React入门 - 10(说一说关于 React 的一些理论 )

本章内容 目录 1、React 是一种 ”声明式“开发2、React 可与其他框架并存3、React 的”组件式“开发4、React 遵循”单向数据流“5、React 是一个用于构建”视图层“的框架6、React 采用”函数式编程“ 截止到上一节内容&#xff0c;我们就使用 React实现 TodoList的功能已经…

AOI与AVI:在视觉检测中的不同点和相似点

AOI&#xff08;关注区域&#xff09;和AVI&#xff08;视觉感兴趣区域&#xff09;是视觉检测中常用的两个概念&#xff0c;主要用于识别和分析图像或视频中的特定区域。虽然这两个概念都涉及到注视行为和注意力分配&#xff0c;但它们在定义和实际应用等方面有一些差异。 AOI…

基于SpringBoot的社区帮扶对象管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

视频生成的路线之争:基于LLMs 和 基于SD 的技术路线孰优孰劣?

Diffusion Models视频生成-博客汇总 前言:在 AI 领域,近年来各个子领域都逐渐向 transformer 架构靠拢,只有视觉生成领域一直以 diffusion 结构作为主流方向,但是近年来谷歌、Meta、华为等大厂都在尝试使用基于LLMs的结构完成视觉生成任务。相比于趋于成熟的图像生成任务,…

win10 使用wezterm替代tmux

在windows系统下&#xff0c;没有直接的tmux替代品。wezterm作为一个可高度自定义配置的终端&#xff0c;可以一定程度替代tmux&#xff0c;满足我在windows系统下替换tmux的需求。 配置wezterm&#xff0c;使其快捷键风格接近tmux。快捷键配置如下。基于该配置wezterm.lua&am…

常见的 Linux 发行版和相应的服务管理命令

一、在 Linux 系统中&#xff0c;你可以使用不同的命令来停止服务&#xff0c;具体取决于你的系统和使用的初始化系统&#xff08;init 系统&#xff09;或服务管理工具。以下是一些常见的 Linux 发行版和相应的服务管理命令&#xff1a; 1. 使用 Systemd&#xff08;大多数现…

Git教程学习:03 记录每次更新到仓库

文章目录 1 检查当前文件状态2 跟踪新文件3 暂存已修改的文件4 状态简览5 忽略文件6 查看已暂存和未暂存的修改7 提交更新8 跳过使用暂存区域9 移除文件10 移动文件 现在我们的机器上有了一个 真实项目 的 Git 仓库&#xff0c;并从这个仓库中检出了所有文件的 工作副本。 通常…

windows和linux实时监控文本内容的命令

很多时候我们需要实时查看日志的内容 WIndows Get-Content someFile.txt -WaitLInux tail -f /var/log/apache2/access.logtail命令使用 tail命令是一个用于在Linux和Unix系统中查看文件末尾内容的命令。它通常用于实时监控日志文件的更新&#xff0c;以及查看文件的最新内…

前端和后端之间的CORS 跨域和解决办法

什么是CORS&#xff08;Cross-Origin Resource Sharing&#xff0c;跨源资源共享&#xff09; 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于 HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的其他源&#xff0…

Docker之安装Nginx

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Docker之Dockerfile构建镜像》。&#x1f3af;&…

为什么 macOS 比 Windows 稳定?

在计算机操作系统领域&#xff0c;macOS 和 Windows 分别是苹果公司和微软公司的主打产品。尽管两者都拥有大量的用户群体&#xff0c;但在稳定性和用户体验方面&#xff0c;macOS 常常被认为优于 Windows。那么&#xff0c;为什么 macOS 比 Windows 更稳定呢&#xff1f; 我们…

【Python 千题 —— 基础篇】元组的合并

题目描述 题目描述 现在有一个元组 (1, 2, 3, 4),用其它不破坏元组不可破坏性的基础方法上,向元组中添加 6,7,8 这几个数字。 输入描述 无 输出描述 输出“修改”后的元组。 示例 示例 ① 输出: (1, 2, 3, 4, 6, 7, 8)

算法题-爬楼梯-不同思路解法

主要记录个人思考过程&#xff0c;不同方案实现思路的演变 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;…