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

前端不会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模式。
前端不会AR?5分钟带你用modelviewer搭建自己的AR老婆~

安装webXR插件

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

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

模型下载

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

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

这个老婆链接分享给大家~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?5分钟带你用modelviewer搭建自己的AR老婆~

移动端展示效果

点击左上角ar按钮进入ar

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

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

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

卡哇伊内~

参考

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

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

总结

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

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

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

(0)
上一篇 2024年4月7日 下午4:28
下一篇 2024年4月7日 下午4:39

相关推荐

发表回复

登录后才能评论