Trouble Highlighting IFCOPENINGELEMENTs in three.js 3D View

I'm utilizing the IFC loader to import an IFC file into three.js for 3D visualization. My current task involves highlighting all opening elements (IFCOPENINGELEMENT) in red within the 3D view. Below is the code snippet:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { IFCLoader } from 'web-ifc-three/IFCLoader';
import { IFCOPENINGELEMENT } from 'web-ifc';

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const ifcLoader = new IFCLoader();
ifcLoader.ifcManager.setWasmPath('node_modules/web-ifc/');

ifcLoader.ifcManager.setOnProgress((event) => console.log(event));

const firstModel = true;

await ifcLoader.ifcManager.applyWebIfcConfig({
    COORDINATE_TO_ORIGIN: firstModel,
    USE_FAST_BOOLS: true
});

ifcLoader.load('mockup.ifc',
    async (ifcModel) => {
        console.log('IFC Model loaded:', ifcModel);
        const highlightMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, depthTest: false, transparent: true, opacity: 0.5 });
        await highlightIFCElements(ifcModel, IFCOPENINGELEMENT, highlightMaterial);
        scene.add(ifcModel);
        animate();
    },
    (progress) => {
        console.log('Loading progress:', progress);
    },
    (error) => {
        console.error('Error loading IFC file:', error);
    }
);

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

async function highlightIFCElements(ifcModel, typeNumber, material) {
    const ifcManager = ifcLoader.ifcManager;
    const modelID = ifcModel.modelID;

    const elements = await ifcManager.getAllItemsOfType(modelID, typeNumber, false);

    elements.forEach(elementID => {
        const subset = ifcManager.createSubset({
            modelID: modelID,
            ids: [elementID],
            material: material,
            scene: scene,
            removePrevious: true
        });
        console.log("subset",subset)
        if (subset) {
            subset.layers.set(1); 
            subset.renderOrder = 1;
            console.log('Highlighted element', elementID, subset);
        } else {
            console.log('Failed to create subset for ', elementID);
        }
    });
}

How come this highlightIFCElements method does not work properly? I checked the code from here and I think it should work. his loads IFC file to the 3D world. But it does not highlight. I even tried IFCWALL instead of IFCOPENINGELEMENTs. That also did not get highlighted. There are no errors in the console either. I am using version 0.0.125.

Also, instead of the forEach, I have tried adding the entire elements array this was just for some testing purposes.

@agviegas

ThatOpen / web-ifc-three

Trouble Highlighting IFCOPENINGELEMENTs in three.js 3D View #190