bytev-charts/lib/plugin/three.js/examples/js/effects/PeppersGhostEffect.js

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

console.warn("THREE.PeppersGhostEffect: 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.");
/**
 * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
 */

THREE.PeppersGhostEffect = function (renderer) {
  var scope = this;
  scope.cameraDistance = 15;
  scope.reflectFromAbove = false; // Internals

  var _halfWidth, _width, _height;

  var _cameraF = new THREE.PerspectiveCamera(); //front


  var _cameraB = new THREE.PerspectiveCamera(); //back


  var _cameraL = new THREE.PerspectiveCamera(); //left


  var _cameraR = new THREE.PerspectiveCamera(); //right


  var _position = new THREE.Vector3();

  var _quaternion = new THREE.Quaternion();

  var _scale = new THREE.Vector3(); // Initialization


  renderer.autoClear = false;

  this.setSize = function (width, height) {
    _halfWidth = width / 2;

    if (width < height) {
      _width = width / 3;
      _height = width / 3;
    } else {
      _width = height / 3;
      _height = height / 3;
    }

    renderer.setSize(width, height);
  };

  this.render = function (scene, camera) {
    scene.updateMatrixWorld();
    if (camera.parent === null) camera.updateMatrixWorld();
    camera.matrixWorld.decompose(_position, _quaternion, _scale); // front

    _cameraF.position.copy(_position);

    _cameraF.quaternion.copy(_quaternion);

    _cameraF.translateZ(scope.cameraDistance);

    _cameraF.lookAt(scene.position); // back


    _cameraB.position.copy(_position);

    _cameraB.quaternion.copy(_quaternion);

    _cameraB.translateZ(-scope.cameraDistance);

    _cameraB.lookAt(scene.position);

    _cameraB.rotation.z += 180 * (Math.PI / 180); // left

    _cameraL.position.copy(_position);

    _cameraL.quaternion.copy(_quaternion);

    _cameraL.translateX(-scope.cameraDistance);

    _cameraL.lookAt(scene.position);

    _cameraL.rotation.x += 90 * (Math.PI / 180); // right

    _cameraR.position.copy(_position);

    _cameraR.quaternion.copy(_quaternion);

    _cameraR.translateX(scope.cameraDistance);

    _cameraR.lookAt(scene.position);

    _cameraR.rotation.x += 90 * (Math.PI / 180);
    renderer.clear();
    renderer.setScissorTest(true);
    renderer.setScissor(_halfWidth - _width / 2, _height * 2, _width, _height);
    renderer.setViewport(_halfWidth - _width / 2, _height * 2, _width, _height);

    if (scope.reflectFromAbove) {
      renderer.render(scene, _cameraB);
    } else {
      renderer.render(scene, _cameraF);
    }

    renderer.setScissor(_halfWidth - _width / 2, 0, _width, _height);
    renderer.setViewport(_halfWidth - _width / 2, 0, _width, _height);

    if (scope.reflectFromAbove) {
      renderer.render(scene, _cameraF);
    } else {
      renderer.render(scene, _cameraB);
    }

    renderer.setScissor(_halfWidth - _width / 2 - _width, _height, _width, _height);
    renderer.setViewport(_halfWidth - _width / 2 - _width, _height, _width, _height);

    if (scope.reflectFromAbove) {
      renderer.render(scene, _cameraR);
    } else {
      renderer.render(scene, _cameraL);
    }

    renderer.setScissor(_halfWidth + _width / 2, _height, _width, _height);
    renderer.setViewport(_halfWidth + _width / 2, _height, _width, _height);

    if (scope.reflectFromAbove) {
      renderer.render(scene, _cameraL);
    } else {
      renderer.render(scene, _cameraR);
    }

    renderer.setScissorTest(false);
  };
};