Official example (16): Parametric development of BIM section plane in 3D scene ThingJS

#Frontend# #BIM# #IoT Visual Development#

1. Model cut in 3D scene
2. Section object initialization
3. Sectional event control
   

Introduction: A building is an entity, and the interior is often blocked, causing certain difficulties for architectural design, building management and equipment maintenance. If you want to understand the complex structure inside the house, use an imaginary section plane to perform geometric cutting at this time to expose the indoor structure. ThingJS introduces the 3D sectioning surface function, the parameterized development method is more accurate, and the sectioning effect is directly displayed on the screen.

Demo link:http://www.thingjs.com/guide/?m=sample

Model cut in 3D scene

ThingJS supports six-sided sectioning and arbitrary sectioning of the square box of the model. Let's take a look at how the official example shows how to do it. As shown in the renderings, a rectangular cutting frame is generated in the 3D scene view, and the model can be cut by pressing and dragging the mouse in the direction indicated by the arrow.
To initialize the operating environment of the sectioning function, one thing to consider is how to quickly and accurately section the desired position?

Section object initialization

The cut object involved is the building to be cut. First, query the building and set the building to a non-picking state, including the internal floors of the building.
After opening the cutting action, a cutting bounding box appears around the building, creating more styles based on the object to improve recognition.
Step one, create the geometry of the cut bounding box, where the type value can be plane, box, sphere, etc.
Step two, set the parent object as the arrow of the cut direction, drag the guide arrow to activate the cut plane.
Step three, set the section Aspect styles, such as color, transparency, double-sided rendering, appear as a bounding box

/**
 * 创建方向箭头和剖切面
 */
function create() {
    if (cuttingPlane == null) {
        // 创建方向箭头
        cuttingArrow = app.create({
            type: 'Thing',  // 类型
            id: 'arrow',  // id
            url: '/api/models/5ff9ae7331e742d0bf572be34e86f651/0/gltf/',  // 模型地址
            position: cuttingBoxOptions.initPos,  // 位置
            complete: function () {
                registerEvent();
            }
        });
    }

    if (cuttingPlane == null) {
        // 创建剖切面
        cuttingPlane = app.create({
            type: 'Plane',  // 类型
            id: 'plane',  // id
            width: cuttingBoxOptions.planeWidth,  // 宽度
            height: cuttingBoxOptions.planeHeight,  // 高度
            parent: cuttingArrow,  // 设置父物体为创建的方向箭头
            style: {
                color: '#11DAB7',  // 颜色
                opacity: 0.2,  // 透明度
                doubleSide: true,  // 双面渲染
                boundingBox: true,  // 包围盒
                boundingBoxColor: '#11DAB7'  // 包围盒颜色
            }
        })
        cuttingPlane.rotateX(-90);  // 绕X轴旋转-90°
        cuttingPlane.pickable = false;  // 设置不可拾取
        cuttingPlane.inheritPickable = false;  // 设置拾取状态不受父物体影响
        cuttingPlane.inheritScale = false;  // 设置缩放不受父物体影响
    }
}

Sectional event control

Finally, a registration event is added to form a meaningful cutting action and try to conform to the user's online operation habits.
Step 1, the mouse operation is the main operation, and the direction arrow is bound to the mouse for sectioning.
Step 2. Set the arrow position, section height and direction required for sectioning.
Step 3. Don’t forget the camera angle. Turn off the default rotation event when sectioning.

Show cut plane

Sectioned building body

end

ThingJS uses parameterization to control the section plane, the front end can change the input value at any time, and use the mouse or keyboard to drive the section plane, easily realize the visual sectioning function.

About ThingJS

The ThingJS platform provides 3D visualization components for the Internet of Things, making 3D development easier! Direct Javascript call 3D script, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things. Scene building-3D script development-data docking-project deployment one-stop service to make development more efficient, and become a digital twin technology innovator with 200,000 developers !