# Loading models and geometry

This tutorial has a function dedicated to loading models. The function is `loadModel`, which takes a filename as a string and attempts to load it from the project’s data directory. One of HOOPS Visualize Web’s native formats is the “stream cache”, or .scs format, so the function assumes the filename will have the .scs extension. `loadModel` will place the model in a node, give it a sequential name, and translate it into place.

    async loadModel(modelName: string) {
        const modelNum = this.hwv.model.getNodeChildren(
            this.hwv.model.getAbsoluteRootNode()).length;

        const nodeName = `Model-${modelNum + 1}`;
        const modelNodeId = this.hwv.model.createNode(null, nodeName);

        this.modelList.push(modelName);
        await this.hwv.model.loadSubtreeFromScsFile(
            modelNodeId,
            "./data/" + modelName + ".scs"
        );

        let loadMatrix = this.hwv.model.getNodeNetMatrix(modelNodeId);
        const box = await this.hwv.model.getNodeRealBounding(modelNodeId);

        loadMatrix.setTranslationComponent(
          box.min.x * -1,
          box.min.y * -1,
          box.min.z * -1
        );

        this.hwv.model.setNodeMatrix(modelNodeId, loadMatrix, true);
    }

## Printing plane

The application also features a printing plane which is defined geometrically by the application and inserted as a mesh.

    import { PrintingPlane } from "./PrintingPlane";

    // ...

    this.printingPlane = new PrintingPlane(300, 10);

See PrintingPlane.ts for the class definition. In it, you’ll see the class constructor as well as its initialization routines. We’ll show here how this is constructed.

    constructor(size = 300, depth = 10) {
        this._planeSize = size;
        this._planeDepth = depth;
        this._nodeId = null;
    }

    public async init(hwv: WebViewer) {
        let gridSize = this._planeSize;
        let d = this._planeDepth;
        let meshData = new MeshData();

    // ...

Much of the content of the class is defining the planes and normals, and with this data you can see how polylines are combined to define the mesh itself:

    for (let i = -gridCount / 2; i <= gridCount / 2; ++i) {
        let position = gridUnit * i;
        meshData.addPolyline([-gridSize, position, 0, gridSize, position, 0]);
        meshData.addPolyline([position, -gridSize, 0, position, gridSize, 0]);
    }

    const meshId = await hwv.model.createMesh(meshData);

Finally, the colors are set and the mesh is instantiated:

    meshInstanceData.setLineColor(new Color(150, 150, 150));
    meshInstanceData.setFaceColor(new Color(75, 75, 75));

    this._nodeId = await hwv.model.createMeshInstance(meshInstanceData, null, null, true);

So you can see the progression of how the mesh goes from lines and faces which define a mesh, to an intermediate `MeshInstanceData` object, and finally to a mesh instance using `createMeshInstance`. Note that instancing a mesh returns a `nodeId` that then becomes part of the ID of the printing plane in the main part of our main application.

The logic discussed on this page enables our models to load at the origin and flush with the plane:

Conversation saved
HOOPSY BETA

### Hello! I'm HOOPSY

Your Docs generative AI assistant. Ask me anything about HOOPS Visualize Web or choose a sample question below to start a conversation:

What is HOOPS Visualize Web?
What are the latest release notes for HOOPS Visualize Web?
How do I start evaluating HOOPS Visualize Web?
How do I write my first sample application?
How can I get assistance?

HOOPSY may store conversations according to OpenAI's policy. Responses may not always be accurate.

HOOPSY is thinking...