dosterz97

import { AUPredictor } from '@quarkworks-inc/avatar-webkit'
export class AvatarView extends React.Component {
  ... 
  predictor = new AUPredictor({
    apiToken: '...', // Your auth token
    shouldMirrorOutput: true
  })

dosterz97

async componentDidMount() {
  ...
  this.predictor.onPredict = this.onPredict.bind(this)
}
onPredict = (results) => {
  const head = this.avatar.children.find((child) => child.name === "Wolf3D_Avatar")
  Object.entries(results.actionUnits).forEach(function([key, value]) {
    const index = head.morphTargetDictionary[key] head.morphTargetInfluences[index] = value
  })
}

dosterz97

async componentDidUpdate(oldProps) {
  ...        
  if(this.props?.predicting !== oldProps?.predicting) {
    if(this.props?.predicting && this.predictor.state === 'stopped') {
       let stream = await navigator.mediaDevices.getUserMedia({
         audio: false,
         video: {
           width: { ideal: 640 },
           height: { ideal: 360 },
           facingMode: 'user'

dosterz97

function App() {
  ...
  const [predicting, setPredicting] = useState(false)
  ...
  return (
    ...
    {avatarUrl && 
       <input
         className="toggleButton"
         onClick={() => setPredicting(!predicting)} 

dosterz97

onPredict = (results) => {
  ...
  const {
    pitch,
    yaw,
    roll,
  } = results.rotation
  this.avatar?.rotation.set(-pitch, yaw, roll)
  const {
    x,

dosterz97

import { AvatarView } from './AvatarView';return (
...
{avatarUrl && <AvatarView avatarUrl={avatarUrl} showIFrame={showIFrame}/>}
...
)

dosterz97

async componentDidUpdate(oldProps) {
  if(this.props?.avatarUrl && this.props?.avatarUrl !==  oldProps?.avatarUrl)  {
    this.loadModel()
  }  
  this.renderer.domElement.style.cssText = `display: ${!this.props.showIFrame ? 'block': 'none'}`
}

dosterz97

async componentDidMount() {
...
  this.loadModel()
...
}

dosterz97

loadGLTF(url) {
  return new Promise((resolve) => {
    const loader = new GLTFLoader()
    loader.load(url, (gltf) => resolve(gltf))
  })
}

dosterz97

async loadModel() {
  const gltf = await this.loadGLTF(this.props.avatarUrl)
  this.avatar = gltf.scene.children[0]
  this.avatar.position.set(0, -4, 0)
  this.avatar.scale.setScalar(7.5)  this.scene.add(this.avatar)
}