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