1.0.4 • Published 9 months ago
@joseelin/glass-vr v1.0.4
小禾呈眼镜试戴组件 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 | 瞳距变化事件 |
问题
- 组件仅在 mount 阶段处理属性参数,动态修改属性不会生效,详情在属性表格中有提示
- 部分浏览器环境,如手机端由于安全机制限制,视频和摄像头需要用户点击一引屏幕方可生效