简介： 前端工作第三年了，最近都不知道有什么好的学习方向，想起来自己之前一直很想学WebGL方向，然后就花时间学习了一下，这篇主要是讲AR方面的知识，实现框架是vue3+vite+modelviewer，大家感兴趣的可以试一试，此外我的另外一篇文章threejs搭建模型感兴趣的同学可以看看！

前提

安装modelviewer

在 vite 项目中安装modelviewer库

npm install @google/model-viewer or yarn add @google/model-viewer

在ar的vue页面引入

import '@google/model-viewer';

安装https环境

必须要在https环境下才可以打开浏览器的摄像头并且支持ar使用!

在 vite 项目中安装 @vitejs/plugin-basic-ssl 支持 https 协议

npm run @vitejs/plugin-basic-sslor yarn add @vitejs/plugin-basic-ssl -D

在vite.config.ts中引入vite 中使用插件支持 https 协议

import basicSsl from '@vitejs/plugin-basic-ssl

webxr环境

modelview的AR只支持在以下浏览器里，我建议在chrome上调试开发。
虽然这里说不支持safari，但是支持safari的quick-look模式。

安装webXR插件

在谷歌商店下载这个插件，就可以在浏览器调试ar下的效果。

模型下载

没有模型怎么办？可以去sketchfab.com/ 这里下载你想要的模型。

这个老婆链接分享给大家~sketchfab.com/3d-models/m…

代码

<template>
  <div class="container" ref="container">
    <model-viewer 
      id="model-viewer"
      src="xxx" // 引入你的模型路径
      tone-mapping="commerce" 
      antialias="true" // 抗锯齿
      shadow-intensity="1"
      ar // ar模式
      camera-controls
      auto-rotate 
      style="width: 100%; height: 70vh;"
      scale="1 1 1">
    </model-viewer>
    <div id="error" class="hide">AR is not supported on this device</div>
  </div>
</template>
<script setup lang="ts">
import '@google/model-viewer';
const container = ref(null)

// 监听组件销毁事件
onBeforeUnmount(() => {
  container.value.remove()
});

const modelViewer = document.querySelector('model-viewer');

// 监听ar状态
modelViewer.addEventListener('ar-status', (event) => {
if(event.detail.status === 'failed'){
  const error = document.querySelector("#error");
  error.classList.remove('hide');
  error.addEventListener('transitionend',(event) => {
    error.classList.add('hide');
  });
}
});
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0px;
}
// 修改ar入口按钮样式
model-viewer::part(default-ar-button){
  top: 15px;
  left: 25px;
  right: 0;
  bottom: 0;
}
#error {
    background-color: #ffffffdd;
    border-radius: 16px;
    padding: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.3s;
  }
  #error.hide {
    opacity: 0;
    visibility: hidden;
    transition: visibility 2s, opacity 1s 1s;
  }
</style>

效果展示

pc端展示效果

移动端展示效果

点击左上角ar按钮进入ar

卡哇伊内~

参考

modelviewer官方文档：modelviewer.dev/examples/au…

模型下载地址sketchfab: sketchfab.com/

总结

此AR功能只支持IOS12+以上的safari浏览器打开，安卓设备的话只支持刚才提到的那些浏览器打开，对安卓设备要求会比较高。

以上就是本文的全部内容，希望这篇文章对你有所帮助，谢谢各位大佬阅读，可以的话挥挥你们的小手点点赞和收藏 🙏，如果发现有什么错误或者更好的解决方案及建议，欢迎随时联系。

原文链接：https://juejin.cn/post/7354309874670223398 作者：LLLliam