SkeletonHelper2.ts

import * as MeshLine from './THREE.MeshLine.js'

export class SkeletonHelper2 extends THREE.Group {

  private root: THREE.Object3D;
  private bones: THREE.Bone[];
  private meshLines: any[];
  private meshes: any[];
  private fakeGeometry: any[];

  private getBoneList(object: any) {

		let boneList = [];

		if (object instanceof THREE.Bone) {
			boneList.push(object);
		}

		for (let i = 0; i < object.children.length; i++) {
			boneList.push.apply(boneList, this.getBoneList(object.children[i]));
		}

		return boneList;
	};

  constructor(object, resolution: THREE.Vector2) {

    super();

    this.meshLines = [];
    this.meshes = [];
    this.fakeGeometry = [];

    this.bones = this.getBoneList(object);

    const colors: number[] = [
      0,
      0x009999, // spine
      0x000099, // neck
      0x990000, // left shoulder
      0x996600, // left upper arm
      0x999900, // left lower arm
      0x669900, // left hand
      0x993200, // right shoulder
      0x669900, // right upper arm
      0x329900, // right lower arm
      0x009932, // right hand
      0x009900, // left upper leg
      0x009932, // left lower leg
      0x006699, // right upper leg
      0x003299  // right lower leg
    ];

    for (let i = 0; i < this.bones.length; i++) {
			let bone = this.bones[i];
			if (bone.parent instanceof THREE.Bone) {
		    let geometry = new THREE.Geometry();
        let ml = new MeshLine.MeshLine();
				geometry.vertices.push(new THREE.Vector3());
        geometry.vertices.push(new THREE.Vector3());
        ml.setGeometry(geometry);
        this.fakeGeometry.push(geometry);

        this.meshLines.push(ml);

        let material: any = new MeshLine.MeshLineMaterial({
          color: new THREE.Color(colors[i]),
          lineWidth: 0.3,
          opacity: 0.8,
          transparent: true,
          resolution: resolution,
          attributes: {
            previous: ml.previous,
            next: ml.next,
            side: ml.side,
            width: ml.width,
            counters: ml.counters
          }
        });

        material.depthTest = false;
        let mesh = new THREE.Mesh(ml.geometry, material);

        this.meshes.push(mesh);
        this.add(mesh);
			} else {
        this.meshLines.push(null);
        this.meshes.push(null);
        this.fakeGeometry.push(null);
      }
		}

		this.root = object;
		this.matrix = object.matrixWorld;
		this.matrixAutoUpdate = false;

		this.update();
  }

	public update = () => {

		let matrixWorldInv = new THREE.Matrix4().getInverse(this.root.matrixWorld);
		let boneMatrix = new THREE.Matrix4();

		for (let i=0; i < this.bones.length; i++) {
      let bone = this.bones[i];

			if (bone.parent instanceof THREE.Bone) {

        let ml = this.meshLines[i];
        let mesh = this.meshes[i];
        let geom = this.fakeGeometry[i];
        boneMatrix.multiplyMatrices(matrixWorldInv, bone.matrixWorld);
        geom.vertices[0].setFromMatrixPosition(boneMatrix);

				boneMatrix.multiplyMatrices(matrixWorldInv, bone.parent.matrixWorld);
        geom.vertices[1].setFromMatrixPosition(boneMatrix);
        ml.setGeometry(geom);
        mesh.geometry = ml.geometry;
      	mesh.geometry.verticesNeedUpdate = true;
		    mesh.geometry.computeBoundingSphere();
      }
		}
  };
}