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

• Distance measurement

• Section plane

• Section box

• Navigation cube

• Pivot

• Context menu

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.