Initiating threejs

I used Threejs to display all the 3D content and manipulate the meshes. Most of the work is done in skeleton.js so let's dive right into the code:

The init() function is the function that is responsible of creating all the three.js environment. It builds the camera the renderer the orbit controls, the lights and the floor. It also initiates a THREE.group() which will contain all the different meshes on screen (ie it helps me to manipulate the group of meshes instead of each mesh one by one). All the settings relative to the visual representation of the meshes can be found in this init() function.

---

The variable meshStaticInfo is a variable which defines the important information on each mesh type like the parent and child attachements and the body part like so:

  Torso: {
    bodyPart: "torso",
    parentAttachment: undefined,
    childAttachment: undefined
  },
  Head: {
    bodyPart: "head",
    parentAttachment: "Torso_Neck",
    childAttachment: "Head_Neck"
  },
  ArmR: {
    bodyPart: "arm",
    parentAttachment: "Torso_UpperArm_R",
    childAttachment: "ArmR_UpperArm_R"
  },
  ArmL: {
    bodyPart: "arm",
    parentAttachment: "Torso_UpperArm_L",
    childAttachment: "ArmL_UpperArm_L"
  },
  HandR: {
    bodyPart: "hand",
    parentAttachment: "ArmR_Hand_R",
    childAttachment: "HandR_Hand_R"
  },
  HandL: {
    bodyPart: "hand",
    parentAttachment: "ArmL_Hand_L",
    childAttachment: "HandL_Hand_L"
  },
  LegR: {
    bodyPart: "leg",
    parentAttachment: "Torso_UpperLeg_R",
    childAttachment: "LegR_UpperLeg_R"
  },
  LegL: {
    bodyPart: "leg",
    parentAttachment: "Torso_UpperLeg_L",
    childAttachment: "LegL_UpperLeg_L"
  },
  FootR: {
    bodyPart: "foot",
    parentAttachment: "LegR_Foot_R",
    childAttachment: "FootR_Foot_R"
  },
  FootL: {
    bodyPart: "foot",
    parentAttachment: "LegL_Foot_L",
    childAttachment: "FootL_Foot_L"
  }

It's important at this point to understand the difference between the mesh type and the body part. The body part is the generic body part without the left/right destinction. The mesh type takes into account if it's a left or right mesh. In a nutshell:

• bodyPart : {arm, head, hand, torso, leg, foot}
• MeshType : {ArmR, ArmL, Head, HandR, HandL, LegR, LegL, FootR, FootL, Torso}

The variable childrenList is the list of children for each each mesh (ex: Torso: [ArmR, ArmL, Head, LegR, LegL]).

The variable loadedMeshes tells the app what meshes are loaded for each mesh type.