bytev-charts-beta/lib/plugin/three.js/examples/js/misc/MD2CharacterComplex.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.map.js";
console.warn("THREE.MD2CharacterComplex: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.");

THREE.MD2CharacterComplex = function () {
  var scope = this;
  this.scale = 1; // animation parameters

  this.animationFPS = 6;
  this.transitionFrames = 15; // movement model parameters

  this.maxSpeed = 275;
  this.maxReverseSpeed = -275;
  this.frontAcceleration = 600;
  this.backAcceleration = 600;
  this.frontDecceleration = 600;
  this.angularSpeed = 2.5; // rig

  this.root = new THREE.Object3D();
  this.meshBody = null;
  this.meshWeapon = null;
  this.controls = null; // skins

  this.skinsBody = [];
  this.skinsWeapon = [];
  this.weapons = [];
  this.currentSkin = undefined; //

  this.onLoadComplete = function () {}; // internals


  this.meshes = [];
  this.animations = {};
  this.loadCounter = 0; // internal movement control variables

  this.speed = 0;
  this.bodyOrientation = 0;
  this.walkSpeed = this.maxSpeed;
  this.crouchSpeed = this.maxSpeed * 0.5; // internal animation parameters

  this.activeAnimation = null;
  this.oldAnimation = null; // API

  this.enableShadows = function (enable) {
    for (var i = 0; i < this.meshes.length; i++) {
      this.meshes[i].castShadow = enable;
      this.meshes[i].receiveShadow = enable;
    }
  };

  this.setVisible = function (enable) {
    for (var i = 0; i < this.meshes.length; i++) {
      this.meshes[i].visible = enable;
      this.meshes[i].visible = enable;
    }
  };

  this.shareParts = function (original) {
    this.animations = original.animations;
    this.walkSpeed = original.walkSpeed;
    this.crouchSpeed = original.crouchSpeed;
    this.skinsBody = original.skinsBody;
    this.skinsWeapon = original.skinsWeapon; // BODY

    var mesh = createPart(original.meshBody.geometry, this.skinsBody[0]);
    mesh.scale.set(this.scale, this.scale, this.scale);
    this.root.position.y = original.root.position.y;
    this.root.add(mesh);
    this.meshBody = mesh;
    this.meshes.push(mesh); // WEAPONS

    for (var i = 0; i < original.weapons.length; i++) {
      var meshWeapon = createPart(original.weapons[i].geometry, this.skinsWeapon[i]);
      meshWeapon.scale.set(this.scale, this.scale, this.scale);
      meshWeapon.visible = false;
      meshWeapon.name = original.weapons[i].name;
      this.root.add(meshWeapon);
      this.weapons[i] = meshWeapon;
      this.meshWeapon = meshWeapon;
      this.meshes.push(meshWeapon);
    }
  };

  this.loadParts = function (config) {
    this.animations = config.animations;
    this.walkSpeed = config.walkSpeed;
    this.crouchSpeed = config.crouchSpeed;
    this.loadCounter = config.weapons.length * 2 + config.skins.length + 1;
    var weaponsTextures = [];

    for (var i = 0; i < config.weapons.length; i++) {
      weaponsTextures[i] = config.weapons[i][1];
    } // SKINS


    this.skinsBody = loadTextures(config.baseUrl + "skins/", config.skins);
    this.skinsWeapon = loadTextures(config.baseUrl + "skins/", weaponsTextures); // BODY

    var loader = new THREE.MD2Loader();
    loader.load(config.baseUrl + config.body, function (geo) {
      var boundingBox = new THREE.Box3();
      boundingBox.setFromBufferAttribute(geo.attributes.position);
      scope.root.position.y = -scope.scale * boundingBox.min.y;
      var mesh = createPart(geo, scope.skinsBody[0]);
      mesh.scale.set(scope.scale, scope.scale, scope.scale);
      scope.root.add(mesh);
      scope.meshBody = mesh;
      scope.meshes.push(mesh);
      checkLoadingComplete();
    }); // WEAPONS

    var generateCallback = function generateCallback(index, name) {
      return function (geo) {
        var mesh = createPart(geo, scope.skinsWeapon[index]);
        mesh.scale.set(scope.scale, scope.scale, scope.scale);
        mesh.visible = false;
        mesh.name = name;
        scope.root.add(mesh);
        scope.weapons[index] = mesh;
        scope.meshWeapon = mesh;
        scope.meshes.push(mesh);
        checkLoadingComplete();
      };
    };

    for (var i = 0; i < config.weapons.length; i++) {
      loader.load(config.baseUrl + config.weapons[i][0], generateCallback(i, config.weapons[i][0]));
    }
  };

  this.setPlaybackRate = function (rate) {
    if (this.meshBody) this.meshBody.duration = this.meshBody.baseDuration / rate;
    if (this.meshWeapon) this.meshWeapon.duration = this.meshWeapon.baseDuration / rate;
  };

  this.setWireframe = function (wireframeEnabled) {
    if (wireframeEnabled) {
      if (this.meshBody) this.meshBody.material = this.meshBody.materialWireframe;
      if (this.meshWeapon) this.meshWeapon.material = this.meshWeapon.materialWireframe;
    } else {
      if (this.meshBody) this.meshBody.material = this.meshBody.materialTexture;
      if (this.meshWeapon) this.meshWeapon.material = this.meshWeapon.materialTexture;
    }
  };

  this.setSkin = function (index) {
    if (this.meshBody && this.meshBody.material.wireframe === false) {
      this.meshBody.material.map = this.skinsBody[index];
      this.currentSkin = index;
    }
  };

  this.setWeapon = function (index) {
    for (var i = 0; i < this.weapons.length; i++) {
      this.weapons[i].visible = false;
    }

    var activeWeapon = this.weapons[index];

    if (activeWeapon) {
      activeWeapon.visible = true;
      this.meshWeapon = activeWeapon;

      if (this.activeAnimation) {
        activeWeapon.playAnimation(this.activeAnimation);
        this.meshWeapon.setAnimationTime(this.activeAnimation, this.meshBody.getAnimationTime(this.activeAnimation));
      }
    }
  };

  this.setAnimation = function (animationName) {
    if (animationName === this.activeAnimation || !animationName) return;

    if (this.meshBody) {
      this.meshBody.setAnimationWeight(animationName, 0);
      this.meshBody.playAnimation(animationName);
      this.oldAnimation = this.activeAnimation;
      this.activeAnimation = animationName;
      this.blendCounter = this.transitionFrames;
    }

    if (this.meshWeapon) {
      this.meshWeapon.setAnimationWeight(animationName, 0);
      this.meshWeapon.playAnimation(animationName);
    }
  };

  this.update = function (delta) {
    if (this.controls) this.updateMovementModel(delta);

    if (this.animations) {
      this.updateBehaviors();
      this.updateAnimations(delta);
    }
  };

  this.updateAnimations = function (delta) {
    var mix = 1;

    if (this.blendCounter > 0) {
      mix = (this.transitionFrames - this.blendCounter) / this.transitionFrames;
      this.blendCounter -= 1;
    }

    if (this.meshBody) {
      this.meshBody.update(delta);
      this.meshBody.setAnimationWeight(this.activeAnimation, mix);
      this.meshBody.setAnimationWeight(this.oldAnimation, 1 - mix);
    }

    if (this.meshWeapon) {
      this.meshWeapon.update(delta);
      this.meshWeapon.setAnimationWeight(this.activeAnimation, mix);
      this.meshWeapon.setAnimationWeight(this.oldAnimation, 1 - mix);
    }
  };

  this.updateBehaviors = function () {
    var controls = this.controls;
    var animations = this.animations;
    var moveAnimation, idleAnimation; // crouch vs stand

    if (controls.crouch) {
      moveAnimation = animations["crouchMove"];
      idleAnimation = animations["crouchIdle"];
    } else {
      moveAnimation = animations["move"];
      idleAnimation = animations["idle"];
    } // actions


    if (controls.jump) {
      moveAnimation = animations["jump"];
      idleAnimation = animations["jump"];
    }

    if (controls.attack) {
      if (controls.crouch) {
        moveAnimation = animations["crouchAttack"];
        idleAnimation = animations["crouchAttack"];
      } else {
        moveAnimation = animations["attack"];
        idleAnimation = animations["attack"];
      }
    } // set animations


    if (controls.moveForward || controls.moveBackward || controls.moveLeft || controls.moveRight) {
      if (this.activeAnimation !== moveAnimation) {
        this.setAnimation(moveAnimation);
      }
    }

    if (Math.abs(this.speed) < 0.2 * this.maxSpeed && !(controls.moveLeft || controls.moveRight || controls.moveForward || controls.moveBackward)) {
      if (this.activeAnimation !== idleAnimation) {
        this.setAnimation(idleAnimation);
      }
    } // set animation direction


    if (controls.moveForward) {
      if (this.meshBody) {
        this.meshBody.setAnimationDirectionForward(this.activeAnimation);
        this.meshBody.setAnimationDirectionForward(this.oldAnimation);
      }

      if (this.meshWeapon) {
        this.meshWeapon.setAnimationDirectionForward(this.activeAnimation);
        this.meshWeapon.setAnimationDirectionForward(this.oldAnimation);
      }
    }

    if (controls.moveBackward) {
      if (this.meshBody) {
        this.meshBody.setAnimationDirectionBackward(this.activeAnimation);
        this.meshBody.setAnimationDirectionBackward(this.oldAnimation);
      }

      if (this.meshWeapon) {
        this.meshWeapon.setAnimationDirectionBackward(this.activeAnimation);
        this.meshWeapon.setAnimationDirectionBackward(this.oldAnimation);
      }
    }
  };

  this.updateMovementModel = function (delta) {
    var controls = this.controls; // speed based on controls

    if (controls.crouch) this.maxSpeed = this.crouchSpeed;else this.maxSpeed = this.walkSpeed;
    this.maxReverseSpeed = -this.maxSpeed;
    if (controls.moveForward) this.speed = THREE.MathUtils.clamp(this.speed + delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed);
    if (controls.moveBackward) this.speed = THREE.MathUtils.clamp(this.speed - delta * this.backAcceleration, this.maxReverseSpeed, this.maxSpeed); // orientation based on controls
    // (don't just stand while turning)

    var dir = 1;

    if (controls.moveLeft) {
      this.bodyOrientation += delta * this.angularSpeed;
      this.speed = THREE.MathUtils.clamp(this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed);
    }

    if (controls.moveRight) {
      this.bodyOrientation -= delta * this.angularSpeed;
      this.speed = THREE.MathUtils.clamp(this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed);
    } // speed decay


    if (!(controls.moveForward || controls.moveBackward)) {
      if (this.speed > 0) {
        var k = exponentialEaseOut(this.speed / this.maxSpeed);
        this.speed = THREE.MathUtils.clamp(this.speed - k * delta * this.frontDecceleration, 0, this.maxSpeed);
      } else {
        var k = exponentialEaseOut(this.speed / this.maxReverseSpeed);
        this.speed = THREE.MathUtils.clamp(this.speed + k * delta * this.backAcceleration, this.maxReverseSpeed, 0);
      }
    } // displacement


    var forwardDelta = this.speed * delta;
    this.root.position.x += Math.sin(this.bodyOrientation) * forwardDelta;
    this.root.position.z += Math.cos(this.bodyOrientation) * forwardDelta; // steering

    this.root.rotation.y = this.bodyOrientation;
  }; // internal helpers


  function loadTextures(baseUrl, textureUrls) {
    var textureLoader = new THREE.TextureLoader();
    var textures = [];

    for (var i = 0; i < textureUrls.length; i++) {
      textures[i] = textureLoader.load(baseUrl + textureUrls[i], checkLoadingComplete);
      textures[i].mapping = THREE.UVMapping;
      textures[i].name = textureUrls[i];
      textures[i].encoding = THREE.sRGBEncoding;
    }

    return textures;
  }

  function createPart(geometry, skinMap) {
    var materialWireframe = new THREE.MeshLambertMaterial({
      color: 0xffaa00,
      wireframe: true,
      morphTargets: true,
      morphNormals: true
    });
    var materialTexture = new THREE.MeshLambertMaterial({
      color: 0xffffff,
      wireframe: false,
      map: skinMap,
      morphTargets: true,
      morphNormals: true
    }); //

    var mesh = new THREE.MorphBlendMesh(geometry, materialTexture);
    mesh.rotation.y = -Math.PI / 2; //

    mesh.materialTexture = materialTexture;
    mesh.materialWireframe = materialWireframe; //

    mesh.autoCreateAnimations(scope.animationFPS);
    return mesh;
  }

  function checkLoadingComplete() {
    scope.loadCounter -= 1;
    if (scope.loadCounter === 0) scope.onLoadComplete();
  }

  function exponentialEaseOut(k) {
    return k === 1 ? 1 : -Math.pow(2, -10 * k) + 1;
  }
};