小禾呈眼镜试戴组件 vue3

安装

npm install @joseelin/glass-vr

使用

// file main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引用样式
import '@joseelin/glass-vr/style.css'
createApp(App).mount('#app')

// file HelloWorld.vue
<template>
  <div style="width:100vw;height: 100vh;">
    <GlassesVR source-type="image" :source="`${PUBLIC_PATH}/3d/image.jpeg`" :glass="`${PUBLIC_PATH}/3d/black-glasses/scene.gltf`"
      ></GlassesVR>
  </div>
</template>

<script lang="ts" setup>
import { PUBLIC_PATH } from './public_path';
import { GlassesVR } from '@joseelin/glass-vr';
</script>

属性

|名称|类型|默认|必填|监测变动|描述| | --| --| --|--|--|--| |source-type|string<image,camera,video>|image|false|false|资源类型| |source|string|-|true|false|资源地址(类型为camera时可空)| |glass|string|-|true|true||眼镜地址(支持png,gltf,glb类型)|

事件

|名称|参数|描述| |--|--|--| |pdchange|(value:number)=>void|瞳距变化事件|

问题

1. 组件仅在 mount 阶段处理属性参数,动态修改属性不会生效,详情在属性表格中有提示
2. 部分浏览器环境,如手机端由于安全机制限制,视频和摄像头需要用户点击一引屏幕方可生效