web_show_function_ui_mars3d/public/cesium_example/example/js/ThreeLayer.js

let BaseLayer = mars3d.layer.BaseLayer;
let THREE = window.THREE;

//与THREE.js集成
class ThreeLayer extends BaseLayer {
  constructor(options = {}) {
    super(options);

    this._pointerEvents = this.options.pointerEvents;
  }

  _showHook(show) {
    if (show) {
      this._threejsContainer.style.visibility = "visible";
    } else {
      this._threejsContainer.style.visibility = "hidden";
    }
  }

  /**
   * 对象添加到地图前创建一些对象的钩子方法，
   * 只会调用一次
   * @return {void}  无
   * @private
   */
  _mountedHook() {
    if (!THREE) {
      throw new Error("请引入 three.js 库 ");
    }

    let scene = this._map.scene;

    let threeContainer = mars3d.DomUtil.create("div", "mars3d-threejs");
    threeContainer.style.position = "absolute";
    threeContainer.style.top = "0px";
    threeContainer.style.left = "0px";
    threeContainer.style.width = scene.canvas.clientWidth + "px";
    threeContainer.style.height = scene.canvas.clientHeight + "px";
    threeContainer.style.pointerEvents = this._pointerEvents ? "auto" : "none"; //auto时可以交互，但是没法放大地球， none 没法交互
    this._container = threeContainer;

    let fov = 45;
    let aspect = scene.canvas.clientWidth / scene.canvas.clientHeight;
    let near = 1;
    let far = 10 * 1000 * 1000; // needs to be far to support Cesium's world-scale rendering

    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    this.renderer = new THREE.WebGLRenderer({ alpha: true });
    threeContainer.appendChild(this.renderer.domElement);
  }

  /**
   * 对象添加到地图上的创建钩子方法，
   * 每次add时都会调用
   * @return {void}  无
   * @private
   */
  _addedHook() {
    if (this._container) {
      this._map.container.appendChild(this._container);
    }

    this._map.useDefaultRenderLoop = false; //关闭自动渲染

    let that = this;
    (function frame() {
      //animateFrame: requestAnimationFrame事件句柄，用来清除操作
      that._animateFrame = window.requestAnimationFrame(frame);
      that.update(); //按帧率执行
    })();
  }

  /**
   * 对象从地图上移除的创建钩子方法，
   * 每次remove时都会调用
   * @return {void}  无
   * @private
   */
  _removedHook() {
    window.cancelAnimationFrame(this._animateFrame);
    delete this._animateFrame;

    this._map.useDefaultRenderLoop = true;

    if (this._container) {
      this._map.container.removeChild(this._container);
    }
  }

  update() {
    this.renderCesium();
    this.renderThreeObj();
    this.renderCamera();
  }

  renderCesium() {
    this._map.viewer.render();
  }

  renderThreeObj() {
    var width = this._container.clientWidth;
    var height = this._container.clientHeight;
    this.renderer.setSize(width, height);
    this.renderer.render(this.scene, this.camera);
  }
  renderCamera() {
    // register Three.js scene with Cesium
    this.camera.fov = Cesium.Math.toDegrees(this._map.camera.frustum.fovy); // ThreeJS FOV is vertical
    this.camera.updateProjectionMatrix();

    // Clone Cesium Camera projection position so the
    // Three.js Object will appear to be at the same place as above the Cesium Globe

    this.camera.matrixAutoUpdate = false;

    this.camera.lookAt(new THREE.Vector3(0, 0, 0));

    var cvm = this._map.camera.viewMatrix;
    var civm = this._map.camera.inverseViewMatrix;

    this.camera.matrixWorld.set(
      civm[0],
      civm[4],
      civm[8],
      civm[12],
      civm[1],
      civm[5],
      civm[9],
      civm[13],
      civm[2],
      civm[6],
      civm[10],
      civm[14],
      civm[3],
      civm[7],
      civm[11],
      civm[15]
    );

    this.camera.matrixWorldInverse.set(
      cvm[0],
      cvm[4],
      cvm[8],
      cvm[12],
      cvm[1],
      cvm[5],
      cvm[9],
      cvm[13],
      cvm[2],
      cvm[6],
      cvm[10],
      cvm[14],
      cvm[3],
      cvm[7],
      cvm[11],
      cvm[15]
    );

    var width = this._map.scene.canvas.clientWidth;
    var height = this._map.scene.canvas.clientHeight;
    this.camera.aspect = width / height;
    this.renderer.setSize(width, height);
    this.camera.updateProjectionMatrix();

    this.renderer.clear();
    this.renderer.render(this.scene, this.camera);
  }
}