SimpleDimensions

📏 Dimensions Tool

At times, you may need to compute the dimensions of an object or measure the distance between two elements. Elements must be precisely aligned when working on complex models. Dimension Tool allows you to perform measurements effortlessly.

First, let's set up a simple scene!

👀 If you haven't started there, check out that tutorial first!

This tutorial will show you how to add Dimension Tool to your projects, which can be used to acquire accurate dimensions for any 3D Object.🔭

🎲 Creating a Cube Mesh

For this tutorial we will use a Cube, you can add any geometry as per your preference. We will create a Cube with 3x3x3 dimensions and use red color for the material.

const cubeGeometry = new THREE.BoxGeometry(3, 3, 3);
const redMaterial = new THREE.MeshStandardMaterial({color: "red"});
const redCube = new THREE.Mesh(cubeGeometry, redMaterial);
redCube.position.set(0, 1.5, 0)

Now, we will add the Cube to the Scene. We must also add the cube to components.meshes, which is simply an array of all the meshes in the Scene.🗄️

scene.add(redCube);
components.meshes.push(redCube);

Collection of Meshes

📦 Components.meshes keeps all your meshes including IFC Models, Fragments in one place.

🛠️ Creating Dimension Tool

A lot of logic is usually needed to compute dimensions for any item, beginning with ray casting, finding the vertices to snap to, and rendering the UI for every line element.🙄 This may appear to be a lot of effort, but we are handling all the heavy lifting for you, and you only need to write a few lines for creating the Dimension Tool.💪

const dimensions = new OBC.SimpleDimensions(components);

We will build dimensions by supplying the components to OBC.SimpleDimensions.

DIMENSIONS AND UI

Read the Simple Dimensions API for more on this. The Simple Dimensions API provides you with a compact UI as well to display the measurements.

🎨 SimpleDimensions has several properties that help you to customize the behaviour of the Line Element. One such property which you can use is dimensions.color which modifies the color of the Line Element.

components.tools.add(dimensions);

Adding it to the tools component

The Tools Component will help you keep your code tidy. For more information about the Tools component, check out its own tutorial. 🔍

Now, let's enable dimensions and tell them to be snapped at a distance of one unit. snapDistance helps in attaching the tooltip temporarily at regular intervals, making it easier to interact with items.📍

dimensions.enabled = true;
dimensions.snapDistance = 1;

🖱️ Managing Events

You can use the Dimension Tool to construct several dimension lines. Let's see how you handle them.

✍️ Creating the Dimensions

Now that we've generated the dimensions object, we need to attach the line tooltip to a vertex of the 3D object. We'll use the double click event to invoke dimensions.create(). When this event occurs, a line element is generated, and the distance is calculated in real-time inside the label associated with that line.🏷️

container.ondblclick = () => dimensions.create();

🧹 Deleting the Dimensions

Now that we know how to make multiple dimension lines, we must also know how to delete them when necessary. Dimensions can be removed using dimensions.delete(). dimensions.delete() deletes the dimension on which your mouse pointer is now located.

Deleting all the Dimensions

❎ If you want to safely delete all the dimensions that were created you can simply call dimensions.deleteAll()

window.onkeydown = (event) => {
if (event.code === 'Delete' || event.code === 'Backspace') {
dimensions.delete();
}
}

We'll make a Toolbar Component and set it at the bottom. In addition, we will have a button that allows you to toggle the dimension tool.

const mainToolbar = new OBC.Toolbar(components, { name: 'Main Toolbar', position: 'bottom' });
mainToolbar.addButton(dimensions.uiElement);
components.ui.addToolbar(mainToolbar);

🎛️ Check Toolbar and UIManager tutorial if you have any doubts!

🖌️ Adding Styles

Few final things, we need to add styles for the labels which display the measurement information.

ifcjs-dimension-label - The label which is used to show the metric value after both the tooltips are attached.
ifcjs-dimension-label:hover - Changing the styling when someone hovers on the dimension label.
ifcjs-dimension-preview - The label which shows the measurement when the tooltip is not yet attached.

style
.ifcjs-dimension-label {
background-color: black;
font-family: sans-serif;
color: white;
padding: 8px;
border-radius: 8px;
pointer-events: all;
transition: background-color 200ms ease-in-out;
}
.ifcjs-dimension-label:hover {
background-color: grey;
}
.ifcjs-dimension-preview {
background-color: #ffffff;
width: 2rem;
height: 2rem;
opacity: 0.3;
padding: 8px;
border-radius: 100%;
}

Congratulations 🎉 on completing this tutorial! Now you can measure any BIM Model or any 3D Object easily using Simple Dimension Component 📐 Let's keep it up and check out another tutorial! 🎓

📏 Dimensions Tool​

🎲 Creating a Cube Mesh​

🛠️ Creating Dimension Tool​

🖱️ Managing Events​

✍️ Creating the Dimensions​

🧹 Deleting the Dimensions​

⏏️ Creating a Toolbar for the Dimensions​

🖌️ Adding Styles​