How to overlay a 2d dxf dwg to a 3d model

We can overlay a 3d dxf to a 3d model, and we can put as many modles/dxfs into one scene as long as there is enough memory for a web page.

If two models/dxfs have exactly the same coordinate system, and the same base point, etc. Simply load them, then their position/scale should be expected.

How to load two models into BimViewer

const model1 = {
    "id": "building1",
    "src": "./demo/models/gltf/building1.gltf"
};
const model2 = {
    "id": "building1_dxf",
    "src": "./demo/models/dxf/building1.dxf"
};
const viewer = new BimViewer({ containerId: "myCanvas" });
await viewer.loadModel(model1);
await viewer.loadModel(model2);

Run the sample page, we can see:

But we cannot see the dxf, why? let's continue...

Adjust matrix

A dxf is defined in xy plane, we usually need to apply a matrix in order to overlay it to a 3d model. Because threejs is a right-handed, y-up system. The sample dxf is a plan/floor view, so, we need to make dxf into xz plane. We can do it by a matrix. This is a unit matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] To switch y and z value, we use: [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1] And, as we know the sample dxf is in Milimeter (well, you should know the unit of your file). And the gltf model is in Meter, so we need a scale value: 0.001. So, we get: [0.001, 0, 0, 0, 0, 0, 0.001, 0, 0, 0.001, 0, 0, 0, 0, 0, 1]

"models": [{
    "name": "building1",
    "src": "./demo/models/gltf/building1.gltf",
}, {
    "id": "building1_dxf",
    "name": "building1 plan drawing",
    "src": "./demo/models/dxf/building1.dxf",
    "matrix": [
        0.001, 0, 0, 0, // the dxf is in "mm", and gltf is in "meter", so need to set scale 0.001
        0, 0, -0.001, 0,
        0, 0.001, 0, 0,
        -1831.340, 17, 456.910, 1 // also need to consider the base point
    ],
}]