Section cap cannot work

[zhanggengjia]

Hi, I’m trying to use xeokit SectionPlanesPlugin to show section caps when slicing an XKT model.

I followed the official example [SectionPlanesPlugin_Duplex_SectionCaps.html]. In that example, setting capMaterial and clippable on each object in sceneModel.objects works fine – the section plane shows the red caps correctly.

But when I implement the same logic in a React + TypeScript (Vite) project, inside sceneModel.on("loaded"), like this:

const capMat = new PhongMaterial(viewer.scene, {
diffuse: [1.0, 0.0, 0.0],
backfaces: true,
});

const objs = (sceneModel as any).objects;
for (const id in objs) {
const entity = objs[id];
entity.capMaterial = capMat;
entity.clippable = true;
}

• Console shows that capMaterial has a setter and capMaterialId is assigned.
• The section plane is created, active is true.
• I manually move the section plane so it definitely cuts through the model.
• I also tried (viewer.scene as any).sectionPlanesEnabled = true; and edgesEnabled = false;.
  But still: no red cap surfaces are rendered.
  In the official HTML example, the exact same code works.

Environment
xeokit version: tried @xeokit/xeokit-sdk (npm ESM) and also direct import from dist/xeokit-sdk.min.es.js
Frontend: React 18 + Vite + TypeScript
Model: Duplex_A_20110505.glTFEmbedded.xkt (same as official example)

Here is the link to my repo, and see the component .
https://github.com/zhanggengjia/Xeokit_Learning/blob/main/src/examples/LoadXKT2.tsx

[MichalDybizbanskiCreoox]

Hi @zhanggengjia,
This is not very obvious, but the SectionCaps feature requires the readableGeometryEnabled: true property set for the Viewer constructor call, like here:

xeokit-sdk/examples/slicing/SectionPlanesPlugin_Duplex_SectionCaps.html

Line 67 in 833b6b1

readableGeometryEnabled: true

We plan to make it more obvious, that a capMaterial is ignored, if the Viewer is instantiated without that readableGeometryEnabled property.
Hope this helps!
Best,
Michał

[zhanggengjia]

Hi Michał, thanks a lot for your help — your explanation about readableGeometryEnabled solved my problem!

I just wanted to add a small note: when I use the npm package @xeokit/xeokit-sdk, the Viewer constructor does not seem to accept the readableGeometryEnabled property.

It only works when I import the library directly from ../dist/xeokit-sdk.min.es.js, where the Viewer class exposes that option.

So maybe the npm release is missing this property, or the dist build is ahead of the npm package?
Just wanted to share this in case others run into the same issue.

Thanks again for your support!

[MichalDybizbanskiCreoox]

[...] the npm package @xeokit/xeokit-sdk, the Viewer constructor does not seem to accept the readableGeometryEnabled property [...]

Hi @zhanggengjia,
Thank you for the feedback.
We'd like to clarify the details of this note about npm package scenario - what is the specific @xeokit/xeokit-sdk version that your project relies on?
Could you perhaps share the package.json file with us, so we'd try to reproduce the issue?
Best,
Michał

[zhanggengjia]

Hi @MichalDybizbanskiCreoox
I'm using version 2.6.90. Here is the package.
Best,
Kevin
package.json

[MichalDybizbanskiCreoox]

Hi @zhanggengjia,
We've pushed a commit that exposes the readableGeometryEnabled property in TS types declarations at
https://github.com/xeokit/xeokit-sdk/pull/1962/files
A new 2.6.91 version has been released today at https://github.com/xeokit/xeokit-sdk/releases/tag/v2.6.91, please see if it fixes the "Viewer constructor does not seem to accept the readableGeometryEnabled property" problem.
Best,
Michał