Trouble Highlighting IFCOPENINGELEMENTs in three.js 3D View

[pavithraprbd]

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

[agviegas]

Hi @pavithraprbd

We have officially released the new library components on September 20 2023. This library substitutes web-ifc-three and web-ifc-viewer. Both WIV and WIT will remain up, but they will be deprecated and won't be maintained any longer. You can find the new docs here.

All our efforts are going towards components now. The API is very similar, so I strongly suggest you make the leap and start using it. If you still face this issue with it, you can open an issue there and we'll take a look.