网站建设书籍下载,怎么仿照别人网站,深圳市住房和建设局网站变更,做招聘的网站有哪些内容前言
由于之前一直在做这个AR/VR 相关的功能开发#xff0c;大部分的时候实现方式都是基于高通Vuforia或者EasyAR等基于Unity3d的引擎的开发#xff0c;这样开发的程序大部分都是运行在APP上#xff0c;安卓或者ios的开发也能一次性搞定。不过当时大部分的需求都是需要在网…前言
由于之前一直在做这个AR/VR 相关的功能开发大部分的时候实现方式都是基于高通Vuforia或者EasyAR等基于Unity3d的引擎的开发这样开发的程序大部分都是运行在APP上安卓或者ios的开发也能一次性搞定。不过当时大部分的需求都是需要在网页端的功能特别在WX打开连接就能体验功能的需求很强烈。不过在这些功能鄙人还都没有实现过而且跳槽后基本不再做文旅相关的开发前几天在逛GitHub时发现了现在很火的开源库AR.js(4.4k星星),用于 Web 增强现实的轻量级库具有图像跟踪、基于位置的 AR 和标记跟踪等功能自行搜索查看----于是整了体验一下效果还是很不错不过就在该库的介绍页中发现了更叼的、更出色的图像跟踪功能也是多个图像跟踪和面部跟踪MindARGitHub站内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中的内容即替换了识别图、识别后的模型等。
bodydiv classexample-containera-scene mindar-imageimageTargetSrc: ./assets/card-example/card.mind; showStats: true; embedded color-spacesRGB renderercolorManagement: true, physicallyCorrectLights vr-mode-uienabled: false device-orientation-permission-uienabled: falsea-assetsimg idcard src./assets/card-example/card.png /a-asset-item idavatarModel src./assets/card-example/softmind/scene.gltf/a-asset-item/a-assetsa-camera position0 0 0 look-controlsenabled: false/a-cameraa-entity mindar-image-targettargetIndex: 0a-plane src#card position0 0 0 height0.552 width1 rotation0 0 0/a-planea-gltf-model rotation0 0 0 position0 0 0.1 scale0.005 0.005 0.005 src#avatarModelanimationproperty: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate /a-entity/a-scene/div/body修改为
body
div classexample-containera-scene mindar-imageimageTargetSrc: ./ImgTarget/kfgirl.mind; showStats: true; embedded color-spacesRGB renderercolorManagement: true, physicallyCorrectLights vr-mode-uienabled: false device-orientation-permission-uienabled: falsea-assetsimg idkfgirlimg src./ImgTarget/kfgirl.png /a-asset-item idkfgirlmodel src./ImgTarget/scene.gltf/a-asset-item/a-assetsa-camera position0 0 0 look-controlsenabled: false/a-cameraa-entity mindar-image-targettargetIndex: 0
a-gltf-model rotation0 0 0 position0 0.5 0 scale0.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一致同时rotation0 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服务器直接调用会比较的慢还有可能出现脚本库加载不成功的情况如果直接使用仓库中的案例可能需要科学上网。
