JacobMuchow

onPredict = (results) => {
  ...
  const headBone = object3DChildNamed(this.avatar, 'Head', { recursive: true }) as Bone

  const {
    pitch = 0,
    yaw = 0,
    roll = 0,
  } = results.rotation
  headBone.rotation.set(-pitch, yaw, roll)

JacobMuchow

const object3DChildNamed = (object, name, { recursive = false } = {})
  if (!recursive) {
    return object.children.find(child => child.name === name)
  }

  for (const child of object.children) {
    if (child.name === name) return child
    if (child.children.length > 0) {
      const found = object3DChildNamed(child, name, { recursive })
      if (found) return found

JacobMuchow

onPredict = (results) => {
  const avatarMesh = object3DChildNamed(this.avatar, 'Wolf3D_Avatar')

  Object.entries(results.blendShapes).forEach(function([key, value]) {
    const arKitKey = BlendShapeKeys.toARKitConvention(key)
    const index = avatarMesh.morphTargetDictionary[arKitKey]
    if (index) avatarMesh.morphTargetInfluences[index] = value
  })
}

JacobMuchow

async componentDidMount() {
  ...
  this.predictor.onPredict = this.onPredict.bind(this)
}

onPredict = (results) => {
  ...
}

JacobMuchow

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

JacobMuchow

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

JacobMuchow

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

loadBackground(url, renderer) {
  return new Promise((resolve) => {
    const loader = new RGBELoader()
    const generator = new THREE.PMREMGenerator(renderer)
      loader.load(url, (texture) => {
        const envMap = generator.fromEquirectangular(texture).texture
        generator.dispose()
          texture.dispose()

JacobMuchow

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

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

JacobMuchow

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

JacobMuchow

async componentDidMount() {
  ...
  this.renderer.setAnimationLoop(this.renderScene.bind(this))
}

renderScene() {
  this.renderer.render(this.scene, this.camera)
}