jola_player v1.0.0

jola_player

3D Player made by Jola

Install

npm install --save jola_player

Usage

import React from 'react'
import { Player } from 'jola_player'

interface Props {
  playerWidth?: string
  playerHeight?: string
}

export const PlayerContainer = ({
  playerHeight = '100%',
  playerWidth = '100%'
}: Props) => {
  const canvasRef = React.useRef<HTMLDivElement>(null)
  React.useEffect(() => {
    let player = new Player({ canvas: canvasRef })
    player.Init()
  })
  return (
    <div
      ref={canvasRef}
      id='canvas'
      style={{
        height: playerHeight,
        width: playerWidth,
        display: 'block !important'
      }}
    />
  )
}

Creating a custom player

import { Player } from 'jola_player'

export class PeraPlayer extends Player {
  LoadModel = () => {
    return new Promise((resolve) => {
      this.loader.load(this.modelPath, (object) => {
        this.model = object.scene
        this.model.name = 'model'
        this.scene.add(this.model)
        resolve()
      })
    })
  }

  Init = () => {
    this.modelPath =
      'http://a3d.joladev2.com/prima-lighting/models/719B%20Pyramid%20Blue%20Glass%20Shade.glb'
    super.Init()
    // this.LoadModel()
  }
}

License

MIT © Radosav