# Getting started
# Installation
You can quickly launch the BIMData Viewer with demo identifications.
# Using <script>
tag
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>BIMDataViewer - Quick start</title>
<script src="https://cdn.jsdelivr.net/npm/@bimdata/viewer@1.9.3"></script>
</head>
<body>
<div style="height: 100vh;">
<div id="app"></div>
</div>
<script>
const bimdataViewer = makeBIMDataViewer({
api: {
modelIds: [15097],
cloudId: 10344,
projectId: 237466,
accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
},
});
const vm = bimdataViewer.mount("#app");
</script>
</body>
</html>
# Using npm
Install it using npm :
npm i @bimdata/viewer
And import it with ES module :
import makeBIMDataViewer from "@bimdata/viewer";
Usage in Vue.js component :
<template>
<div class="viewer-container">
<div id="viewer"></div>
</div>
</template>
<script>
import makeBIMDataViewer from "@bimdata/viewer";
export default {
mounted() {
const bimdataViewer = makeBIMDataViewer({
api: {
modelIds: [15097],
cloudId: 10344,
projectId: 237466,
accessToken: "TAbdyPzoQeYgVSMe4GUKoCEfYctVhcwJ",
},
});
bimdataViewer.mount("#viewer");
}
}
</script>
<style>
.viewer-container {
height: 100vh;
}
</style>
# Use your own models
To use your own models on the BIMData Viewer, you first need to upload them using the BIMData API.
Then, you can display them on the viewer using their identifications :
const bimdataViewer = makeBIMDataViewer({
api: {
modelIds: [XXX, XXX], // Your model ids
cloudId: XXX, // Your cloud id
projectId: XXX, // Your project id
accessToken: XXX, // Your access token
apiUrl: XXX, // The BIMData API URL you use
},
});
bimdataViewer.mount("#viewer");
# Disable native plugins
UI elements like plugins, viewer version and BIMData logo can be configured. To do so, use the makeBIMDataViewer function configuration object.
Here is an example to get an empty 3d viewer :
const viewer = makeBIMDataViewer(
ui: {
version: false,
bimdataLogo: false,
},
plugins: {
bcf: false,
fullscreen: false,
measure3d: false,
projection: false,
search: false,
section: false,
"structure-properties": false,
viewer3d: {
navCube: false,
help: false,
modelLoader: "hidden",
},
"viewer3d-parameters": false,
"window-split": false,
}
);
The result :
TIP
To see all the UI configuration possibilities, see the viewer UI documentation.