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