CN117519653A - 一种基于PlayCanvas的微信小程序AR互动实现方法 - Google Patents

一种基于PlayCanvas的微信小程序AR互动实现方法 Download PDF

Info

Publication number
CN117519653A
CN117519653A CN202311488806.5A CN202311488806A CN117519653A CN 117519653 A CN117519653 A CN 117519653A CN 202311488806 A CN202311488806 A CN 202311488806A CN 117519653 A CN117519653 A CN 117519653A
Authority
CN
China
Prior art keywords
playcanvas
plug
wechat applet
developer
interaction
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311488806.5A
Other languages
English (en)
Inventor
王嘉炀
冯振华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
E Surfing Video Media Co Ltd
Original Assignee
E Surfing Video Media Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by E Surfing Video Media Co Ltd filed Critical E Surfing Video Media Co Ltd
Priority to CN202311488806.5A priority Critical patent/CN117519653A/zh
Publication of CN117519653A publication Critical patent/CN117519653A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/20Software design
    • G06F8/24Object-oriented
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/33Intelligent editors
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/70Software maintenance or management
    • G06F8/73Program documentation

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Library & Information Science (AREA)
  • Stored Programmes (AREA)

Abstract

本发明涉及软件开发技术领域,且公开了一种基于PlayCanvas的微信小程序AR互动实现方法,包括。本发明将PlayCanvas脚本文件导入微信小程序项目中,以便调用PlayCanvas的渲染和交互功能。通过插件初始化,我们加载项目工程文件中定义的场景资源,包括3D模型、纹理和动画,确保AR元素在小程序中流畅展现;调用插件提供的交互操作方法,以及结合微信的摄像头、空间位置定位等功能,为用户提供AR互动功能,包括AR标记的追踪、虚拟元素的互动以及手势识别。这些互动操作与微信小程序的用户界面融合,为用户带来身临其境的AR体验。不仅简化了开发者的工作流程,还为微信小程序用户带来了全新的AR体验,扩展了AR技术的应用范围。

Description

一种基于PlayCanvas的微信小程序AR互动实现方法
技术领域
本发明涉及软件开发技术领域领域,尤其是涉及一种基于PlayCanvas的微信小程序AR互动实现方法。
背景技术
在数字媒体和增强现实(AR)领域,PlayCanvas渲染引擎已成为一个有力的工具,用于创建引人入胜的3D和2D互动应用程序。PlayCanvas提供了高性能的渲染和交互功能,使得开发者能够实现令人惊叹的虚拟和增强现实体验。
与此同时,微信小程序作为微信生态系统中的轻量级应用程序平台,吸引了数以百万计的用户和开发者。微信小程序提供了强大的社交分享和分发机制,使得开发者能够轻松将应用程序推广给广泛的受众。
然而,将PlayCanvas渲染引擎与微信小程序集成,以实现AR互动应用程序,仍然面临技术挑战。PlayCanvas通常在Web环境中运行,而微信小程序有其独特的开发和运行模型。这导致了性能问题、跨平台兼容性问题以及资源管理的复杂性。当前的解决方案尚不足以充分释放PlayCanvas在微信小程序端AR互动应用的潜力;
本背景技术所公开的上述信息仅仅用于增加对本发明背景技术的理解,因此,其可能包括不构成本领域普通技术人员已知的现有技术。
发明内容
为了解决现有技术存在的问题,本发明提供一种基于PlayCanvas的微信小程序AR互动实现方法。
本发明提供的一种基于PlayCanvas的微信小程序AR互动实现方法采用如下的技术方案:
一种基于PlayCanvas的微信小程序AR互动实现方法,包括以下步骤:
S1:在线制作PlayCanvas项目;
开发者使用PlayCanvas的在线编辑工具创建一个项目,所述项目将作为微信小程序AR互动应用程序的基础;
S2:导出PlayCanvas项目工程;
开发者将已创建的PlayCanvas项目导出为一个项目工程文件,以备后续在微信小程序中引入和使用;
S3:引入PlayCanvas插件;
开发者引入PlayCanvas插件,该插件提供了与微信小程序集成所需的功能和工具;
S4:导入PlayCanvas脚本文件;
开发者导入PlayCanvas脚本文件,以便在微信小程序中调用PlayCanvas的功能和方法;
S5:插件初始化并加载场景资源;
开发者初始化PlayCanvas插件,以及加载在步骤S1中创建的PlayCanvas项目场景所导出的资源;
S6:调用插件的交互操作方法进行AR交互;
开发者结合微信提供的能力,使用PlayCanvas插件的交互操作方法实现AR交互功能,例如识别AR标记、呈现虚拟对象、触发动作等。这包括以下操作。
优选的,在所述步骤S1中还包括以下操作;
访问PlayCanvas编辑器:开发者登录PlayCanvas的在线编辑器,准备开始创建项目;
创建项目:在编辑器中创建一个新的项目,并选择所需的项目设置,包括场景大小、渲染配置;
设计场景:使用编辑器的可视化工具,开发者可以设计场景,添加3D模型、纹理、光照等元素,以创建AR互动应用所需的虚拟环境。
优选的,在所述步骤S2中还包括以下操作;
导出项目工程:开发者使用PlayCanvas编辑器提供的导出功能,将项目保存为一个工程文件,以标准JSON格式存储项目数据;
保存所需资源:工程文件若包含引用的资源文件的链接或路径,开发者要确保这些资源文件能够在后续的微信小程序中使用。
优选的,在所述步骤S3中还包括以下操作;
添加插件:开发者在微信小程序后台的插件管理中添加插件;
项目中引入插件:微信小程序项目中使用"require"或"import"的方式将PlayCanvas插件引入微信小程序的JavaScript代码中。
优选的,在所述步骤S4中还包括以下操作;
引入脚本文件:开发者需要使用"import"的方式将PlayCanvas JS脚本文件引入微信小程序的JavaScript代码中;
配置路径和依赖项:确保脚本文件的路径和依赖项正确配置,以使PlayCanvas引擎能够正常运行并与微信小程序进行交互。
优选的,在所述步骤S5中还包括以下操作;
实例化插件对象:开发者创建PlayCanvas插件对象的实例,并传递所需的配置参数;
初始化插件:调用插件的初始化方法,以确保插件已准备好在微信小程序中使用;
加载场景资源:使用插件提供的资源加载方法,加载PlayCanvas项目场景所需的资源。
优选的,在所述步骤S6中还包括以下操作;
调用交互方法:开发者使用插件对象提供的方法来实现AR场景中的交互操作,以响应用户的行为或与现实世界的互动;
处理交互事件:开发者可能需要处理用户的交互事件,例如点击、手势等,以确保AR应用程序的响应性和用户体验。
综上所述,本发明包括以下有益技术效果:
1、适配微信小程序环境下运行的PlayCanvas渲染引擎:将原本只能运行在web端的PlayCanvas库,适配能够支持微信小程序端运行。
2、封装PlayCanvas引擎的微信小程序插件:集成PlayCanvas渲染引擎,封装了运行PlayCanvas项目工程的方法,并提供了一些AR交互能力。
3、微信小程序端应用PlayCanvas渲染引擎实现AR互动的方法:通过此方法,实现了在微信小程序端运行PlayCanvas AR项目。
附图说明
图1是本发明的流程框图。
具体实施方式
以下结合附图1对本发明作进一步详细说明。
PlayCanvas:PlayCanvas是一个用于开发3D游戏和交互式3D应用程序的在线游戏引擎和开发平台。它提供了一套功能强大的工具和资源,使开发人员能够创建高度可视化、跨平台的3D应用程序,包括网页游戏、虚拟现实(VR)应用、增强现实(AR)应用、模拟器等等。
AR:AR是"增强现实"(Augmented Reality)的缩写,是一种技术,它将现实世界与计算机生成的虚拟元素相结合,以增强人类感知的方式。AR技术通过在现实世界中叠加虚拟图像、音频、文本或其他感官信息,提供了丰富的交互体验。与虚拟现实(VR)不同,虚拟现实完全将用户置于计算机生成的虚拟环境中,而AR则将虚拟内容叠加到现实世界中。
本发明实施例公开一种基于PlayCanvas的微信小程序AR互动实现方法。
参照图1,一种基于PlayCanvas的微信小程序AR互动实现方法,本发明的核心技术点实现方案主要如下:
1、改进的PlayCanvas渲染引擎,适配微信小程序运行环境的使用;
微信小程序中运行的JavaScript是基于微信小程序框架的,它与浏览器中的JS有些不同,因为它没有浏览器的DOM和BOM,而是提供了微信小程序框架的API来访问微信的功能和界面组件。我们需要将PlayCanvas引擎库文件的中操作DOM和BOM相关的操作,转化成微信小程序提供的API调用。需要将PlayCanvas中涉及到的window对象下的属性对象转化成微信小程序中的实现,主要属性对象如:devicePixelRatio,URL,navigator,setTimeout,document,Element,HTMLImageElement,HTMLCanvasElement,HTMLVideoElement,HTMLElement,Image,Audio,Blob,atob,XMLHttpRequest,requestAnimationFrame,cancelAnimationFrame等。
举例:在PlayCanvas库中通过XMLHttpRequest实现资源的加载请求,为了适配微信小程序,我们需要对XMLHttpRequest对象进行重写实现,需要通过wx.request实现资源的加载请求。
2、封装PlayCanvas引擎的微信小程序插件;
通过该插件,实现针对微信小程序适配改进后的PlayCanvas库的集成以及封装,简化开发者对PlayCanvas的直接操作。将原本在只能web端页面上载入PlayCanvas项目的方法,通过此插件提供的能力实现在微信小程序内的载入运行。
此插件具体实现的实施举例:
插件(假设插件名为:PlayCanvasARAddIn)应该对外暴露一个类,我们假定类名为:PcPlus,类中需要存在构造函数、属性以及一些基本的方法。在小程序端引入插件进行使用。如下:
主要的属性包含:
插件内提供以下操作方法:
constructor(canvas,options):PcPlus构造函数,传入小程序的canvas对象和options配置参数,options参数可以是signId、projectBasePath、useCache。
setProjectBasePath(projectBasePath):viod设置3D项目路径,可通过构造函数设置
setSignId(signId):viod设置项目标记ID,可用于缓存分组标识用,可通过构造函数设置
setUseCache(useCache):viod设置是否需要使用缓存,可通过构造函数设置
initApp():viod初始化3D引擎,生成app对象。通过pcPlus.app获取。
loadProject({onLoading}):Promise<any>加载3D工程
loadScene(sceneFileName):Promise<any>加载场景
clearProjectStorage():void清屏,用于清除app.destroy()后屏幕最后一帧的画面
rotationFromMotion(alpha,beta,gamma):Quaternion由设备朝向计算相机旋转四元组。
具体的实施例如下(实施步骤图见:附图1):
S1:在线制作PlayCanvas项目
在这一步骤中,开发者使用PlayCanvas的在线编辑工具创建一个3D或2D项目,该项目将作为微信小程序AR互动应用程序的基础。这包括以下操作:
访问PlayCanvas编辑器:开发者登录PlayCanvas的在线编辑器,准备开始创建项目。
创建项目:在编辑器中创建一个新的项目,并选择所需的项目设置,包括场景大小、渲染配置等。
设计场景:使用编辑器的可视化工具,开发者可以设计场景,添加3D模型、纹理、光照等元素,以创建AR互动应用所需的虚拟环境。
S2:导出PlayCanvas项目工程
在这一步骤中,开发者将已创建的PlayCanvas项目导出为一个项目工程文件,以备后续在微信小程序中引入和使用。这包括以下操作:
导出项目工程:开发者使用PlayCanvas编辑器提供的导出功能,将项目保存为一个工程文件,通常以某种标准格式如JSON或其他格式存储项目数据。
保存所需资源:工程文件可能包含引用的资源文件的链接或路径,开发者需要确保这些资源文件也可以在后续的微信小程序中使用。
S3:引入PlayCanvas插件
在这一步骤中,开发者引入PlayCanvas插件,该插件提供了与微信小程序集成所需的功能和工具。这包括以下操作:
添加插件:开发者在微信小程序后台的插件管理中添加插件。
项目中引入插件:微信小程序项目中使用"require"或"import"的方式将PlayCanvas插件引入微信小程序的JavaScript代码中。
S4:导入PlayCanvas脚本文件
在这一步骤中,开发者导入PlayCanvas脚本文件,以便在微信小程序中调用PlayCanvas的功能和方法。这包括以下操作:
引入脚本文件:开发者通常需要使用"import"的方式将PlayCanvas JS脚本文件引入微信小程序的JavaScript代码中。
配置路径和依赖项:确保脚本文件的路径和依赖项正确配置,以使PlayCanvas引擎能够正常运行并与微信小程序进行交互。
S5:插件初始化并加载场景资源
在这一步骤中,开发者初始化PlayCanvas插件,以及加载在步骤S1中创建的PlayCanvas项目场景所导出的资源。这包括以下操作:
实例化插件对象:开发者创建PlayCanvas插件对象的实例,并可能传递所需的配置参数。
初始化插件:调用插件的初始化方法,以确保插件已准备好在微信小程序中使用。
加载场景资源:使用插件提供的资源加载方法,加载PlayCanvas项目场景所需的3D模型、纹理、材质等资源。
S6:调用插件的交互操作方法进行AR交互
在这一步骤中,开发者结合微信提供的能力,使用PlayCanvas插件的交互操作方法实现AR交互功能,例如识别AR标记、呈现虚拟对象、触发动作等。这包括以下操作:
调用交互方法:开发者使用插件对象提供的方法来实现AR场景中的交互操作,以响应用户的行为或与现实世界的互动。
处理交互事件:开发者可能需要处理用户的交互事件,例如点击、手势等,以确保AR应用程序的响应性和用户体验。
本发明实施例一种基于PlayCanvas的微信小程序AR互动实现方法的实施原理为:首先,我们通过PlayCanvas在线制作平台创建一个3D或2D场景,该场景包括虚拟元素、动画和交互元素。然后,我们将该项目的资源文件&脚本导出,以便在微信小程序中引入和使用。
在微信小程序中,我们引入上述的PlayCanvas插件,该插件专为实现基于PlayCanvas引擎实现AR互动而设计。我们将PlayCanvas脚本文件导入微信小程序项目中,以便调用PlayCanvas的渲染和交互功能。通过插件初始化,我们加载项目工程文件中定义的场景资源,包括3D模型、纹理和动画,确保AR元素在小程序中流畅展现。
最后,我们调用插件提供的交互操作方法,以及结合微信的摄像头、空间位置定位等功能,为用户提供AR互动功能,包括AR标记的追踪、虚拟元素的互动以及手势识别。这些互动操作与微信小程序的用户界面融合,为用户带来身临其境的AR体验。这一技术方案不仅简化了开发者的工作流程,还为微信小程序用户带来了全新的AR体验,扩展了AR技术的应用范围。
最后应说明的几点是:首先,在本发明的描述中,需要说明的是,除非另有规定和限定,术语“安装”、“相连”、“连接”应做广义理解,可以是机械连接或电连接,也可以是两个元件内部的连通,可以是直接相连,“上”、“下”、“左”、“右”等仅用于表示相对位置关系,当被描述对象的绝对位置改变,则相对位置关系可能发生改变;
其次:本发明公开实施例附图中,只涉及到与本公开实施例涉及到的结构,其他结构可参考通常设计,在不冲突情况下,本发明同一实施例及不同实施例可以相互组合;
最后:以上所述仅为本发明的优选实施例而已,并不用于限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
以上均为本发明的较佳实施例,并非依此限制本发明的保护范围,故:凡依本发明的结构、形状、原理所做的等效变化,均应涵盖于本发明的保护范围之内。

Claims (7)

1.一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:包括以下步骤:
S1:在线制作PlayCanvas项目;
开发者使用PlayCanvas的在线编辑工具创建一个项目,所述项目将作为微信小程序AR互动应用程序的基础;
S2:导出PlayCanvas项目工程;
开发者将已创建的PlayCanvas项目导出为一个项目工程文件,以备后续在微信小程序中引入和使用;
S3:引入PlayCanvas插件;
开发者引入PlayCanvas插件,该插件提供了与微信小程序集成所需的功能和工具;
S4:导入PlayCanvas脚本文件;
开发者导入PlayCanvas脚本文件,以便在微信小程序中调用PlayCanvas的功能和方法;
S5:插件初始化并加载场景资源;
开发者初始化PlayCanvas插件,以及加载在步骤S1中创建的PlayCanvas项目场景所导出的资源;
S6:调用插件的交互操作方法进行AR交互;
开发者结合微信提供的能力,使用PlayCanvas插件的交互操作方法实现AR交互功能,例如识别AR标记、呈现虚拟对象、触发动作等。这包括以下操作。
2.根据权利要求1所述的一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:在所述步骤S1中还包括以下操作;
访问PlayCanvas编辑器:开发者登录PlayCanvas的在线编辑器,准备开始创建项目;
创建项目:在编辑器中创建一个新的项目,并选择所需的项目设置,包括场景大小、渲染配置;
设计场景:使用编辑器的可视化工具,开发者可以设计场景,添加3D模型、纹理、光照等元素,以创建AR互动应用所需的虚拟环境。
3.根据权利要求1所述的一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:在所述步骤S2中还包括以下操作;
导出项目工程:开发者使用PlayCanvas编辑器提供的导出功能,将项目保存为一个工程文件,以标准JSON格式存储项目数据;
保存所需资源:工程文件若包含引用的资源文件的链接或路径,开发者要确保这些资源文件能够在后续的微信小程序中使用。
4.根据权利要求1所述的一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:在所述步骤S3中还包括以下操作;
添加插件:开发者在微信小程序后台的插件管理中添加插件;
项目中引入插件:微信小程序项目中使用"require"或"import"的方式将PlayCanvas插件引入微信小程序的JavaScript代码中。
5.根据权利要求1所述的一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:在所述步骤S4中还包括以下操作;
引入脚本文件:开发者需要使用"import"的方式将PlayCanvas JS脚本文件引入微信小程序的JavaScript代码中;
配置路径和依赖项:确保脚本文件的路径和依赖项正确配置,以使PlayCanvas引擎能够正常运行并与微信小程序进行交互。
6.根据权利要求1所述的一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:在所述步骤S5中还包括以下操作;
实例化插件对象:开发者创建PlayCanvas插件对象的实例,并传递所需的配置参数;
初始化插件:调用插件的初始化方法,以确保插件已准备好在微信小程序中使用;
加载场景资源:使用插件提供的资源加载方法,加载PlayCanvas项目场景所需的资源。
7.根据权利要求4所述的一种基于PlayCanvas的微信小程序AR互动实现方法,其特征在于:在所述步骤S6中还包括以下操作;
调用交互方法:开发者使用插件对象提供的方法来实现AR场景中的交互操作,以响应用户的行为或与现实世界的互动;
处理交互事件:开发者可能需要处理用户的交互事件,例如点击、手势等,以确保AR应用程序的响应性和用户体验。
CN202311488806.5A 2023-11-09 2023-11-09 一种基于PlayCanvas的微信小程序AR互动实现方法 Pending CN117519653A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311488806.5A CN117519653A (zh) 2023-11-09 2023-11-09 一种基于PlayCanvas的微信小程序AR互动实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311488806.5A CN117519653A (zh) 2023-11-09 2023-11-09 一种基于PlayCanvas的微信小程序AR互动实现方法

Publications (1)

Publication Number Publication Date
CN117519653A true CN117519653A (zh) 2024-02-06

Family

ID=89765754

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311488806.5A Pending CN117519653A (zh) 2023-11-09 2023-11-09 一种基于PlayCanvas的微信小程序AR互动实现方法

Country Status (1)

Country Link
CN (1) CN117519653A (zh)

Similar Documents

Publication Publication Date Title
CN107393013B (zh) 虚拟漫游文件生成、显示方法、装置、介质、设备和系统
CN103713891B (zh) 一种在移动设备上进行图形渲染的方法和装置
US20210105340A1 (en) Methods, systems, and computer program products for implementing cross-platform mixed-reality applications with a scripting framework
US10207190B2 (en) Technologies for native game experience in web rendering engine
Nathan WPF 4 unleashed
CN112070906A (zh) 一种增强现实系统及增强现实数据的生成方法、装置
CN111966354A (zh) 一种页面显示方法、装置及计算机可读存储介质
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
CN116302366B (zh) 面向终端开发的xr应用开发系统与方法、设备及介质
KR20130047071A (ko) 모바일용 혼합현실 어플리케이션 개발 장치 및 그 방법
CN116610881A (zh) 一种基于低代码软件的WebGL浏览交互方法
CN116339737B (zh) Xr应用编辑方法、设备及存储介质
CN114130017A (zh) 基于游戏引擎的界面部署方法、装置、设备及存储介质
US7743387B2 (en) Inheritance context for graphics primitives
CN117009029A (zh) Xr应用与内容运行方法、设备及存储介质
CN117519653A (zh) 一种基于PlayCanvas的微信小程序AR互动实现方法
Gökhan et al. ARgent: A web based augmented reality framework for dynamic content generation
CN117065357A (zh) 媒体数据处理方法、装置、计算机设备和存储介质
Ko et al. Interactive web-based virtual reality with java 3d
Mikkonen et al. Lively for Qt: A platform for mobile web applications
Oliveira et al. GVRf and blender: a path for android apps and games development
CN117596377B (zh) 画面推流方法、装置、电子设备、存储介质及程序产品
WO2024051394A1 (zh) 视频处理方法、装置、电子设备、计算机可读存储介质及计算机程序产品
CN117911615A (zh) 一种虚拟生物体生成方法及装置
US20240009560A1 (en) 3D Image Implementation

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination