`Views`: Bugs with Creating Views from IFC Storeys and Elevation Views

[danngo-onset]

Describe the bug 📝

I’m following the tutorial on Views (https://docs.thatopen.com/Tutorials/Components/Core/Views), for this particular bit:

const config: OBC.CreateViewFromIfcStoreysConfig = {
  modelIds: [/arq/]
};
await views.createFromIfcStoreys(config);
views.createElevations({ combine: true });

There are 2 problems:

• First is the views from IFC Storeys didn’t show up
  .
  Compared to the tutorial

• Second is when I click on an elevation view, I have this exception and the world disappeared

Packages installed:

"dependencies": {
  "@thatopen/components": "^3.2.6",
  "@thatopen/ui": "^3.2.0",
  "three": "^0.175.0",
  "web-ifc": "^0.0.72"
},
"devDependencies": {
  "@thatopen/fragments": "^3.2.11",
  "@types/three": ">=0.175.0"
}

Reproduction ▶️

https://github.com/danngo-onset/ifc-viewer/tree/views-bug-report

Steps to reproduce 🔢

1. Clone the GitHub repo on branch views-bug-report
2. Run npm install
3. Run npm run dev
4. Click the Load button on top bar
5. Verify the model is loaded
6. Click the Views tab on the left panel
7. Verify the views from IFC Storeys didn’t show up, only 4 cardinal directions views
8. View one of the 4 views
9. Verify the Three.js error shows up in the console, and the world disappears from the screen

System Info 💻

- First system:
  System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 9.47 GB / 31.91 GB
  Binaries:
    Node: 24.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 143.0.7499.170
    Edge: Chromium (143.0.3650.75)
    Firefox: 143.0 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.7309

- Second system:
  System:
      OS: macOS 26.2
      CPU: (12) arm64 Apple M2 Max
      Memory: 35.64 GB / 64.00 GB
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 24.11.1 - /opt/homebrew/opt/node@24/bin/node
      Yarn: 1.22.22 - /opt/homebrew/bin/yarn
      npm: 11.6.2 - /opt/homebrew/opt/node@24/bin/npm
    Browsers:
      Chrome: 143.0.7499.193
      Edge: 143.0.3650.96
      Firefox: 142.0.1
      Safari: 26.2

Used Package Manager 📦

npm

Error Trace/Logs 📃

Click to expand!

three.module.js:4484 Uncaught TypeError: firstElem.toArray is not a function
    at flatten (three.module.js:4484:13)
    at PureArrayUniform.setValueV4fArray [as setValue] (three.module.js:5108:15)
    at WebGLUniforms.upload (three.module.js:5531:7)
    at setProgram (three.module.js:17123:19)
    at WebGLRenderer.renderBufferDirect (three.module.js:15685:20)
    at renderObject (three.module.js:16607:11)
    at renderObjects (three.module.js:16576:6)
    at renderScene (three.module.js:16419:36)
    at WebGLRenderer.render (three.module.js:16237:5)
    at SimpleRenderer.update (index.mjs:5207:16)
    at SimpleWorld.update (index.mjs:4903:21)
    at _Worlds.update (index.mjs:7702:13)
    at index.mjs:11482:21
flatten @ three.module.js:4484
setValueV4fArray @ three.module.js:5108
upload @ three.module.js:5531
setProgram @ three.module.js:17123
WebGLRenderer.renderBufferDirect @ three.module.js:15685
renderObject @ three.module.js:16607
renderObjects @ three.module.js:16576
renderScene @ three.module.js:16419
WebGLRenderer.render @ three.module.js:16237
update @ index.mjs:5207
update @ index.mjs:4903
update @ index.mjs:7702
(anonymous) @ index.mjs:11482
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485
requestAnimationFrame
(anonymous) @ index.mjs:11485

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.