Messing with the clipper

bim.js

@@ -30,7 +30,6 @@ BIM.init = function (container) {
 }
 /**
  * @param {HTMLElement} container The scene container element
- * @returns {OBC.Components}
  */
 BIM.createScene = function (container) {
     this.init(container);
@@ -42,6 +41,18 @@ BIM.createScene = function (container) {
     // (zoom_level, position)
     this.world.camera.controls.setLookAt(15, 15, 15, 0, 0, 0);
 }
+/**
+ * @param {HTMLElement} container The scene container element
+ */
+BIM.activateClipper = function () {
+    const casters = this.components.get(OBC.Raycasters);
+    casters.get(this.world);
+    // Enable plane clipper
+    const clipper = this.components.get(OBC.Clipper);
+    clipper.enabled = true;
+    clipper.create(this.world);
+    clipper.visible = true;
+}
 /**
  * @todo Serve web-ifc.wasm locally via AJAX
  * @param {ArrayBuffer} buffer The uploaded IFC file 

index.html

@@ -35,7 +35,7 @@
 		<div class="column is-full">
 			<div id="scene"></div>
 			<div id="ui" data-theme="light">
-				<div class="file ml-4">
+				<div class="file ml-4 mt-4 is-link">
 					<label class="file-label">
 						<input class="file-input"
 							type="file"
@@ -51,7 +51,7 @@
 					</label>
 				</div>
 				<aside class="menu ml-4">
-					<p class="menu-label">Proprietà IFC (selezione)</p>
+					<p class="menu-label is-size-6">Proprietà IFC (selezione)</p>
 					<ul class="menu-list">
 						<li id="selected-prop"></li>
 					</ul>

main.js

@@ -1,8 +1,11 @@
 'use strict';
 
 import UI from './ui.js';
+import BIM from './bim.js';
 
 document.addEventListener('DOMContentLoaded', () => {
-    UI.setScene(document.querySelector('#scene'));
-    const model = UI.ifcLoader();
+    const container = document.querySelector('#scene');
+    UI.setScene(container);
+    const model = UI.ifcLoader(container);
+    container.ondblclick = () => BIM.activateClipper();
 });

ui.js

@@ -15,9 +15,10 @@ UI.setScene = function (container) {
 }
 /**
  * Returns the loaded model
+ * @param {HTMLElement} container The container element
  * @param {string} btnId The loading button's id
  */
-UI.ifcLoader = function (btnId = 'load-ifc') {
+UI.ifcLoader = function (container, btnId = 'load-ifc') {
     const loadBtn = document.querySelector(`#${btnId}`);
     let model = null;
     loadBtn.onchange = async function () {