Tencent Media Lab
/

@tencent/mesh-player-three

Mesh Player 是由腾讯多媒体实验室自主研发，基于 WebAssembly 和 WebGL 的体积视频（Volumetric Video）播放器。Mesh Player Three 加入了 Three.js 作为渲染层，简化了 3D 场景的配置和初始化，方便快速开发和观看体积视频渲染效果。

功能

  1. 体积视频高清渲染（最高 4K）
  2. 播放控制，包括播放、暂停、停止、进度跳转等功能
  3. 支持音频播放
  4. 支持基于 Three.js 的二次开发

优势

  1. 画面清晰。画质最高可达 4k
  2. 更便捷的 3D 开发。 封装了 Three.js 作为渲染层
  3. 可自定义参数多
  4. 支持多线程模式

启动 demo

  1. npm run install
  2. npm run dev

Mesh Player 安装

  1. 将压缩包解压
  2. 通过 npm install ./package 安装本地 npm 包
  3. 将 package/lib 里的文件拷贝到服务器的资源目录上 (比如在 React 和 Next.js 里，把 lib 里的文件原封不动拷贝到 /public/mesh-player 目录下)，在初始化的时候需要能够通过网络请求访问到
  4. 为服务器开启两个请求头配置：
    • Cross-Origin-Embedder-Policy: require-corp
    • Cross-Origin-Opener-Policy: same-origin

使用

基础使用方法

import { MeshPlayerThree } from '../libs/mesh-player-three'

const secretId = '您申请的 secretId'
const secretKey = '您申请的 secretKey'

const stage = document.getElementById('stage') // canvas 挂载节点

const app = new MeshPlayerThree({
  stage,
  secretId,
  secretKey,
  libConfigs: {
    directoryURL: '/libs/media-player/', // 核心模块 lib 地址，可以存储在本地或者远端（例如腾讯云 cos）
  },
})

await app.start()

app.setSources([
  {
    id: '1',
    name: '任意名称',
    url: 'https://example.com/path/xxxx.mp4',
    scale: 0.1,
    position: [0, 0, 0],
  },
])

app.play()