-
Notifications
You must be signed in to change notification settings - Fork 19
Expand file tree
/
Copy pathindex.html
More file actions
61 lines (61 loc) · 106 KB
/
index.html
File metadata and controls
61 lines (61 loc) · 106 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-Tutorials/Components/Front/VolumeMeasurement" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.4.0">
<title data-rh="true">VolumeMeasurement | That Open docs</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.thatopen.com/img/logo.svg"><meta data-rh="true" name="twitter:image" content="https://docs.thatopen.com/img/logo.svg"><meta data-rh="true" property="og:url" content="https://docs.thatopen.com/Tutorials/Components/Front/VolumeMeasurement"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="VolumeMeasurement | That Open docs"><meta data-rh="true" name="description" content="window.open("https://thatopen.github.io/engine_components/examples/VolumeMeasurement")} >Go Full Screen"><meta data-rh="true" property="og:description" content="window.open("https://thatopen.github.io/engine_components/examples/VolumeMeasurement")} >Go Full Screen"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.thatopen.com/Tutorials/Components/Front/VolumeMeasurement"><link data-rh="true" rel="alternate" href="https://docs.thatopen.com/Tutorials/Components/Front/VolumeMeasurement" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.thatopen.com/Tutorials/Components/Front/VolumeMeasurement" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://Z3IS6MTI1S-dsn.algolia.net" crossorigin="anonymous"><link rel="search" type="application/opensearchdescription+xml" title="That Open docs" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.0229516a.css">
<script src="/assets/js/runtime~main.ab4ea4d5.js" defer="defer"></script>
<script src="/assets/js/main.6473d28b.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"dark")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo-purple.svg" alt="That Open Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo-green.svg" alt="That Open Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a></div><div class="navbar__items navbar__items--right"><a href="https://thatopen.com/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Project<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://people.thatopen.com/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Community<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://www.npmjs.com/org/thatopen" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">NPM<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><a href="https://github.com/ThatOpen/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently dark mode)" aria-label="Switch between dark and light mode (currently dark mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/intro">👨🏻💻 Introduction</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/contributing">🤝 Get involved</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/components/getting-started">🧩 Components</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/Tutorials/Components/">👩🏻🏫 Tutorials</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/Tutorials/Components/">Components</a><button aria-label="Collapse sidebar category 'Components'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/Tutorials/Components/Core/BCFTopics">Core</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/Tutorials/Components/Front/AngleMeasurement">Front</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/AngleMeasurement">AngleMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/AreaMeasurement">AreaMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Civil3DNavigator">Civil3DNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/CivilCrossSectionNavigator">CivilCrossSectionNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/CivilElevationNavigator">CivilElevationNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/CivilPlanNavigator">CivilPlanNavigator</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/ClipEdges">ClipEdges</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/EdgeMeasurement">EdgeMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/FaceMeasurement">FaceMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Highlighter">Highlighter</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/IfcStreamer">IfcStreamer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/LengthMeasurement">LengthMeasurement</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Marker">Marker</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Plans">Plans</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/PostproductionRenderer">PostproductionRenderer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/Sections">Sections</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/Tutorials/Components/Front/ShadowDropper">ShadowDropper</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/Tutorials/Components/Front/VolumeMeasurement">VolumeMeasurement</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/Tutorials/UserInterface/">UserInterface</a><button aria-label="Expand sidebar category 'UserInterface'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/api/">📋 API</a><button aria-label="Expand sidebar category '📋 API'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">👩🏻🏫 Tutorials</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/Tutorials/Components/"><span itemprop="name">Components</span></a><meta itemprop="position" content="2"></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Front</span><meta itemprop="position" content="3"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">VolumeMeasurement</span><meta itemprop="position" content="4"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>VolumeMeasurement</h1></header><div style="position:relative"><iframe src="https://thatopen.github.io/engine_components/examples/VolumeMeasurement"></iframe><button class="full-screen-btn">Go Full Screen</button></div>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Source</div><div class="admonitionContent_BuS1"><p>Copying and pasting? We've got you covered! You can find the full source code of this tutorial <a href="https://github.com/ThatOpen/engine_components/blob/main/packages/front/src/measurement/VolumeMeasurement/example.ts" target="_blank" rel="noopener noreferrer">here</a>.</p></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-measuring-volumes">📐 Measuring volumes<a class="hash-link" aria-label="Direct link to 📐 Measuring volumes" title="Direct link to 📐 Measuring volumes" href="/Tutorials/Components/Front/VolumeMeasurement#-measuring-volumes"></a></h3>
<hr>
<p>Space control is one of the most important elements of BIM applications. In this tutorial, you'll learn how to expose an volume measurement tool to your end users.
We will import:</p>
<ul>
<li><code>@thatopen/components</code> to set up the barebone of our app.</li>
<li><code>@thatopen/components-front</code> to use some frontend-oriented components.</li>
<li><code>Stats.js</code> (optional) to measure the performance of our app.</li>
</ul>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">Stats</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"stats.js"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@thatopen/components"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@thatopen/ui"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBCF</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@thatopen/components-front"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-setting-up-a-simple-scene">🌎 Setting up a simple scene<a class="hash-link" aria-label="Direct link to 🌎 Setting up a simple scene" title="Direct link to 🌎 Setting up a simple scene" href="/Tutorials/Components/Front/VolumeMeasurement#-setting-up-a-simple-scene"></a></h3>
<hr>
<p>We will start by creating a simple scene with a camera and a renderer. If you don't know how to set up a scene, you can check the Worlds tutorial.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> container </span><span class="token operator">=</span><span class="token plain"> </span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getElementById</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">"container"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">!</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> components </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">Components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> worlds </span><span class="token operator">=</span><span class="token plain"> components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">get</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Worlds</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> world </span><span class="token operator">=</span><span class="token plain"> worlds</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">create</span><span class="token operator"><</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">SimpleScene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">SimpleCamera</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">OBCF</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">PostproductionRenderer</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token operator">></span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">SimpleScene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBCF</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">PostproductionRenderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> container</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">camera</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">SimpleCamera</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">init</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">camera</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">controls</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setLookAt</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">5</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">5</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">5</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setup</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> grids </span><span class="token operator">=</span><span class="token plain"> components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">get</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token constant" style="color:rgb(189, 147, 249)">OBC</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Grids</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">grids</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">create</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>We'll make the background of the scene transparent so that it looks good in our docs page, but you don't have to do that in your app!</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">three</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">background</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:rgb(189, 147, 249);font-style:italic">null</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-loading-a-bim-model">🧳 Loading a BIM model<a class="hash-link" aria-label="Direct link to 🧳 Loading a BIM model" title="Direct link to 🧳 Loading a BIM model" href="/Tutorials/Components/Front/VolumeMeasurement#-loading-a-bim-model"></a></h3>
<hr>
<p>We'll start by adding a BIM model to our scene. That model is already converted to fragments, so it will load much faster than if we loaded the IFC file.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>Fragments?</div><div class="admonitionContent_BuS1"><p>If you are not familiar with fragments, check out the IfcLoader tutorial!</p></div></div>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> fragments </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">OBC</span><span class="token class-name punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token class-name">FragmentsManager</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> file </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(80, 250, 123)">fetch</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"https://thatopen.github.io/engine_components/resources/small.frag"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> data </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">await</span><span class="token plain"> file</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">arrayBuffer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> buffer </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">Uint8Array</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> model </span><span class="token operator">=</span><span class="token plain"> fragments</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">load</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">buffer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">scene</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">three</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">model</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="️-getting-the-volume-measurements">🛠️ Getting the volume measurements<a class="hash-link" aria-label="Direct link to 🛠️ Getting the volume measurements" title="Direct link to 🛠️ Getting the volume measurements" href="/Tutorials/Components/Front/VolumeMeasurement#️-getting-the-volume-measurements"></a></h3>
<hr>
<p>First, let's get an instance of the volume measurement component and initialize it.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> dimensions </span><span class="token operator">=</span><span class="token plain"> components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">get</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token constant" style="color:rgb(189, 147, 249)">OBCF</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">VolumeMeasurement</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">dimensions</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">world</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">dimensions</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">enabled</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token boolean">true</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-getting-the-highlighter">🔦 Getting the highlighter<a class="hash-link" aria-label="Direct link to 🔦 Getting the highlighter" title="Direct link to 🔦 Getting the highlighter" href="/Tutorials/Components/Front/VolumeMeasurement#-getting-the-highlighter"></a></h3>
<hr>
<p>Now, let's get an instance of the highlighter component and initialize it to be able to highlight the computed volume.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>Highlighter?</div><div class="admonitionContent_BuS1"><p>If you are not familiar with the highlighter component, check out the highlighter tutorial!</p></div></div>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> highlighter </span><span class="token operator">=</span><span class="token plain"> components</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">get</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token constant" style="color:rgb(189, 147, 249)">OBCF</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Highlighter</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">highlighter</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">setup</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> world </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Now we'll simply take the computed volume and log it in the console. Also, when the highlighter is cleared, we'll also clear the volume dimension.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token plain">highlighter</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">events</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">select</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">onHighlight</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> volume </span><span class="token operator">=</span><span class="token plain"> dimensions</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">getVolumeFromFragments</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">event</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">log</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">volume</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">highlighter</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">events</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">select</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">onClear</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> dimensions</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">clear</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="️-measuring-the-performance-optional">⏱️ Measuring the performance (optional)<a class="hash-link" aria-label="Direct link to ⏱️ Measuring the performance (optional)" title="Direct link to ⏱️ Measuring the performance (optional)" href="/Tutorials/Components/Front/VolumeMeasurement#️-measuring-the-performance-optional"></a></h3>
<hr>
<p>We'll use the <a href="https://github.com/mrdoob/stats.js" target="_blank" rel="noopener noreferrer">Stats.js</a> to measure the performance of our app. We will add it to the top left corner of the viewport. This way, we'll make sure that the memory consumption and the FPS of our app are under control.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> stats </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">Stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">showPanel</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">2</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">body</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">append</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">dom</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">dom</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">style</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">left</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"0px"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">dom</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">style</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">zIndex</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"unset"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">onBeforeUpdate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">begin</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain">world</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">renderer</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">onAfterUpdate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> stats</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">end</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-adding-some-ui">🧩 Adding some UI<a class="hash-link" aria-label="Direct link to 🧩 Adding some UI" title="Direct link to 🧩 Adding some UI" href="/Tutorials/Components/Front/VolumeMeasurement#-adding-some-ui"></a></h3>
<hr>
<p>We will use the <code>@thatopen/ui</code> library to add some simple and cool UI elements to our app. First, we need to call the <code>init</code> method of the <code>BUI.Manager</code> class to initialize the library:</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Manager</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">init</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>Now we will add some UI to have some control over the dimensions we create. For more information about the UI library, you can check the specific documentation for it!</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> panel </span><span class="token operator">=</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Component</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">create</span><span class="token operator"><</span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">PanelSection</span><span class="token operator">></span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">html</span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">active</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Volume Measurement Tutorial</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">options-menu</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">collapsed</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Controls</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-label</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html">Create dimension: Left click</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-label</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-label</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html">Delete dimension: Left click el</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-label</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">collapsed</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Others</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-button</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">label</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">Delete all</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@click</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> dimensions</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">clear</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> highlighter</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">clear</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-button</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel-section</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-panel</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">body</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">append</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">panel</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>And we will make some logic that adds a button to the screen when the user is visiting our app from their phone, allowing to show or hide the menu. Otherwise, the menu would make the app unusable.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> button </span><span class="token operator">=</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">Component</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">create</span><span class="token operator"><</span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access maybe-class-name">PanelSection</span><span class="token operator">></span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token arrow operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">BUI</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">html</span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"><</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-button</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">class</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">phone-menu-toggler</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">icon</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value" style="color:rgb(255, 121, 198)">solar:settings-bold</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-name" style="color:rgb(241, 250, 140)">@click</span><span class="token template-string html language-html tag attr-value punctuation attr-equals" style="color:rgb(248, 248, 242)">=</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">${</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation arrow operator" style="color:rgb(255, 121, 198)">=></span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)">panel</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">classList</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">contains</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation string" style="color:rgb(255, 121, 198)">"options-menu-visible"</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> panel</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">classList</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">remove</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation string" style="color:rgb(255, 121, 198)">"options-menu-visible"</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation keyword control-flow" style="color:rgb(189, 147, 249);font-style:italic">else</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> panel</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation property-access" style="color:rgb(255, 121, 198)">classList</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token template-string html language-html tag attr-value interpolation method function property-access" style="color:rgb(80, 250, 123)">add</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token template-string html language-html tag attr-value interpolation string" style="color:rgb(255, 121, 198)">"options-menu-visible"</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html tag attr-value interpolation" style="color:rgb(255, 121, 198)"> </span><span class="token template-string html language-html tag attr-value interpolation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value interpolation interpolation-punctuation punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token template-string html language-html tag attr-value punctuation" style="color:rgb(248, 248, 242)">"</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)"></</span><span class="token template-string html language-html tag" style="color:rgb(255, 121, 198)">bim-button</span><span class="token template-string html language-html tag punctuation" style="color:rgb(248, 248, 242)">></span><span class="token template-string html language-html"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token template-string html language-html"> </span><span class="token template-string template-punctuation string" style="color:rgb(255, 121, 198)">`</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token dom variable" style="color:rgb(189, 147, 249);font-style:italic">document</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token property-access">body</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token method function property-access" style="color:rgb(80, 250, 123)">append</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="-wrap-up">🎉 Wrap up<a class="hash-link" aria-label="Direct link to 🎉 Wrap up" title="Direct link to 🎉 Wrap up" href="/Tutorials/Components/Front/VolumeMeasurement#-wrap-up"></a></h3>
<hr>
<p>That's it! You have created an app that can create and delete volume dimensions on any 3D object. Congratulations!</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/Tutorials/Components/Front/ShadowDropper"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">ShadowDropper</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/Tutorials/UserInterface/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">UserInterface</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#-measuring-volumes">📐 Measuring volumes</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#-setting-up-a-simple-scene">🌎 Setting up a simple scene</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#-loading-a-bim-model">🧳 Loading a BIM model</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#️-getting-the-volume-measurements">🛠️ Getting the volume measurements</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#-getting-the-highlighter">🔦 Getting the highlighter</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#️-measuring-the-performance-optional">⏱️ Measuring the performance (optional)</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#-adding-some-ui">🧩 Adding some UI</a></li><li><a class="table-of-contents__link toc-highlight" href="/Tutorials/Components/Front/VolumeMeasurement#-wrap-up">🎉 Wrap up</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 That Open Company. Built with Docusaurus.</div></div></div></footer></div>
</body>
</html>