兼职游戏网站怎么做/windows优化大师的特点
前言
由于之前一直在做这个AR/VR 相关的功能开发,大部分的时候实现方式都是基于高通Vuforia或者EasyAR等基于Unity3d的引擎的开发,这样开发的程序大部分都是运行在APP上,安卓或者ios的开发也能一次性搞定。不过当时大部分的需求都是需要在网页端的功能,特别在WX打开连接就能体验功能的需求很强烈。不过在这些功能鄙人还都没有实现过,而且跳槽后基本不再做文旅相关的开发,前几天在逛GitHub时发现了现在很火的开源库AR.js(4.4k星星),用于 Web 增强现实的轻量级库,具有图像跟踪、基于位置的 AR 和标记跟踪等功能(自行搜索查看)----于是整了体验一下,效果还是很不错,不过就在该库的介绍页中发现了更叼的、更出色的图像跟踪功能(也是多个图像跟踪)和面部跟踪(MindAR,GitHub站内1.5k星星),在经过了node.js和npm的数次捣鼓和安装操作后,终于制作出了一个自己的案例,在此将过程分享出来。
效果
识别:
跟随:
准备工作
大致流程是将github上的代码下载到本地,准备目标识别图,目标图像编译,准备模型等准备工作。
下载源码
本地如果安装了git工具可以直接git下来,这个我就不交了,没有的可以直接下载压缩包:
code > Download ZIP
下载完成的压缩包,进行解压后就获得了源码。
安装包体
这里需要node.js的环境(个人也是这么编译和操作的),具体自行进行搜索配置吧。Cmd切换到源码的根路径,安装关联的包体:
npm install
然后再进行执行构建操作:
npm run build dist
模型&目标图
由于本人也不太会建模和画画,就直接在网上找了现成的素材进行。
编译目标图
编译图的地址该项目的仓库地址有介绍,在说明文档的工具页,我也是直接使用在线的方式进行的,为了不外链就自己找一下吧。打开网页后会按提示可以将图片拖到对应的位置,就会上传识别图(按文档说的是可以多选图片,这样就可以实现多目标检测和跟踪的功能)。
过程如下图:
等待编译完成后会有一些大小不一可供选择的带特征点的识别图可供预览:
个人认为特征点越多识别精准度会越高(仅个人认为,需验证自行测试)。
点击下载后,将会得到一个targets.mind的文件,这个文件需要放到工程中,后续会使用到。
编写代码
需要快速上手,我也不从头进行编码了,直接在“mind-ar-js-master\examples\image-tracking、example1.html”的基础上进行了修改,然后完成自己的功能。
这里的主要修改了body中的内容,即替换了识别图、识别后的模型等。
<body><div class="example-container"><a-scene mindar-image="imageTargetSrc: ./assets/card-example/card.mind; showStats: true;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"><a-assets><img id="card" src="./assets/card-example/card.png" /><a-asset-item id="avatarModel" src="./assets/card-example/softmind/scene.gltf"></a-asset-item></a-assets><a-camera position="0 0 0" look-controls="enabled: false"></a-camera><a-entity mindar-image-target="targetIndex: 0"><a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane><a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel"animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" ></a-entity></a-scene></div></body>
修改为:
<body>
<div class="example-container"><a-scene mindar-image="imageTargetSrc: ./ImgTarget/kfgirl.mind; showStats: true;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"><a-assets><img id="kfgirlimg" src="./ImgTarget/kfgirl.png" /><a-asset-item id="kfgirlmodel" src="./ImgTarget/scene.gltf"></a-asset-item></a-assets><a-camera position="0 0 0" look-controls="enabled: false"></a-camera><a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model rotation="0 0 0 " position="0 0.5 0" scale="0.005 0.005 0.005" src="#kfgirlmodel" animation-mixer></a-gltf-model></a-entity></a-scene>
</div>
</body>
这里的a-scene 的mindar-image = imageTargetSrc是识别目标的路径,其它属性感觉无关痛痒,暂时未研究。
a-assets是场景中的资源,图片和模型,我也是按案例中进行了id 和src的替换。
a-gltf-model是识别后的模型展示,src属性需要和a-assets中模型(a-asset-item)的id一致,同时rotation="0 0 0 " position=“0 0.5 0” scale=“0.005 0.005 0.005” 这些的赋值,主要是依次控制模型的旋转、位置、缩放属性,这些根据不同的模型进行设置;我这里删除了animation属性,不要了场景默认的动画。添加了animation-mixer 这个是控制模型自带动作的,不添加模型将没有对应的动作。
服务器设置
我这里直接使用了IIS作为了本地的服务器,在打开网页测试之前还需要进行MIME类型的添加:
.mind:
.bin
如果有其它的后缀名类型,需要自行添加上去,不然没办法运行网页或者功能不正常。
同时需要配置SSL证书(这个教程网上多,自行搜索配置吧):
最后通过https://IP地址/网页进行访问。
源码
https://download.csdn.net/download/qq_33789001/87537647
(打不开说明暂未通过审核)
总结
这个摸索了几天弄出来的效果,在手机和电脑上都能顺利运行,但是不知什么原因感觉帧率是有点低,就像效果图上的显示一样,只有个位数的帧率,所以要用这个开发测试还需要进行充分的测试。还有部分脚本库是托管在了cdn服务器,直接调用会比较的慢,还有可能出现脚本库加载不成功的情况,如果直接使用仓库中的案例可能需要科学上网。
相关文章:

基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能(含源码)
前言 由于之前一直在做这个AR/VR 相关的功能开发,大部分的时候实现方式都是基于高通Vuforia或者EasyAR等基于Unity3d的引擎的开发,这样开发的程序大部分都是运行在APP上,安卓或者ios的开发也能一次性搞定。不过当时大部分的需求都是需要在网…...

ssh 远程连接方式总结
SSH 概述 SSH(安全外壳协议 Secure Shell Protocol,简称SSH)是一种加密的网络传输协议,用于在网络中实现客户端和服务端的连接,典型的如我们在本地电脑通过 SSH连接远程服务器,从而做开发,Wind…...

springboot+mybatisPlus简单实现数据分页显示
项目地址:https://gitee.com/flowers-bloom-is-the-sea/geo_demo/tree/v1.0/ 这个项目的测试是可以的。 先来查看一些tb_shop表: id name x y ------ ------ ------ --------里面是空数据,那么现在对数据里插入一些数据…...

axios的基本使用
axios 安装axios npm install axios 使用时先导入 import axios from ‘axios’ axios请求方式 axios支持多种请求方式 axios(config) axios.request(config) axios.get(url[, config]) axios.head(url, [, config]) axios.post(url[, data[, config]]) axios.put(url[, dat…...

核心 Android 调节音量的过程
核心 Android 系统提供的调节音量的方法 核心 Android 系统提供了多种调节音量的方法,这些方法主要包括如下这些。 如在 Android Automotive 调节音量的过程 中我们看到的,CarAudioService 最终在 CarAudioDeviceInfo 中 (packages/services/Car/servi…...

用C/C++制作一个简单的俄罗斯方块小游戏
用C/C制作一个简单的俄罗斯方块小游戏 用C/C制作一个简单的俄罗斯方块小游戏 0 准备1 游戏界面设计 1.1 界面布局1.2 用 EasyX 显示界面1.3 音乐播放 2 方块设计 2.1 方块显示2.2 随机生成一个方块2.3 方块记录 3 方块移动和旋转 3.1 方块的移动3.2 方块的旋转3.3 方块的碰撞和…...

使用免费负载生成器swingbench对oracle数据库进行压力测试(测试Oracle的功能或评估性能)
1.Swingbench 简介 Swingbench 是一个免费负载生成器(和基准测试),旨在对 Oracle 数据库 进行压力测试。目前最新版本 Swingbench 2.6。 SwingBench 由负载生成器,协调器和集群概述组成。该软件可以生成负载 并绘制交易/响应时间…...
【预告】ORACLE Primavera P6 v22.12 虚拟机发布
引言 离ORACLE Primavera P6 EPPM最新系统 v22.12已过去了3个多月,应盆友需要,也为方便大家体验,我近日将构建最新的P6的虚拟环境,届时将分享给大家,最终可通过VMWare vsphere (esxi) / workstation 或Oracle virtua…...

机器学习100天(四十):040 线性支持向量机-公式推导
《机器学习100天》完整目录:目录 机器学习 100 天,今天讲的是:线性支持向量机-公式推导! 首先来看这样一个问题,在二维平面上需要找到一条直线划分正类和负类。 我们找到了 A、B、C 三条直线。这三条直线都能正确分类所有训练样本。但是,哪条直线最好呢?直观上来看,我…...

失败经验之震荡玩家往往死于趋势市场
亏损,是从去年开始的吧。 尤其是去年,仅仅一年,就亏掉了自从交易以来的所有盈利。 现在,我甚至不敢去计算具体的亏损金额。 保守估计,已经亏损100万左右。 现在回想,似乎也是必然。 交易本来就是一个走…...

应用层与传输层~
文章目录应用层自定义应用层协议什么是自定义应用层协议自定义方式运输层运输层概述运输层特点运输层协议UDP协议UDP的特点UDP首部格式校验规则TCP协议TCP的特点TCP协议段格式TCP的性质确认序号超时重传连接管理三次握手四次挥手TCP的状态滑动窗口流量控制拥塞控制延迟应答捎带…...

IO文件操作
认识文件 狭义的文件 存储在硬盘上的数据,以“文件"为单位,进行组织 常见的就是普通的文件 (文本文件,图片, office系列,视频,音频可执行程序…)文件夹也叫做"目录" 也是一种特殊的文件。 广义的文件 操作系统,是要负责管理软硬件资源,操作系统(…...

【构建工具】webpack 3、4 升级指南,摆脱低版本的困扰
一、依赖处理 1.升级通用依赖 借用 ncu 库实现,帮你改写需要升级的package.json 然后再 npm install ncu -u <packages> # 可以指定依赖 ncu # 升级全部依赖大概列了下升级的效果 add-asset-html-webpack-plugin ^2.1.3 → ^5.0.2 clean-webpack-…...

Javaweb第一个项目——实现简单的登陆功能
第一步:打开idea-->文件-->新建 第二步: 在Demo文件夹 点击右键-->添加框架支持-->找到Web应用程序 勾选 第三步:配置Tomcat 第四步:新建一个lib(建在web-INF文件夹下)文件夹 用于存放jar包…...

OpenKruise 开发者不容错过的带薪实习机会!马上加入 LFX Mentorship 计划
LFX Mentorship 计划由 Linux Foundation 组织发起,为像 OpenKruise 这样的 CNCF 托管项目提供了激励开源贡献、扶植社区发展的优秀土壤。参与其中的开发者不仅有机会在经验丰富的社区 Mentor 指导下贡献开源项目、为职业生涯加分,完成工作后还能获得 $3…...

《c++ primer笔记》第八章 IO库
前言 简单看一下就行 文章目录一、IO类1.1基本概念1.2管理输出缓冲二、文件输入输出2.1文件模式三、string流3.1istringstream3.2ostringstream一、IO类 1.1基本概念 我们常见的流有istream和ostream,这两个流都是有关输入和输出的,此外,…...

web开发 用idea创建一个新项目
这个写着就是给自己当备忘录用的QAQ 这个老师上课一通操作啥也没看清…卑微搞了半天看样子是成功了 记录一下省的以后忘了怎么创建(? zufe lxy 2023.3 先行条件是已经自己装好了Tomcat和idea!!(我的idea是申请了教育…...

【FMCW 03】测速
从上一讲 测距 末尾的frame讲起。我们知道一个chirp对应了一个采样后的IF信号,我们将这些采样后的IF信号按chirp的次序排列成一个帧(frame),这就得到了我们实际中接收后处理的FMCW信号。 由于chirp的发射返回时间很短,…...

ERP(企业资源管理)概述
🌟所属专栏:ERP企业资源管理🐔作者简介:rchjr——五带信管菜只因一枚😮前言:该系列将持续更新ERP的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~👉文章简介&a…...

深入理解java虚拟机精华总结:性能监控和故障处理工具、类加载机制
深入理解java虚拟机精华总结:性能监控和故障处理工具、类加载机制性能监控和故障处理工具、类加载机制jpsjstatjinfojmapjhatjstackVisualVM类加载机制类加载的时机类加载的过程加载验证准备解析初始化类加载器类与类加载器双亲委派模型破坏双亲委派模型往期内容&am…...

推荐系统与推荐算法
文章目录第一章1.1推荐系统意义与价值1.2推荐系统历史与框架1.3推荐算法分类第二章2.1协同过滤的基本思想与分类2.2基于用户的协同过滤2.3基于项目的协同过滤2.4基于邻域的评分预测2.5基于二部图的协同过滤第三章3.1基于关联规则的推荐3.2基于矩阵分解的评分预测3.3概率矩阵分解…...

socket 编程实战(编写客户端程序 )
编写客户端程序 接着上一篇:实战服务端程序 接下来我们再编写一个简单地客户端应用程序,客户端的功能是连接上小节所实现的服务器,连接成功之后向服务器发送数据,发送的数据由用户输入。示例代码如下所示: #include…...

“巨亏成名”的魔鬼交易员,你知道几个?
谁说在期货市场上只有赚大钱才能出名?殊不知还有这样一群特殊的交易员靠着巨额亏损而“一战成名”,亏得是老东家元气大伤,外号“魔鬼交易员”——“不亏不成魔”!接下来火象就给大家盘点几位代表性魔鬼交易员,看看他们…...

1380:分糖果(candy)
1380:分糖果(candy) 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 童年的我们,将和朋友分享美好的事物作为自己的快乐。这天,C小朋友得到了Plenty of candies,将要把这些糖果分给要好的朋友们。已知糖果从一个人传…...

数据挖掘(2.1)--数据预处理
一、基础知识 1.数据的基本概念 1.1基础知识 数据是数据对象(Data Objects)及其属性(Attributes)的集合。 数据对象(一条记录、一个实体、一个案例、一个样本等)是对一个事物或者物理对象的描述。 数据对象的属性则是这个对象的性质或特征,例如一个人的肤色、眼球…...

PMP考前冲刺3.06 | 2023新征程,一举拿证
题目1-2:1.一名团队成员表示,他们的用户故事要等到迭代结束后才能完成,因为他们的职能经理要求他们协助解决高优先级的生产问题。项目经理应该做什么?A.将问题上报给项目发起人以解决和调整项目燃尽图B.与产品负责人讨论用户故事不…...

buuctf-pwn write-ups (11)
文章目录buu083-x_ctf_b0verfl0wbuu084-picoctf_2018_leak_mebuu085-inndy_echobuu086-hitcontraining_unlinkbuu087-ciscn_2019_final_3buu088-axb_2019_fmt64buu089-wustctf2020_name_your_catbuu090-pwnme1buu091-axb_2019_brop64buu092-[极客大挑战 2019]Not Badbuu083-x_c…...

【VTK】VTK隐藏vtkOutputWindow窗口的正确方法
VTK隐藏vtkOutputWindow窗口 要求隐藏vtkOutputWindow窗口,但是不能把Warning警告和Error错误的信息都给屏蔽了 网上常见的错误方法: 现在百度搜索出来的方法几乎都是在这样做:在main文件中使用vtkOutputWindow::SetGlobalWarningDisplay(0…...

顺序表以及链表的应用及区别(包含OJ讲解)
前面我已经发过怎么实现链表以及顺序表,今天大概的总结一下。 顺序表: 1.能够随时的存取,比较方便。 2.插入删除时,需要挪动数据,比较麻烦,因为是连续存储。 3.存储密度相对于链表来说是比较高的&#…...

JVM简介
一、什么是JVM JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 Java语言的一个非常重要的特点就是与平…...