1.4.0-95a76a7 • Published 3 years ago
top-player-threechart-test v1.4.0-95a76a7
top-player-canvas
简介
- Top-Plyaer播放器的全景展示模块，不但内置多种形态的幕布模型，还提供了细粒度的参数控制自定义幕布形态。
安装说明
设置npm源地址，使用公司内网的npm组件库
``` npm config set registry http://192.168.10.49:4873/ ```安装top-player-canvas组件
``` npm install top-player-canvas ```在vue项目中全局注册top-player-canvas组件
``` // main.js ... // 从安装好的组件库中导入 import topPlayerCanvas from 'top-player-canvas' // 使用该组件的默认样式 import 'top-player-canvas/lib/top-player-canvas.css' Vue.use(topPlayerCanvas) new Vue({ render: h => h(App), }).$mount('#app') ```
API详细说明
调用示例（文档若无明确说明都使用此例）
<template>
...
<top-player-canvas
:bgimg="backgroundImage"
:config="sceneConfig"
:events="sceneEvents"
:video="video"
@init="onSceneInited">
</top-player-canvas>
...
</template>@init
*组件创建完毕会触发该事件，并将this(组件对象)作为参数传递出去。* ``` methods: { ... onSceneInited (s) { this.scene = s } ... } ```:bgimg | type: String, default: ''
*背景填充图片路径，默认为空（黑色）。* ``` // 示例： backgroundImage: required('assets/img/logo-oblique.png') ``` - 图：logo-oblique.png / 背景效果
:video | type: Object, required: true
*[top-player-video](./-/web/detail/top-player-video) 组件对象，用于生成视频材质。* ``` methods: { ... // top-player-video组件初始化回调函数（同本组件的@init） // 获取video组件赋值至本组件video属性 onVideoInited (v) { this.video = v }, ... } ```:events | type: Object
*事件树，用于向外部暴露组件内部事件。* ``` // 数据结构 sceneEvents = { type: { func_id: e => {} } } /** * 例：鼠标单击事件 * 'click'：事件名称 * 'example_event_id'： 注册处理事件的自定义事件ID（保证唯一性即可，相同ID会相互覆盖） * this.popMsg()：methods中的一个事件处理方法 * 当组件内部发生鼠标单击事件时，会根据注册信息触发this.popMsg方法，参数"e"是原始事件参数。 */ sceneEvents = { 'click': { 'example_event_id': this.popMsg } } ``` - 组件事件 | 事件 | 描述 | | ---- | ---- | | click | 鼠标点击 | | dblclick | 鼠标左键双击 | | touchstart | 手势开始 | | touchmove | 手势移动 | | touchend | 手势结束 | | wheel | 鼠标滚轮 | | move | 鼠标移动 |:config | type: Object, default: () => { return {} }
*幕布详细配置，共分为三大模块(camera, control, curtain)* ``` sceneConfig = { camera: {}, // 摄像机配置 control: {}, // 控制器配置 curtain: {} // 幕布配置 } ``` - camera 完整配置如下： ``` camera = { fov: 70, // 摄像机视锥体垂直视野角度 near: 0.001, // 摄像机视锥体近端面 far: 100, // 摄像机视锥体远端面 position: { // 摄像机空间坐标 x: 0, y: 0, z: 0 } } ``` - control 完整配置如下： ``` control = { debug: false, // 是否调试，调试状态的控制无限制，任意变化。默认false gyro: false, // 是否开启陀螺仪。默认false enabled: true, // 是否开启控制器。默认true rotateSpeed: -0.25, // 镜头旋转速度。默认-0.25 enableZoom: false, // 是否距离允许缩放。默认false zoomSpeedMouse: 0.08, // 鼠标滚轮控制距离缩放速度 zoomSpeedTouch: 0.32, // 两根手指捏放控制距离缩放速度 distanceSpeed: 1, // 平移距离速度 maxDistance: 40, // 最大距离 minDistance: 0.001, // 最小距离 fovMax: 120, // 最大摄像机视锥体垂直视野角度 fovMin: 20, // 最小摄像机视锥体垂直视野角度 maxPolar: 180, // 垂直旋转的角度的上限 minPolar: 0, // 垂直旋转的角度的下限 maxAzimuth: null, // 水平旋转的角度的上限 minAzimuth: null // 水平旋转的角度的下限 } ``` - curtain 幕布目前支持两种轴对称模型， **球体**(sphere)  **圆柱体**(cylinder)  ``` // 球体幕布 curtain = { type: 'sphere', // 模型类型 radius: 10, // 球半径，默认为10 widthSegments: 64, // 水平分段数（沿着经线分段），最小值为3，默认值为64 heightSegments: 64, // 垂直分段数（沿着纬线分段），最小值为2，默认值为64 phiStart: 0, // 指定水平（经线）起始角度，默认值为0 phiLength: 360, // 指定水平（经线）扫描弧度的大小，默认值为 360 thetaStart: 0, // 指定垂直（纬线）起始弧度，默认值为0 thetaLength: 180 // 指定垂直（纬线）扫描弧度大小，默认值为 180 } // 圆柱体幕布 curtain = { type: 'cylinder', // 模型类型 radiusTop: 3.06, // 圆柱的顶部半径，默认值是3.06 radiusBottom: 3.06, // 圆柱的底部半径，默认值是3.06 height: 4, // 圆柱的高度，默认值是4 radialSegments: 32, // 圆柱侧面周围的分段数，默认为32 heightSegments: 1, // 圆柱侧面沿着其高度的分段数，默认值为1 openEnded: true, // 指明该圆锥的底面是开放的还是封顶的,默认值为true thetaStart: 0, // 第一个分段的起始角度，默认为0 thetaLength: 360 // 圆柱底面圆扇区的中心角,默认值是360 } ```
1.4.0-95a76a7
3 years ago