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

2024-01-29 01:20

本文主要是介绍原生微信小程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();},
})

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

这篇关于原生微信小程AR序实现模型动画播放只播放一次,且停留在最后一秒的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/655362

相关文章

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo