前端不会AR?5分钟带你用modelviewer搭建自己的AR老婆~

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

效果展示

pc端展示效果

移动端展示效果

点击左上角ar按钮进入ar

卡哇伊内~

参考

modelviewer官方文档:modelviewer.dev/examples/au...

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

总结

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

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

相关推荐
小桥风满袖16 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心16 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~19 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒26 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询42 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang44 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js