Bimatter-viewer NPM

Bimatter viewer core

This is new ifc viewer core

All about us you can see on our website Bimatter

Live demo

Introduction demo

Create new project, using some IDE.
Open terminal inside your new project
Init new npm project with command npm init use flag -y to create project with default settings
Install bimatter-viewer library with command npm i bimatter-viewer
Create html file index.html (you can use ! + TAB if you work with VS Code and dont forget to add <script src="./build/bundle.js"></script> inside body section)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>viewer show</title>
    </head>
    <body style="padding: 0; margin: 0">
        <script src="./build/bundle.js"></script>
    </body>
</html>

Create script file index.js where "./model.ifc" - is path to your ifc model

import BimatterViewer from "bimatter-viewer";

document.addEventListener("DOMContentLoaded", () => {
    const viewer = new BimatterViewer();
    viewer.utils.useStats = true;
    viewer.loadModel("./model.ifc");
});

Create server. In this example we will use webpack with webpack-dev-server
To use webpack-dev-server you need to install next libraries:
7.1. install webpack with command npm i webpack
7.2. install webpack-cli with command npm i webpack-cli
7.3. install webpack-dev-server with command npm i webpack-dev-server
(you can use flag -D to intall it as devDependencies)
Create webpack config file webpack.config.js

const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry: "./index.js",
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    stats: "errors-only",
    watchOptions: {
        poll: true,
        ignored: "**/node_modules",
    },
    devServer: {
        historyApiFallback: true,
        static: [
            {
                directory: path.resolve(__dirname),
            },
            {
                directory: path.resolve(__dirname, "Models"),
            },
        ],
        open: true,
        compress: true,
        hot: true,
        port: 8000,
    },
    output: {
        path: path.resolve(__dirname, "src"),
        filename: "build/bundle.js",
    },
};

Add running script to package.json file.
"start": "webpack serve --mode=development"
Go to directory node_modules/bimatter-viewer and copy next files to root directory
- file: ifc-parser.wasm
- folder: Resources
Go to terminal and run script npm start

Ready!!!

camera-controls three

2 days ago

3 days ago

3 days ago

3 days ago

18 days ago