简介： 前端工作第三年了，最近都不知道有什么好的学习方向，想起来自己之前一直很想学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...

代码

xml 复制代码

<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>