Skip to content

ObjLoader


ts
import { Viewer, OBJLoader } from "joDVF";
import {
  Cartesian3,
  Transforms,
  DebugModelMatrixPrimitive,
  Matrix4
} from "joCesium";

const { mapContainer } = createContainer();

const viewer = new Viewer(mapContainer);

const position = Cartesian3.fromDegrees(113, 23, 1500);
const cameraPosition = Cartesian3.fromDegrees(113, 23, 300);
const eastNorthUpMatrix = Transforms.northEastDownToFixedFrame(position);

OBJLoader.loadOBJModel(
  "./assets/model/obj/scene_mesh_texture.obj",
  viewer
).then((result) => {
  console.log(result, "result");
  for (let i = 0, len = result.length; i < len; ++i) {
    result.get(i).modelMatrix = eastNorthUpMatrix;
  }

  setAxisScale(1300);
  viewer.scene.primitives.add(result);
  viewer.camera.flyTo({
    destination: cameraPosition
  });
  viewer.scene.primitives.add(
    new DebugModelMatrixPrimitive({
      modelMatrix: eastNorthUpMatrix,
      length: 3.0,
      width: 3.0
    })
  );

  function setAxisScale(scale) {
    const scaleMatrix = Matrix4.fromScale(
        new Cartesian3(scale, scale, scale),
        new Matrix4()
      ),
      modelMatrix = Transforms.northEastDownToFixedFrame(position),
      inverseModelMatrix = Matrix4.inverse(modelMatrix, new Matrix4());

    for (let n = 0; n < result.length; n++) {
      let primitiveScale = Matrix4.getScale(
        result.get(n).modelMatrix,
        new Cartesian3()
      );
      primitiveScale = new Cartesian3(
        Math.round(primitiveScale.x),
        Math.round(primitiveScale.y),
        Math.round(primitiveScale.z)
      );
      const inverseScaleMatrix = Matrix4.inverse(
        Matrix4.fromScale(primitiveScale, new Matrix4()),
        new Matrix4()
      );
      Matrix4.multiply(
        inverseModelMatrix,
        result.get(n).modelMatrix,
        result.get(n).modelMatrix
      );
      Matrix4.multiply(
        inverseScaleMatrix,
        result.get(n).modelMatrix,
        result.get(n).modelMatrix
      );
      Matrix4.multiply(
        modelMatrix,
        result.get(n).modelMatrix,
        result.get(n).modelMatrix
      );
      Matrix4.multiply(
        inverseModelMatrix,
        result.get(n).modelMatrix,
        result.get(n).modelMatrix
      );
      Matrix4.multiply(
        scaleMatrix,
        result.get(n).modelMatrix,
        result.get(n).modelMatrix
      );
      Matrix4.multiply(
        modelMatrix,
        result.get(n).modelMatrix,
        result.get(n).modelMatrix
      );
    }
  }
});

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