赞皇建站建设,做网站 做app,网站推广的要点,个人建网站首选什么域名好Mindar.JS使用方式 注意#xff1a;此篇文章需要启动https才可调用相机权限 图像追踪示例
需要用到两个js库 script src./js/aframe.min.js/scriptscript src./js/mindar-image-aframe.prod.js/script下面看一下标签…Mindar.JS使用方式 注意此篇文章需要启动https才可调用相机权限 图像追踪示例
需要用到两个js库 script src./js/aframe.min.js/scriptscript src./js/mindar-image-aframe.prod.js/script下面看一下标签结构
这里是默认配置 document.addEventListener(DOMContentLoaded, function () {const sceneEl document.querySelector(a-scene);let arSystem;sceneEl.addEventListener(loaded, function () {// alert(执行)arSystem sceneEl.systems[mindar-image-system];});const startButton document.querySelector(#example-start-button);startButton.addEventListener(click, () {console.log(start);arSystem.start(); // start AR arSystem.pause(true);});sceneEl.addEventListener(arReady, (event) {alert(AR引擎已启动)});sceneEl.addEventListener(arError, (event) {alert(相机未启动成功)});});上面图片提到需要一个Mind文件这个文件就是图像识别的图片工具在这里图像目标编辑器
图像目标编辑器 如果是图片识别显示图片的话就很简单了
关于渲染视频
如果我想扫描图片展示视频该如何去操作呢 我这里加了两张png图片用来做暂停按钮 我这里按顺序称谓opc.png背景2.png按钮 当我们点击背景时让视频暂停并让按钮层级往内移动 或者 让按钮隐藏 再次点击背景让视频播放让按钮显示
const portfolio document.querySelector(#portfolio-panel);const paintandquestPreviewButton document.querySelector(#paintandquest-preview-button);const paintandquestPreviewButton2 document.querySelector(#paintandquest-preview-button2);portfolio.setAttribute(visible, true);let y 0;let status false;paintandquestPreviewButton.addEventListener(click, () {if (status false) {// paintandquestPreviewButton.setAttribute(visible, false);const testVideo document.createElement(video);const canplayWebm testVideo.canPlayType(video/webm; codecsvp8, vorbis);if (canplayWebm ) {document.querySelector(#paintandquest-video-link).setAttribute(src, #paintandquest-video-mp4);document.querySelector(#paintandquest-video-mp4).play();} else {paintandquestPreviewButton2.setAttribute(visible, false);document.querySelector(#paintandquest-video-link).setAttribute(src, #paintandquest-video-mp4);document.querySelector(#paintandquest-video-mp4).play();// alert(播放)status true}} else {paintandquestPreviewButton2.setAttribute(visible, true);// alert(暂停)// portfolio.setAttribute(visible, true);document.querySelector(#paintandquest-video-mp4).pause();status false;}});portfolio.setAttribute(position, 0 y -0.01);完整代码
!--* Description: * Autor: Southern Wind* Date: 2023-07-25 11:21:40* LastEditors: Southern Wind* LastEditTime: 2023-07-25 12:00:42
--
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAR相机/titlescript src./js/aframe.min.js/scriptscript src./js/mindar-image-aframe.prod.js/scriptscript src./js/vconsole.min.js/script
/headbodydiv styleposition: absolute; z-index: 1000button idexample-start-button重新加载/button/diva-scene mindar-imageimageTargetSrc: ./targets.mind; vr-mode-uienabled: false device-orientation-permission-uienabled: falsea-assetsimg idpaintandquest-preview src./images/opc.png /img idpaintandquest-preview2 src./images/2.png /video idpaintandquest-video-mp4 autoplayfalse looptrue src./1234.mp4 playsinline webkit-playsinline/video/a-assetsa-camera position0 0 0 look-controlsenabled: false cursorfuse: false; rayOrigin: mouse; raycasterfar: 10000; objects: .clickable/a-cameraa-entity mindar-image-targettargetIndex: 0 mytargeta-entity visiblefalse idportfolio-panel position0 0 -0.01a-image idpaintandquest-preview-button classclickable src#paintandquest-preview alpha-test0.5 position0 0 0.1 height0.552 width1/a-imagea-image idpaintandquest-preview-button2 classclickable src#paintandquest-preview2 alpha-test0.5 position0 0 0.05 height0.552 width1/a-imagea-video idpaintandquest-video-link webkit-playsinline playsinline width1 height0.552 position0 0 0/a-video/a-entity/a-entity/a-scenescriptconst vConsole new VConsole()console.log(vConsole);/scriptscriptconst portfolio document.querySelector(#portfolio-panel);const paintandquestPreviewButton document.querySelector(#paintandquest-preview-button);const paintandquestPreviewButton2 document.querySelector(#paintandquest-preview-button2);portfolio.setAttribute(visible, true);let y 0;let status false;paintandquestPreviewButton.addEventListener(click, () {if (status false) {// paintandquestPreviewButton.setAttribute(visible, false);const testVideo document.createElement(video);const canplayWebm testVideo.canPlayType(video/webm; codecsvp8, vorbis);if (canplayWebm ) {document.querySelector(#paintandquest-video-link).setAttribute(src, #paintandquest-video-mp4);document.querySelector(#paintandquest-video-mp4).play();} else {paintandquestPreviewButton2.setAttribute(visible, false);document.querySelector(#paintandquest-video-link).setAttribute(src, #paintandquest-video-mp4);document.querySelector(#paintandquest-video-mp4).play();// alert(播放)status true}} else {paintandquestPreviewButton2.setAttribute(visible, true);// alert(暂停)// portfolio.setAttribute(visible, true);document.querySelector(#paintandquest-video-mp4).pause();status false;}});portfolio.setAttribute(position, 0 y -0.01);document.addEventListener(DOMContentLoaded, function () {const sceneEl document.querySelector(a-scene);let arSystem;sceneEl.addEventListener(loaded, function () {// alert(执行)arSystem sceneEl.systems[mindar-image-system];});const startButton document.querySelector(#example-start-button);startButton.addEventListener(click, () {console.log(start);arSystem.start(); // start AR arSystem.pause(true);});sceneEl.addEventListener(arReady, (event) {alert(AR引擎已启动)});sceneEl.addEventListener(arError, (event) {alert(相机未启动成功)});});/script/body/htmlgitee地址 实际效果 手机端ar图像测试
