Ready Player Me, error using RADiCAL Core fbx file: THREE.PropertyBinding: Trying to update property for track: face_blendshapes.morphTargetInfluences but it wasn't found

Questions
1

When implementing Ready Player Me into a webpage, you initially render essentially a lifeless body in Three.js, which is something very few people want. It’s actually very difficult to drop in an avatar on a basic webpage that looks “alive.” Which is unfortunate considering implementing the Ready Player Me Web Interface is so easy.

Let me start by saying that 3D Animation is not my forte. I’ve had to learn a lot to get this far. I have been tasked with creating a simple html webpage that renders a glb file from Ready Player Me and uses fbx files compatible with the Ready Player Me glb file, to easily add custom animations to readyplayerme characters. I tried Mixamo at first but have since moved to using Radical to create fbx files from video clips. Here is a codepen of my current progress. I understand that there are issues beyond the one error that’s in the title, namely that I am using multiple instances of three.js. However, I am not seeing where that is happening and I even refactored some code that I thought would resolve the issue, but to no avail. As far as the fbx file is concerned, it is rendering without the error if I use mixamo fbx files hosted locally. But as soon as I use a CDN hosted file or something that is longer than about 5 seconds the error comes back. The full error that persists is:

"THREE.PropertyBinding: Trying to update property for track: face_blendshapes.morphTargetInfluences but it wasn't found." // [object Object] 
{
  "metadata": {
    "version": 4.5,
    "type": "Object",
    "generator": "Object3D.toJSON"
  },
  "geometries": [
    {
      "uuid": "0CB3FE79-E15E-4349-8042-4F5020BCF009",
      "type": "BufferGeometry",
      "data": {
        "attributes": {
          "position": {
            "isInterleavedBufferAttribute": true,
            "itemSize": 3,
            "data": "FBA6D90F-DC12-4875-8987-0F9E20B9957B",
            "offset": 0,
            "normalized": false
          },
          "uv": {
            "isInterleavedBufferAttribute": true,
            "itemSize": 2,
            "data": "FBA6D90F-DC12-4875-8987-0F9E20B9957B",
            "offset": 3,
            "normalized": false
          },
          "normal": {
            "isInterleavedBufferAttribute": true,
            "itemSize": 3,
            "data": "FBA6D90F-DC12-4875-8987-0F9E20B9957B",
            "offset": 5,
            "normalized": false
          },
          "skinIndex": {
            "isInterleavedBufferAttribute": true,
            "itemSize": 4,
            "data": "C1E2A884-5218-4BD6-9B05-44DCD47F79E0",
            "offset": 32,
            "normalized": false
          },
          "skinWeight": {
            "isInterleavedBufferAttribute": true,
            "itemSize": 4,
            "data": "FBA6D90F-DC12-4875-8987-0F9E20B9957B",
            "offset": 9,
            "normalized": false
          }
        },
        "index": {
          "type": "Uint16Array",
          "array": [
            3,
            1,
            0,
            0,
            1,
            2,
            0,
            2,
            4,
            0,
            6,
            3,
            0,
            4,
            5,
            0,
            5,
            6,
            7,
            3,
            6,
            7,
            6,
            8,
            8,
            6,
            10,
            5,
            9,
            6,
            6,
            9,
            10, ...

Even though I made sure to download the glb file that has support for ARKit and Oculus.

So to recap, my questions are:

  • What is the correct syntax to use to import Three.js a single time?
  • What is a standard way to render a Ready Player Me file with a fbx animation that does not have this error?
2

Instead of importing like this:

            import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js';
            import { FBXLoader } from 'https://cdn.skypack.dev/three@0.132.0/examples/jsm/loaders/FBXLoader.js';
            import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.132.0/examples/jsm/loaders/GLTFLoader.js';

Use an importmap in your html:
(put this script tag before any other scripts in your html:)

    <script type="importmap">
    {
        "imports": {
            "three": "https://threejs.org/build/three.module.js",
            "three/addons/": "https://threejs.org/examples/jsm/"
        }
    }
    </script>

then in your code, import like this:

import *as THREE from "three"
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";

You can replace the URL in the importmap to route to whichever source you want to pull from… and this is a global override for the page, so hopefully any other libraries importing “three” will get the same version.