HTMLMesh checkbox not interactive

[IRobot1]

When a boolean value is added to lil-gui, its rendered correctly by HTMLMesh, however, clicking on checkbox in mesh does not toggle the value.

Repeat case

Platform:

• Device: Desktop
• OS: Windows
• Browser: Edge
• Three.js version: r142

[Mugen87]

It seems MutationObserver can't be used to detect attribute changes. Hence, a change of the checked state does not trigger an update of the texture.

Meaning the MutationObserver's callback is not triggered when the checkbox is updated via lil-gui:

https://github.com/mrdoob/three.js/blob/c4a35bf6dc662442ae8dc583a3b0321a26d10a60/examples/jsm/interactive/HTMLMesh.js#L65-L74

[hidaris]

In my test it toggles when I click on some of the differences to the right of the checkbox, but it doesn't check the box

[mrdoob]

It seems MutationObserver can't be used to detect attribute changes. Hence, a change of the checked state does not trigger an update of the texture.

/ping @zz85

[zz85]

unfortunately it seems that MutationObserver cannot update on properties changes. however, it should be straightforward to update the HtmlTexture whenever needed (eg. based on dom event change) with mesh.material.map.update()

On Thu, Mar 23, 2023 at 8:42 PM mrdoob @.***> wrote:

It seems MutationObserver can't be used to detect attribute changes. Hence, a change of the checked state does not trigger an update of the texture.

/ping @zz85 https://github.com/zz85

— Reply to this email directly, view it on GitHub https://github.com/mrdoob/three.js/issues/24546#issuecomment-1482205838, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACM45JXHLZNMUSM77WYP23W5UJ33ANCNFSM57ZQ3NIA . You are receiving this because you were mentioned.Message ID: @.***>

[vincentfretin]

aframe-htmlmesh (a copy of HTMLMesh.js bundled into a component to be used with aframe) does exactly that, listening to input and change events and rerender. This also allows to support input range.

[remmel]

I'm not sure if this is the responsibility to HTMLMesh to listen for input/change events and trigger the update . It could be done by the code which instantiates HTMLMesh.