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 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. 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. 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?