三维模型位置编辑

---

import { Viewer, Editing } from "joDVF";
import { Pane } from "tweakpane";
import {
  Cartesian3,
  Transforms,
  Model,
  BoundingSphere,
  HeadingPitchRange
} from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);
const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
const position = Cartesian3.fromDegrees(
  113.4200575289038,
  23.17815547709127,
  100
);
const modelMatrix = Transforms.eastNorthUpToFixedFrame(position);
let tilesetEdit, glbModel;

// Model
Model.fromGltfAsync({
  url: "./assets/model/glb/15-0.glb",
  modelMatrix: modelMatrix,
  scale: 0.1
}).then((model) => {
  glbModel = scene.primitives.add(model);
});

viewer.camera.flyToBoundingSphere(new BoundingSphere(position), {
  offset: new HeadingPitchRange((Math.PI / 6) * 5, -Math.PI / 4, 200)
});

addUI();
function addUI() {
  const pane = new Pane({
    container: uiContainer,
    title: "操作"
  });

  const modelEditingBtn = pane.addButton({
    title: "模型编辑"
  });

  modelEditingBtn.on("click", () => {
    if (!tilesetEdit) {
      tilesetEdit = new Editing({
        viewer: viewer,
        model: glbModel
      });
    }
    tilesetEdit.start();
  });

  const axisEditingBtn = pane.addButton({
    title: "轴线编辑"
  });

  axisEditingBtn.on("click", () => {
    if (!tilesetEdit) {
      tilesetEdit = new Editing({
        viewer: viewer,
        model: glbModel
      });
    }
    tilesetEdit.axisEditingStart();
  });

  const saveBtn = pane.addButton({
    title: "保存"
  });

  saveBtn.on("click", () => {
    if (tilesetEdit) tilesetEdit.save();
  });

  const btnReset = pane.addButton({
    title: "重置"
  });

  btnReset.on("click", () => {
    if (tilesetEdit) tilesetEdit.reset();
  });

  const btnQuit = pane.addButton({
    title: "退出编辑"
  });

  btnQuit.on("click", () => {
    if (tilesetEdit) tilesetEdit = tilesetEdit.destroy();
  });
}

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
  };
}