Skip to content

WebGL BIM Viewer based on xeoKit-sdk, written with TypeScript.

License

Notifications You must be signed in to change notification settings

pattern-x/gemini-viewer-xeokit

Repository files navigation

gemini-viewer

WebGL BIM Viewer based on xeoKit-sdk, written with TypeScript.

Installation

To install from npm:

npm install @pattern-x/gemini-viewer

Documentation

The documents are under the ./docs. To generate the documents:

npm run docs

Features

  • Orthographic camera ortho.gif

  • Distance measurement measure_dist.gif

  • Section plane section_plane.gif

  • Section box section_box.gif

  • Navigation cube select.gif

  • Pivot outline.gif

  • Context menu transparent.gif

Examples

To run the demo:

npm run demo

And then, visit demo.

Basic usages for Bimviewer is as followed. For more details, you could refference to gemini-viewer-ui which is a react project build up with gemini-viewer.

import { BimViewer, KeyBoardRotatePlugin } from "@pattern-x/gemini-viewer";

const project = {
    id: "technical_school_normal",
    name: "technical_school_normal",
    thumbnail: "/projects/technical_school_normal/thumbnail.png",
    camera: {
        eye: [-65, 37, 41],
        look: [-15, 0, 15],
        up: [0, 1, 0],
        far: 10000,
    },
    models: [
        {
            name: "technical school normal",
            src: "/projects/technical_school_normal/Technical_school-current_m.gltf",
            position: [0, 0, 0],
            rotation: [0, 0, 0],
            scale: [1, 1, 1],
            edges: true,
            visible: true,
        },
    ],
};

const bimViewer = new BimViewer(
    {
        canvasId: "myCanvas",
        // use default css if navCubeCanvasId or axisGizmoCanvasId not given
        // navCubeCanvasId: "myNavCubeCanvas",
        // axisGizmoCanvasId: "myAxisGizmoCanvas",
        swapYZ: true,
        activeOrthoMode: true,
        // locale: "en"
        skyBoxImgSrc: "images/skybox/default.png"
    },
    project.camera
);

new KeyBoardRotatePlugin(bimViewer.viewer);

// loadProjectModel
let counter = 0; // to indicate how many models are loading
project.models.forEach((modelCfg) => {
    if (modelCfg.visible === false) {
        // visible is true by default
        return; // only load visible ones
    }
    counter++;
    bimViewer.loadModel(modelCfg, (model) => {
        counter--;
        if (counter === 0) {
            if (bimViewer.has2dModel && !bimViewer.has3dModel) {
                bimViewer.active2dMode();
            }
        }
        // Do something with model
        // console.log("model:", model);

        // Gets the image data of the model canvas.
        // console.log(bimViewer.getCanvasImageDataUrl());
    });
});
...

BimViewer Configuration Summary

Name Type Attribute Description
canvasId string For Xeokit Viewer.
enableNavCube boolean - optional
- default: true
Shows the NavCube.
enableAxisGizmo boolean - optional
- default: true
Shows the AxisGizmo.
enableToolbar boolean - optional
- default: true
Shows the toolbar.
enableBottomBar boolean - optional
- default: true
shows the bottom-bar.
enableContextMenu boolean - optional
- default: true
Shows the context-menu.
enableFastNav boolean - optional
- default: true
Enables FastNav
Viewer plugin that improves interactivity by disabling expensive rendering effects while the Camera is moving.
enableSingleSelection boolean - optional
- default: true
Enable single selection.
spinnerElementId string - optional The id of customized spinner element.
For Xeokit Viewer.scene.
swapYZ boolean - optional
- default: false
Swaps Y / Z axis.
navCubeCanvasId string - optional The id of the customized canvas to draw NavCube.
It will use the default NavCube when this param is empty.
axisGizmoCanvasId string - optional The id of the customized canvas to draw AxisGizmo.
It will use the default AxisGizmo when this param is empty.
antialias boolean - optional For Xeokit Viewer.scene.
transparent boolean - optional For Xeokit Viewer.scene.
gammaInput boolean - optional For Xeokit Viewer.scene.
gammaOutput boolean - optional For Xeokit Viewer.scene.
backgroundColor number[] - optional For Xeokit Viewer.scene.canvas.
units string - optional
- default: "meters"
For Xeokit Viewer.scene.metrics.
scale number - optional For Xeokit Viewer.scene.metrics.
origin number[] - optional For Xeokit Viewer.scene.metrics.
saoEnabled boolean - optional For Xeokit Viewer.scene.sao.
pbrEnabled boolean - optional For Xeokit Viewer.scene.
activeOrthoMode boolean - optional Enter ortho mode by default.
locale "cn" | "en" - optional
- default: "cn"
Sets the default locale.
skyBoxImgSrc string - optional The image src of the skybox.
It will use default background color when this param is empty.