react-three-fiber: manually have to set `manager.state.models[modelID]` before `createSubset` + `removeSubset` not working

Description

In my react-three-fiber project, I have to manually set ifcManager.state.models[modelId] before making a call to ifcManager.createSubset(). I thought the createSubset method would handle this on it’s own:

const [highlightedModel, setHighlightedModel] = useState({ id: -1 });

function highlight(intersection: Intersection<IFCModel<Event>>, material: Material) {
    const { faceIndex } = intersection;
    const { modelID, geometry } = intersection.object;
    const id = manager.getExpressId(geometry, faceIndex);

    setHighlightedModel({ id: modelID });

    manager.state.models[modelID] = intersection.object;

    manager.createSubset({
      modelID,
      ids: [id],
      material,
      scene,
      removePrevious: true,
    });
  }

Without the call to manager.state.models[modelID] = intersection.object; I get the following error:

Uncaught TypeError: this.state.models[modelID] is undefined
    getGeometry ItemsMap.ts:117
    generateGeometryIndexMap ItemsMap.ts:94
    createSubset SubsetCreator.ts:79
    createSubset BasePropertyManager.ts:9
    createSubset web-ifc-three_IFCLoader.js:54214
    highlight IFCContainer.tsx:44
    handleDblClick IFCContainer.tsx:32
    handlePointer react-three-fiber.esm.js:414
    handleIntersects react-three-fiber.esm.js:289
    handlePointer react-three-fiber.esm.js:376
    connect react-three-fiber.esm.js:1465
    connect react-three-fiber.esm.js:1463
    Provider react-three-fiber.esm.js:1807
    invokePassiveEffectCreate react-reconciler.development.js:16054
    callCallback2 react-reconciler.development.js:12184
    invokeGuardedCallbackDev react-reconciler.development.js:12233
    invokeGuardedCallback react-reconciler.development.js:12292
    flushPassiveEffectsImpl react-reconciler.development.js:16141
    unstable_runWithPriority scheduler.development.js:468
    runWithPriority react-reconciler.development.js:2495
    flushPassiveEffects react-reconciler.development.js:16014
    commitBeforeMutationEffects react-reconciler.development.js:15891
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:644
    __require2 chunk-UC7LELEO.js:48
    js index.js:6
    __require2 chunk-UC7LELEO.js:48
    React 2
    __require2 chunk-UC7LELEO.js:48
    js React
    __require2 chunk-UC7LELEO.js:48
    <anonymous> react-dom:1
ItemsMap.ts:117:9

Additionally, when I call removeSubset(modelID, highlightMaterial) visually it appears the highlight remains on the model:

  function handleDblClick(event: Intersection<IFCModel<Event>>) {
    if (Object.keys(manager.state.models).length) {
      manager.removeSubset(highlightedModel.id, highlightMaterial);
    }
    highlight(event, highlightMaterial);
  }

Steps to Reproduce

I have a repo where I reproduce this issue here.

git clone [e-mail]:Amar-Gill/r3f-model-highlight-repro.git
cd r3f-model-highlight-repro/
npm i && npm run dev

Double click any mesh, it will be highlighted. Double clicking a new mesh will highlight it also, but the highlight on the previously clicked mesh will remain:

Next, comment out the line for manager.state.models[modelID] = intersection.object; and double click a mesh. The mesh will not highlight and error will appear on console:

Uncaught TypeError: this.state.models[modelID] is undefined

[agviegas]

This new tutorial might be relevant. 🙂

[Amar-Gill]

Correct I’m using IFCLoader from web-ifc-three. So I was talking with r3f team, and was able to use the useLoader hook from r3f package to load the load the ifc model. It seems to fix my first issue, where I need to manually set manager.state.models[modelID]. However, the removeSubset functionality is still not working. I will close this issue and make a separate issue for that.

I’ve updated my git repo to show this working. I’ll share the code here as well.