1.0.4 • Published 9 months ago

@joseelin/glass-vr v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

小禾呈眼镜试戴组件 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-typestring<image,camera,video>imagefalsefalse资源类型
sourcestring-truefalse资源地址(类型为camera时可空)
glassstring-truetrue眼镜地址(支持png,gltf,glb类型)

事件

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

问题

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

9 months ago

1.0.3

9 months ago

1.0.2

9 months ago

1.0.1

9 months ago

1.0.0

9 months ago