用AR来做一个炫酷的生日祝福吧！

话不多说，我们直接上演示demo

我们这里的实现分为代码部分，还有建模部分（我不是专业的，我只会最简单的），建模部分会放在如何使用 Blendar 制作一个简单的文字模型？里去讲

代码实现

我们这里使用的是 vite+vue3 来实现的（使用的是 pnpm，用 npm 当然也可以）

1.创建项目

pnpm create vite ar-demo

2.引入mindAR

参考 mindAR 的官网引入mindAR

mindAR 提供了人脸识别和图像识别，我们这里使用的是图像识别

pnpm i mind-ar --save 
pnpm i aframe --save

我们这里使用的是图片识别（Image Tracking）

// main.ts 中 
import 'aframe'; 
import 'mind-ar/dist/mindar-image-aframe.prod.js';

App.vue 的 template，参照 mindAR 官网书写

<div class="wrapper">
    <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" >
        <a-assets> 
            <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/assets/card-example/card.png" /> 
            <a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/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>

我们这里需要替换的其实就是三个文件，.mind文件，.png 文件，.gltf 文件

.png 是任意一张你想要识别的图，可以是你的头像，也可以是别人的头像。如何获得 .mind 文件呢？在这里上传你的图片，在下载.mind文件即可。.gltf 文件就是建模的文件，会在如何使用 Blendar 制作一个简单的文字模型？中讲到如何获取

3.启动项目

pnpm run dev

这里会有个样式问题，添加样式解决

.wrapper { 
    height: 100vh; 
 }

}

你会发现控制台有很多的黄色警告，这个可以通过在 vite.config.ts 中添加配置来解决

plugins: [ 
    vue({ 
        template: { 
            compilerOptions: { isCustomElement: (tag) => {
            return /a-/.test(tag); 
         },   
      }, 
  }, 
}), 
],

打开来应该是这样的

RPReplay_Final171829 -original-original (1).gif

这时候基本只要替换正确就大功告成了

遇到的问题

HTTPS问题

这里最好使用 https 开发，因为摄像头的调用需要 https

vite 开启 https 的方法也很简单，只需要在 vite.config.ts 中使用插件即可

pnpm i vite-plugin-mkcert

插件使用：

plugins: [ 
    mkcert(),
    vue({ 
        template: { 
            compilerOptions: { isCustomElement: (tag) => { 
                return /a-/.test(tag); 
                }, 
          }, 
       }, 
    }), 
  ], 
});

跨域问题

项目用了 https，这就要求你的资源都是使用 https 的形式给予的。如何搭建自己的图床可以参考我的另一篇文章搭建属于自己的图床，七牛云也支持搭建https

图形过小

如果替换过后，图形比较小，可以修改缩放的参数，也就是scale参数，或者如果对模型比较熟悉的也可以放大模型

<a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.5 0.5 0.5" src="#avatarModel" />

总结

实现一个简单的 demo 其实并不难，但是要做好还是比较难的

使用AR来个炫酷的生日祝福吧！