Hide Objects on Camera Movement

Introduction

We can split the structured object into two groups - visible and hidden. Then, we can hide a group of objects during a camera move - i.e. pan, tilt, orbit, zoom.

The image above shows an extreme situation, were most objects are hidden. This will only reveal a skelekton. The perforance is super smooth - but the user experience might suffer.

Group Objects

There are many ways achieve this. Here's my simple take.

function buildScene(e) {
    let structured = e.data;
    structured.MainObject = mainObject;
    structured = buildGeometry(structured);
    /**
    * Split the structured into two groups: Visible & Hidden
    */
    let { visible, hidden } = groupStructure(structured);
    // TODO
}
export { buildScene };

An Array with Hidden Objects

I have created an array with all the IFC objects that I want to disappear during a camera move. These are called hidden objects.

const hiddenObjects = [
  'IfcBeam',
  'IfcColumn',
  'IfcCurtainWall',
  'IfcMember',
  'IfcPlate',
  'IfcBeam',
  'IfcBuildingElementProxy',
  'IfcColumn',
  'IfcElementAssembly',
  'IfcEquipmentElement',
  'IfcFastener',
  'IfcFlowSegment',
  'IfcFlowTerminal',
  'IfcFooting',
  'IfcFurnishingElement',
  'IfcMappedItem',
  'IfcMechanicalFastener',
  'IfcOpeningElement',
  'IfcRailing',
  'IfcRamp',
  'IfcReinforcingBar',
  'IfcReinforcingBar',
  'IfcReinforcingMesh',
];

Tweak this array to your own needs.

Perform the Grouping

We can use the aforementioned array to group each object into a visible or hidden group. Three.js has a very nice way to deal with groups.

function groupStructure(structured) {
    let visible = new THREE.Object3D();
    let hidden = new THREE.Object3D();
    let visibleChildren = [];
    let hiddenChildren = [];
    structured.MainObject.children.forEach((child) => {
        const data = child._Data;
        if (data === undefined) return;
        const ifcClass = data._IfcClass;
        if (hiddenObjects.indexOf(ifcClass) === -1) {
            visibleChildren = [...visibleChildren, child];
        } else {
            hiddenChildren = [...hiddenChildren, child];
        }
    });
    visible.children = visibleChildren;
    hidden.children = hiddenChildren;
    return { visible, hidden };
}

Notice that we use the children parmameter of the Three.Object3D().

Add Groups to Scene

Let's add the two groups to the scene. This is very straigh forward and easy to do.

function buildScene(e) {
    let structured = e.data;
    structured.MainObject = mainObject;
    structured = buildGeometry(structured);
    let { visible, hidden } = groupStructure(structured);
    
    /**
    * Add visible objects to the first group
    */
    const visibleGroup = new THREE.Group();
    visibleGroup.add(visible);
    /**
    * Add hidden objects to the second group
    */
    const hiddenGroup = new THREE.Group();
    hiddenGroup.add(hidden);
    /**
    * Add both groups to the scene
    */
    scene.add(visibleGroup);
    scene.add(hiddenGroup);
    
    initScene();
    document.getElementById('c').style.display = 'block';
    toggleLoader();
}
export { buildScene };

Hide on Camera Movement

The next step is to actually hide the hiddenGroup during a camera movement. A simple (!) way to do this is to place an event listener during a mouse press.

canvas.addEventListener('mousedown', hideGroup);
canvas.addEventListener('mouseup', showGroup);

Then, all you do is change the visible property.

const hideGroup = () => {
  scene.children[scene.children.length - 1].visible = false;
};
const showGroup = () => {
  scene.children[scene.children.length - 1].visible = true;
};

Please not that the EventListenermight intefere with other parts of the Three.js scene.