@tencent/mesh-player-three

Mesh Player is a volumetric video player developed by Tencent Multimedia Lab, based on WebAssembly and WebGL. Mesh Player Three integrates Three.js as the rendering layer, simplifying the configuration and initialization of 3D scenes, making it easy to quickly develop and view volumetric video rendering effects.

Features

1. High-definition volumetric video rendering (up to 4K)
2. Playback controls, including play, pause, stop, and seek functionality
3. Audio playback support
4. Support for secondary development based on Three.js

Advantages

1. Clear picture quality. The video quality can reach up to 4K
2. More convenient 3D development. Encapsulates Three.js as the rendering layer
3. Many customizable parameters
4. Supports multi-threaded mode

Launch Demo

1. npm run install
2. npm run dev

Mesh Player Installation

1. Unzip the package
2. Install the local npm package via npm install ./package
3. Copy the files in package/lib to the server's resource directory (for example, in React and Next.js, copy the files in lib directly to the /public/mesh-player directory), and make sure they can be accessed via network requests during initialization
4. Enable the following request headers on the server:
   • Cross-Origin-Embedder-Policy: require-corp
   • Cross-Origin-Opener-Policy: same-origin

Usage

Basic Usage

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

const secretId = 'Your secretId'
const secretKey = 'Your secretKey'

const stage = document.getElementById('stage') // canvas append node

const app = new MeshPlayerThree({
  stage,
  secretId,
  secretKey,
  libConfigs: {
    directoryURL: '/libs/media-player/', // Core module lib address, can be stored locally or remotely (e.g., Tencent Cloud COS)
  },
})

await app.start()

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

app.play()