EdgesClipper
⭕️ Aesthetic Clipping Edges
You can build whole BIM application using Components.💪 One such essential component is Edges Clipper which helps you to add Clipping Planes along with beautiful yet functional edges.🖍️
⚡️ Simple Clipper and Edges Clipper are similar, but Edges Clipper offers more advanced options.
If you want to learn more about Simple Clipper, visit the tutorial.
In this tutorial, we'll use the EdgesClipper to slice two distinct Cubes that each have a unique set of edge effects.
With the help of this tutorial, you can quickly add Clipping Planes and Configurable Edges to your project.🚀
👀 If you haven't started there, check out that tutorial first!
🧩 Adding Objects to Scene
Let's start by adding two Cubes, we will create a Box Geometry and use it for both Meshes.
We'll use Red and Blue colored material for the cubes🎨, and place them at a particular distance apart.📏
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(-2, 1.5, 0);
scene.add(redCube);
components.meshes.push(redCube);
const blueMaterial = new THREE.MeshStandardMaterial({color: "blue"});
const blueCube = new THREE.Mesh(cubeGeometry, blueMaterial);
blueCube.position.set(2, 1.5, 0);
scene.add(blueCube);
components.meshes.push(blueCube);
🧰 After adding cubes to the scene, we must also add them to components.meshes,
which is just an array of all the meshes in the scene.🗄️
⚔️ Slicing Some Cubes
Now that the setup is complete. Let's get started with the interesting part! We will create Edges Clipper and pass the components and Edges Plane to the constructor.
const clipper = new OBC.EdgesClipper(components, OBC.EdgesPlane);
🟦 Edges Plane helps us in adding Clipping Planes to the Clipper Component.
components.tools.add(clipper);
clipper.enabled = true;
clipper.visible = true;
When we set clipper.enabled = true, we will make the clipper functional; otherwise, clipping planes won't be formed.
The Tools Component will help you keep your code tidy. For more information about the Tools component, check out its own tutorial. 🔍
🖌️ Creating Fine Edges
Let's now prepare the materials that will be visible on the cube edges. We will use LineMaterial for creating edges.
💫 Using Line Material
After creating the Line Material we will add it to the clipper
using clipper.styles.create(styleName: string, mesh: Mesh[], material: LineMaterial)
const redLineMaterial = new LineMaterial({color: 'blue', linewidth: 0.002});
clipper.styles.create("Red lines", [redCube], redLineMaterial);
const blueLineMaterial = new LineMaterial({color: 'red', linewidth: 0.003});
clipper.styles.create("Blue lines", [blueCube], blueLineMaterial);
🤝 Performing Clipping Events
We need a method for instantly producing a clipping plane;
this can be accomplished with either a single click or a double click of the mouse.
For this tutorial, we will use Double Click, to create a Clipper that will generate a
plane on the 3D object's face.
container.ondblclick = () => clipper.create();
We use the Simple Raycaster to determine if the intersection has occurred. The clipper places a plane after detecting the face on which the mouse was clicked. Here, the EdgesClipper handles everything for you 😎
🧹 Deleting the Clipping Planes
Now that we know how to make multiple clippers, we must also know how to delete them when necessary.
Clipping Edges can be removed using clipper.delete() or clipper.delete(plane), which deletes a single plane.
clipper.delete() deletes the plane on which your mouse pointer is now located.
window.onkeydown = (event) => {
if (event.code === 'Delete' || event.code === 'Backspace') {
clipper.delete();
}
}
❎ If you want to safely delete all the clipping edges that were created you can simply call
clipper.deleteAll()
Great job! 🎉 Using the Clipper Component, you can now effortlessly check BIM models or any other 3D objects with stunning edges.🧐 Let's keep it up and check out another tutorial! 🎓