模型卷帘

---

import { Viewer, Rollblind } from "joDVF";
import { Pane } from "tweakpane";
import {
  Cesium3DTileset,
  Cesium3DTileStyle,
  HeadingPitchRange
} from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);

const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;

try {
  const tileset = await Cesium3DTileset.fromUrl(
    "./assets/3dtilesets/dayanta/tileset.json"
  );
  scene.primitives.add(tileset);
  tileset.style = new Cesium3DTileStyle({
    show: "true",
    color: 'color("purple", 0.5)'
  });

  const tileset2 = await Cesium3DTileset.fromUrl(
    "./assets/3dtilesets/dayanta/tileset.json"
  );
  scene.primitives.add(tileset2);
  // 定位
  const boundingSphere = tileset2.boundingSphere;
  const radius = boundingSphere.radius;
  viewer.zoomTo(tileset2, new HeadingPitchRange(-1.2, -0.6, radius * 2.0));

  let rollblind = new Rollblind(viewer, {
    layers1: [tileset],
    layers2: [tileset2]
  });

  addUI();
  function addUI() {
    const PARAMS = {
      inverse: true,
      rollblindDirection: "vertical"
    };
    const pane = new Pane({
      container: uiContainer,
      title: "参数"
    });

    pane.addBinding(PARAMS, "inverse", {
      label: "卷帘取反"
    });

    pane.addBlade({
      view: "list",
      label: "卷帘方向",
      options: [
        { text: "左右卷帘", value: "vertical" },
        { text: "上下卷帘", value: "horizontal" }
      ],
      value: "vertical"
    });

    // 创建卷帘
    const createBtn = pane.addButton({
      title: "create",
      label: "创建" // optional
    });

    createBtn.on("click", () => {
      if (rollblind) return;
      rollblind = new Rollblind(viewer, {
        layers1: [tileset],
        layers2: [tileset2]
      });
    });

    // 销毁卷帘
    const destoryBtn = pane.addButton({
      title: "destroy",
      label: "销毁" // optional
    });

    destoryBtn.on("click", () => {
      rollblind.destroy();
    });

    pane.on("change", (ev) => {
      let timer = null;
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }

      timer = setTimeout(() => {
        console.log("changed: " + JSON.stringify(ev.value), ev);
        if (ev.target.key === "inverse") {
          rollblind.inverse(ev.value);
        }
        if (ev.value === "vertical" || ev.value === "horizontal") {
          rollblind.setDirection(ev.value);
        }
      }, 300);
    });
  }
} catch (e) {
  console.log(e);
}
function createContainer() {
  const container = document.createElement("div");
  container.style.width = "100%";
  container.style.height = "100%";

  const uiContainer = document.createElement("div");
  uiContainer.style.position = "fixed";
  uiContainer.style.top = "5px";
  uiContainer.style.left = "5px";
  document.body.appendChild(container);
  document.body.appendChild(uiContainer);

  return {
    mapContainer: container,
    uiContainer
  };
}