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

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)
}

JacobMuchow

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

async componentDidMount() {
  ...
  
  this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - navigationBarHeight), 0.1, 1000)
  this.camera.position.set(0, 0, 3)
  
  this.controls = new OrbitControls(this.camera, this.renderer.domElement)
  

JacobMuchow

import React from 'react';
import * as THREE from "three"

const navigationBarHeight = 100

...

async componentDidMount() {
  const mainView = this.mainViewRef.current
  this.renderer = new THREE.WebGLRenderer({ antialias: true })